cookie，cookie的封装，cookie的删除，同步和异步，Ajax,Ajax的编写步骤

2024-01-18 08:53:52

cookie:会话跟踪技术，是储存于访问者的计算机的变量

设置cookie：

document.cookie = "key=value";

cookie的使用必须有服务器；

获取cookie：获取的数据为键值对字符串

两个字符串用分号+空格分开

会话级别cookie

cookie的生命周期：就是数据在浏览器上保存的时间

document.cookie = "key=value;expires="+标准日期对象;

cookie的封装

//获取cookie
function getCookie(key){
	let strCookie = document.cookie;
	let arrCookie = strCookie.split("; ");
	for(let i=0; i<arrCookie.length;i++){
		let item = arrCookie[i].split("=");
		if(item[0] == key){
			return item[1];
		}
	}
	return '';
}

//setCookie
function setCookie(key,value,day){
	if(day == undefined){
		document.cookie = `${key}=${value}`;
	}else{
		let date = new Date();
		date.setDate(date.getDate()+day);
		document.cookie = `${key}=${value};expires=`+date;
	}
}
//delCookie
function delCookie(key){
	setCookie(key,'',-1);
}

cookie的删除

cookie没有直接删除的方式,只能侧面删除(强调长生命周期)
a.将key的value设置为''
b.将expires设置-1

两种方法一起操作

let date = new Date();
	date.setDate(date.getDate()+5);	
	document.cookie = "name=laowang;expires="+date;
	
	document.cookie = "name='';expires=-1";

同步和异步

同步:按照步骤一步一步执行,
异步:当遇到需要等待或者消耗时间的代码,则跳过该任务先去执行后续任务,
直至异步代码消耗完时间,再次执行
异步代码的分类:
a.定时器
b.事件体

 document.onclick = function(){//同步
            console.log("heihei");//异步
       }

   c.发送请求接收响应

   当同步代码和异步代码同事出现时先同步后异步

Ajax

Ajax（Asynchronous JavaScript And XML），（异步 JavaScript 和 XML），中文名：阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。

* AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

* 前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

* 为什么要使用AJAX

* 更自然、流畅的用户体验，对用户的操作即时响应

* 在不中断用户操作的情况下与Web服务器进行通信

* 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果

* 通过局部更新页面降低网络流量，提高网络的使用效率

Ajax的编写步骤

<script>
	//1.掏手机--->创建XMLHttpRequest对象
	let xhr = new XMLHttpRequest();
	//2.拨号--->调用open方法
	//xhr.open("请求的方式get/post","服务器地址",是否异步);
	xhr.open("get","5ajaxStep.txt",true);
	//3.发射--->调用send方法
	xhr.send();
	//4.等待
	xhr.onreadystatechange = function(){
		//     都都都              接电话
		if(xhr.status == 200 && xhr.readyState == 4){
			//5.反馈信息
			//responseText被返回的信息
			fun(xhr.responseText);
		}
	}
	
	function fun(resText){
		console.log(resText);
	}
</script>

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text"/><span></span>
	</body>
</html>
<script>
	let oText = document.querySelector("input");
	
	oText.onblur = function(){
		let xhr = new XMLHttpRequest();
		//get传参:url?key1=value1&key2=value2...
		xhr.open("get","6ajaxGet.php?userName="+this.value,true);
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.status==200 && xhr.readyState==4){
				fun(xhr.responseText);
			}
		}
	}
	
	function fun(resText){
		// let oSpan = document.querySelector("span");
		
		// oSpan.innerHTML = resText;
		
		//前后端分离
		let oSpan = document.querySelector("span");
		let str = resText.trim();
		if(str == "1"){
			oSpan.innerHTML = "能注册";
		}else if(str == "0"){
			oSpan.innerHTML = "能注册";
		}
	}

<?php
	header("Content-type:text/html;charset=utf-8");
	
	$name = $_GET["userName"];
	
	$conn = mysql_connect("localhost","root","root");
	
	mysql_select_db('2109');
	
	$result = mysql_query("select * from student where stu_name = '$name'",$conn);
	
	if(mysql_num_rows($result) == 1){
		// 在参与ajax相关操作的php文件中,
		// echo是返回影响的关键字
		echo 1;
	}else{
		echo 0;
	}
	
	mysql_close($conn);
?>