AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
XMLHttpRequest对象
1.1XHR的用法
let xhr = new XMLHttpRequest()
open()方法不会真正发送请求，而只是启动一个请求以备发送,接收3个参数：要发送的请求类型、请求URL、是否异步发送请求
xhr.open("get","example.php",false)
发送特定请求，调用send()方法。接收1个参数，即要作为请求主体发送的数据。若没有数据则必须传入null。调用send()之后，请求就会被分派的服务器。
xhr.send(null)
若请求是同步的，JS代码就会等到服务器响应之后再继续执行。
在收到响应后，响应的数据会自动填充XHR对象的属性，属性如下
1.responseText：作为响应主题被放回的文本
2.responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着相应数据的XML DOM文档。
3.status：响应的HTTP状态
4.statusText：HTTP状态的说明
接收响应先检查status属性判断是够成功。一般将200作为成功标志。此时responseText属性内容已就绪，若内容类型正确responseXML也能访问。状态码304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本。
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert("request was unsuccessful：" + xhr.status)
}
多数情况发送异步请求，才能让JS继续执行而不必等待响应。此时可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。可取值如下
0：未初始化，尚未调用open()方法
1：启动。已调用open()，为调用send()
2：发送。已调用send()，但尚未接收到响应
3：接受。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且可以在客户端使用。
主要readyState属性的值有一个值变换一个值，就会触发一次readystatechange事件。可以利用该事件检测每次状态变化后的readyState值。必须在调用open前指定该事件才能确保跨浏览器兼容性
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert("request was unsuccessful：" + xhr.status)
}
}
}
xhr.open("get", "examlpe.text", false)
xhr.send(null)
在接受到响应内容之前可以调用absort()方法取消异步请求：
xhr.abort()
调用该方法XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。
1.2HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息。
默认情况发送XHR请求的同时会发送下列头部信息
Accept：浏览器能够处理的内容类型
原文地址：https://www.cnblogs.com/Mijiujs/p/12200278.html