概述
Ajax（Asynchronous JavaScript and XML，即异步 JavaScript 和 XML）技术用于与服务器交换数据并刷新部分页面，实现更好的用户体验。
Ajax 的核心对象是 XMLHttpRequest，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。由微软实现并在 IE5 中支持，用于执行异步网络请求。虽然 Ajax 是 Asynchronous JavaScript+XML 的缩写，但 Ajax 通信与数据格式无关，并不一定是 XML 格式。甚至支持 HTTP 以外的协议（如 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。
使用 Ajax 需要几个步骤：
创建 XMLHttpRequest 对象。
发出 HTTP 请求。
接收服务器传回的数据。
更新网页数据。
总之，Ajax 就是通过 XMLHttpRequest 对象发出 HTTP 请求，得到服务器响应并处理。
Ajax 全套学习资料领取链接：http://www.atguigu.com/download.shtml
创建 XMLHttpRequest
在所有现代浏览器都可以通过 XMLHttpRequest 构造函数创建对象：
let xhr = new XMLHttpRequest();
而在老版本 IE5 和 IE6 中使用 ActiveX 对象创建：
let xhr = new ActiveXObject("Microsoft.XMLHTTP");
使用 XMLHttpRequest
创建对象后，需要使用 XMLHttpRequest 对象调用 open(type, url, async) 方法并设置三个参数：
type：表示请求类型，如 "get" 、"post" 等。
url：表示请求的 url。
async：表示请求是否异步。如 true表示异步请求，false表示同步请求，它会使 JavaScript 代码等待服务器响应之后在继续执行。
请求
XMLHttpRequest 使用 open() 方法初始化一个请求，一共可以接收五个参数：
open(method, url, async, username, password): void;
method：字符串，表示要传入的 HTTP 方法，如/GET/POST/PUT/DELETE等。
url：字符串，表示请求发送目标 URL。
async：布尔值，表示请求是否为异步，默认为true。如果值为false，send()方法只有等待收到服务器返回结果，才会进行下一步操作。参数可选。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。注意，主线程上的同步请求很容易破坏用户体验，应避免；实际上，许多浏览器以完全启用主线程上的同步XMLHttpRequest支持。在Worker中允许同步请求。
username：字符串，表示用户名用于认证用途，默认为null。参数可选。
password：字符串，表示密码用于认证用途，默认为null。参数可选。
因此，前两个参数是必须要添加的。请求初始化后，就可以调用send() 方法发出 HTTP 请求。如果是异步请求（默认异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直接响应到达后才会返回。该方法有一个可选参数，作为请求主体，请求方法是GET/HEAD，则请求体设置为null。
send(body): void;
该方法的参数是 XMLHttpRequest 请求中要发送的数据体，可以设置的值为：
Document：发送 Document 类型的数据，但发送之前会被序列化。
BodyInit：可以是 Blob/BufferSource/FormData/URLSearchParams/ReadableStream
null。如果没有指定值，默认值就是 null。
因此，创建完XMLHttpRequest对象后，就会按顺序调用open()和send()方法来发送请求。而最常用的方法就是 GET 和 POST 方法。
GET
GET 请求方法，主要用于查询服务器信息。而查询的参数要正确编码并添加到URL后面，例如 example.jsp?username=Alpha&password=a123456，参数之间会用&符号分隔，然后才能传给 open() 方法。该方法最常见的错误就是格式不对，因此可以使用 encodeURIComponent() 函数对字符串进行编码。
let url = "example.jsp";
url = addParam(url, "username", "Alpha");
url = addParam(url, "password", "a123456");
xhr.open('get', url, true);
function addParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;}
addParam() 函数保证 XMLHttpRequest 发送请求的 URL 格式正确。
POST
POST 请求方法，主要用于向服务器发送数据。POST 请求会在请求体中携带要提交的数据。POST 请求在传参上不用像 GET 请求那样将参数拼接在 URL 后面，而是使用 send() 方法来携带要提交的数据。
默认情况下，对服务器而言，POST 请求与HTML表单提交是不一样的。服务器逻辑需要读取原始 POST 数据才能取得浏览器发送的数据。不过，还可以使用 XML 模拟表单提交。为此，第一步需要把 Content-Type 头部设置为 "application/x-www-formurlencoded"，这是提交表单时使用的内容类型。第二步是创建对应格式的字符串。POST 数据此时使用与查询字符串相同的格式。如果网页中确实有一个表单需要序列化并通过 XMLHttpRequest 发送到服务器，则可以使用 serialize() 函数来创建相应的字符串，如下所示：
function submitData() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
} else {
alert("请求失败: " + xhr.status);
}
}
};
xhr.open("post", "example.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// ID为 user-info 的表单元素
let form = document.getElementById("user-info");
xhr.send(serialize(form));}
注意：POST 请求相比 GET 请求要占用更多资源。从性能方面说，发送相同数据的数据，GET 请求比 POST 请求快两倍。
响应
当服务器收到请求并响应后，XMLHttpRequest 对象会有以下属性被填充数据：
status：响应的 HTTP 状态码。
stautsText：响应的 HTTP 状态描述。
response：响应的正文。
responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是 "text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
一般都是通过 status 属性来确保响应是否成功返回。当 status 为 2xx 表示成功，为 304 表示资源未被修改，而是从缓存中取出的。这时的 responseText 或 responseXML 属性中会有内容。因此，我们可以使用 status 属性来判断响应是否有效，如下所示：
xhr.open("get", "example.txt", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);} else {
console.log("Request was unsuccessful: " + xhr.status);}
response
XMLHttpRequest.response 属性返回响应的数据体（即 HTTP 响应的 body 部分）。返回的类型为 ArrayBuffer、Blob、Document、Object或DOMString中的一个。具体类型由 XMLHttpRequest.responseType 类型决定。
当请求尚未完成或尚未成功，该值为 null。但当 responseType 属性设置成 "text" 或空字符串("") 且当请求状态在LOADING时，response属性包含到目前为止该请求已经取得的内容。
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
console.log(xhr.response);
}}
responseType
XMLHttpRequest.responseType 属性是一个字符串，返回响应数据的类型。允许手动设置返回数据的类型。如果设置为空字符串，则使用默认的"text"类型。
当 responseType 设置为一个特定的类型时，需确保服务器返回的类型和你所设置的类型是兼容的。如果不兼容，即使服务器返回了数据，数据也会变成null。responseType 属性支持以下几种值：
""：当responseType为空字符串时，与 text 相同，表示服务器返回文本数据。
"arraybuffer"：表示服务器返回的是一个包含二进制数据的ArrayBuffer 对象。
“blob”：表示服务器返回的是一个包含二进制数据的 Blob对象。
“document”：表示服务器返回的是一个HTML Document 或 XML Document，这取决于接收数据的 MIME 类型。
“json”：表示将接收到的服务器数据视为JSON来进行解析并得到。
“text”：表示服务器返回的是以DOMString对象表示的文本。
上面几种类型之中，text类型适合大多数情况，而且直接处理文本也比较方便。document类型适合返回HTML/XML文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用 Ajax 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。blob 类型适合读取二进制数据，比如图片文件。XMLHttpRequest.responseType属性要在调用 open() 方法之后，并且在调用 send() 方法之前调用。
let xhr = new XMLHttpRequest();
xhr.open("GET", "example.jsp", true);
xhr.responseType = "json";
xhr.send(null);
readyState
XMLHttpRequest.readyState 属性返回一个无符号短整型数字，表示XMLHttpRequest对象的当前状态。该对象会返回以下某个值：
返回 0，未初始化（Uninitialized），状态为 UNSENT。表示代理被创建，但尚未调用 open() 方法。
返回 1，状态为 Open 已打开（Open），状态为OPENED。表示 open() 方法已被调用，但尚未调用 send() 方法。
返回 2，已发送（Sent），状态为HEADERS_RECEIVED。表示已调用 send() 方法，并且头部和状态已经可获得，但尚未收到响应。
返回 3：接收中（Receiving），状态为LOADING。表示已经收到部分响应。
返回 4：已完成（Complete），状态为DONE。表示请求操作已完成。意味着数据传输已经彻底完成或失败。
通信过程中，每当 XMLHttpRequest 对象状态发送变化，readyState 属性值就会被改变，并会触发 onreadystatechange事件。并且XMLHttpRequest对象调用abort()方法，终止请求，也会造成 readyState属性变化。为保证兼容性，onreadystatechange事件应在open()方法之前赋值。如下所示：
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}};
xhr.open("get", "example.txt", true);
xhr.send(null);
如果之前使用的是异步请求并想在响应之前取消，可以调用 abort() 方法：
let xhr = new XMLHttpRequest();
xhr.open("get", "example.jsp", true);
setTimeout(function() {
if (xhr) {
xhr.abort();
xhr = null;
}}, 5000); // 5秒后，终止 Ajax 请求
调用这个方法后，XMLHttpRequest 对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性，而 readyState 属性变为 4，status 属性变为 0 。中断请求后，应该取消对 XMLHttpRequest 对象的引用。由于内存问题，不推荐重用 XMLHttpRequest 对象。
HTTP 头部
在 HTTP 的每次请求和响应中都会携带一些头部字段，默认请求下，XMLHttpRequest 请求会发送以下头部字段。
Accept：浏览器可以处理的内容类型。
Accept-Charset：浏览器可以显示的字符集。
Accept-Encoding：浏览器可以处理的压缩编码类型。
Accept-Language：浏览器使用的语言。
Connection：浏览器与服务器的连接类型。
Cookie：页面中设置的 Cookie。
Host：发送请求的页面所在的域。
Referer：发送请求的页面的 URI。
User-Agent：浏览器的用户代理字符串。
XMLHttpRequest对象通过一些方法暴露与请求和响应相关的头部字段。
setRequestHeader()
XMLHttpRequest.setRequestHeader() 方法是设置 HTTP 请求头部字段的方法。此方法接收两个参数：第一个参数是头部属性名，第二个参数是头部属性值。为保证请求头被发送，必须在 open() 之后，send() 之前调用。如果多次调用，设置同一个字段的值会合并成单一的值发送。如下所示：
let xhr = new XMLHttpRequest();
xhr.open("get", "example.jsp", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Custom-Header", "Custom-Value");
xhr.send(null);
自定义头部要区别于浏览器正常发送的头部，否则会影响服务器正常响应。默认头部在有些浏览器上可以重写。而自定义一些 header 属性进行跨域请求时，可能会遇到 "not allowed by Access-Control-Allow-Headers in preflight response"，你可能需要在你的服务端设置 “Access-Control-Allow-Headers”。
getResponseHeader()/getAllResponseHeaders()
XMLHttpRequest.getResponseHeader() 方法用于返回 HTTP 响应头中指定的属性值。如果在返回时，有多个一样的名字，那么返回的值就是用逗号和空格分隔开的字符串。
而 XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头，是以 CRLF 分隔（回车+换行）的字符串，如果没收到服务器回应，该属性为 null。以下就是该方法返回的字符串样子：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3600
Content-Length: 0
Content-Type: application/json;charset=UTF-8
Date: Sun, 13 Dec 2020 11:46:23 GMT
Server: Apache-Coyote/1.1
通过解析以上头部字段的输出，就可以知道服务器发送的所有头部，而不需要单独去检查了。
withCredentials
XMLHttpRequest.withCredentials 属性是一个Boolean类型，用来指定跨域请求时，是否应带有用户信息（如 Cookie 和认证的 HTTP 头信息）。默认值是 false，即向 sample.com 发送跨域请求时，不会发送 sample.com 设置在本机上的 Cookie。
当需要跨域 AJAX 请求发送 Cookie 时，需要设置 XMLHttpRequest.withCredentials 为 true。同源请求无需设置。而想要这个属性生效，服务器需要显示返回 Access-Control-Allow-Credentials 头信息。
Access-Control-Allow-Credentials: true
注意：脚本总是遵守同源策略，无法从 document.cookie 或者 HTTP 响应的头信息中读取跨域的 Cookie，无论 XMLHttpRequest.withCredentials 的属性值是true或false。
abort()
XMLHttpRequest.abort() 方法用于终止已被发出的请求。当一个请求被终止，readyState 和 status 属性都会被置为 0。
事件
XMLHttpRequest 对象的事件基本上都和请求进度有关，以下列出与 XMLHttpRequest 对象有关的事件：
abort：请求中止时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
error：请求错误时触发。
load：请求成功并完成响应时触发，不用检查 readyState 属性，可替代 readystatechange 事件。
loadstart：请求成功时并接收到响应的第一个字节时触发。也适用于 和