AJAX 原生JS处理

AJAX

同步、异步

同步：必须等待当前事情完成后才可进行其他事情
异步：不需要等待其他事情完成即可运行，多件事情同时进行，互不干扰
计时器等，为异步代码，他不会影响其他代码的正常执行（异步的代码自己不影响其他顺序，而不是其他代码不影响异步代码顺序）

AJAX，异步操作，异步JS和XML的结合。在不重新刷新界面的情况下，更新界面数据，在请求数据时候，不影响本地操作的正常响应

请求及处理步骤：

1、创建对象

XMLHttpRequest ie7以上
ActiveXObject(‘Microsoft.XMLHTTP’) ie5-6
var xhr = new XMLHttpRequest();
兼容性设置：通过if else判断，调用不同的参数

2、初始化，设置请求方法和url

xhr.open(推送方式,url,是否异步)
请求参数：推送方式post/get，url，是否异步ture/flase
get：可在url内直接放入参数
如果是post，需要设置请求头告诉服务端你的请求体的格式

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Http请求体

请求报文

行   GET/POST等  url的参数拼接   HTTP/1.1
头   Host:网址
	Cookie：name=XX
	Content-type：application/json
	User-Agent:chrome 83	
空行
请求体 post必须有 get因为已经在行内拼接可没有 
		username=XX&password=XXX

相应报文

行 HTTP/1.1 200 OK
头 Content-type：test/html;charset=utf=8
	Content-length：2048
	……
空行
体 html的具体内容/json等，根据格式返回

3、发送

xhr.send(String) 发送请求，参数在post需要发送参数时候传送，为加密的内容

4、事件绑定 AJAX的触发异步事件，处理服务端返回的结果

onreadystatechange事件，用于接收返回结果,当 xhr.readyState 的值改变的时候，callback 函数会被调用。
AJAX状态代码readystate：0-5个状态码,4为完成

xhr.onreadystatechange = function(){

	if(xhr.readystate ===4){
		if(xhr.status >=200 &&xhr.status <=300)	{
    // Process the server response here.			
		}
	}
};//当状态码为4，响应码为200时候，即可解析进行后续操作

服务器返回

xhr.response 返回响应的正文
xhr.responseType 相应正文的类型，最常见的为json、document：XML或者HTML类型 text 为空字符串时，采用默认类型 DOMString，与设置为 text 相同。通过设置responseType可自动转换json为对象
也可手动转换，通过JS的JSON.parse()对象，可将其手动转为对象
xhr.status 响应码 200 成功 404 未找到 500 未知异常
xhr.responseText 以字符串形式获取响应数据
xhr.responseXML 以XML获取相应数据