Ajax(js中你必须拥有的知识点)

环境：Ajax是必须要在服务器环境下运行的！
Ajax：是前后端交互的重要手段
全称：Asynchronous(异步) JavaScript and Xml(数据)
注意：我们现在交互用的数据是json不是Xml（过时）了

一、首先要了解异步和同步

打个比方：假如你想让四个手下分别去执行四个不同的任务，
如果用“同步”的方法，就要先让第一个人去执行任务，这期间你和另外三个手下就呆呆地等，什么也不干，直到第一个人完成任务回来报告后再让第二个人去执行任务，依此类推；
而如果用“异步”的方法，就可以把四个手下同时派出去执行任务，然后自己就可以去喝酒唱歌了，手下完成任务后只需要用手机向你汇报结果即可。

二、为什么使用AJax,它的优缺点是什么

优点：
①异步：同时执行，效率高，当前请求不会影响到其他的程序。
②可以在不中断游览器其他任务的情况下，加载新数据，也就是无刷新加载数据
③提高用户体验，节约了性能。
缺点：
①不刷新，不会产生历史记录，破坏了浏览器前进后退功能。（你请求了新数据的话，你的老数据就没有了，不是破坏整个，仅仅破坏了Ajax的请求的那一部分）
②因为新数据是将来才有可能拿到，那么会让搜索引擎爬虫，忽略新数据中的关键字，降低网站搜索排名（因为没有刷新啊！）

三、Ajax是如何请求的

这里我推荐一位李老师的理解方式：
①准备一个手机：创建出一个xhr对象。
②准备拨号：选择什么方式打电话（听筒还是免提），打给谁？(号码多少)
                     什么方式打电话：get(免提)/post(听筒)…
                     打给谁？号码多少：请求的地址。
③接通了:要说什么话？（就是发送的数据）
④观察状态：手机有没有问题，信号运营商有没有问题四

		let xhr=new XMLHttpRequest(); //准备手机
		xhr.open("请求方式"，请求地址);//准备拨号
		xhr.send();//接通了
		xhr.onreadystatechange=function(){ //观察状态（这是一个js异步事件）
			if（xhr.readyState==4&&xhr.status==200)//分别是手机状态和信号运营商的状态
			{
				console.log(xhr.responseText);//读取到对方信息！
			}
		}

四、get/post请求方式的区别

get：发送数据的方式安全性不高，发送数据的大小也只有4KB左右！不过发送的速度是快的！它发送数据的方式是在地址栏后面添加数据！

		let url="http://www.baidu.com?×××=×××&×××=×××&...."//问号后面就是添加的格式

post：发送数据的方式安全性高，发送的数据大小比get大的多IIS 6.0默认上传文件的最大大小是4MB。发送速度比get慢！它发送数据的方式是在xhr.send()括号内添加字符且格式也为×××&×××=×××&…不过还需要加一个表头信息规定数据类型。

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//表头信息
xhr.send("×××&×××=×××&....");//发送数据格式

五、如何解决Ajax请求服务器的缓存缺点

data/hello.text?×××&×××=×××&wd=123456;
data/hello.text?×××&×××=×××&wd=785495;
这两个地址对于游览器来说不是同一个地址，但是是同一个资源
所以解决缓存问题的方法就是在地址后面加一个随机的后缀。
这里我们惯用时间戳来解决。

六、给一份原生封装的Ajax方法

function ajaxGetPost(ops){
		ops.method=ops.method||"get";//设置默认参数
		ops.data=ops.data||{};//设置默认参数
		let str="";
		for(var key in ops.data){
			str+=`${key}=${ops.data[key]}&`;  //遍历形成规定的数据形式
		}
		let xhr=new XMLHttpRequest();//准备电话
		let t=new Date().getTime(); //时间戳
		ops.url=ops.method=="get"?ops.url+'?'+str+"w_t="+t:ops.url;//三目方式在地址栏添加数据
		xhr.open(ops.method,ops.url);//准备拨号
		if(ops.method=="post"){
			xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置表头信息
			//str[str.lastIndexOf("&")]=""; //多一个&符放在send()里面依然没有问题！
			xhr.send(str);//post方式发送数据
		}else{
			xhr.send();
		}
		xhr.onreadystatechange=function(){//观察状态
			if(xhr.readyState==4&&xhr.status==200){
				cb(xhr.responseText);
			}
		}
	}

以上就是我堆Ajax的理解！送给大家！
最后希望疫情早日结束！逆战必胜！！