一、获取数据
我们知道AJAX用来在项目中以阻止页面刷新的方式获取数据，那么数据从哪里来呢？我们又怎么知道如何获取这些数据？答案是我们通常使用API与各式各样的数据库交互。
“API”是“Application Programming Interface”(即：应用程序接口)的缩写，你可以想象一些数据是开放的并且在等待被使用，而我们获取这些数据的方式便是使用API。API通常的形式是一个URL，并提供指定的参数名和参数值用来帮助你定位所要获取的数据。
还记得我们提过AJAX需要服务器端的相应设置吗？我们之后会再来谈这一点。
二、AJAX技术的核心 – XMLHttpRequest对象
让我们先把服务器端的设置抛在一边，聚焦AJAX技术的核心环节： XMLHttpRequest对象。
XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，当然整个过程中，浏览器页面不会被刷新。它将是本文接下来的主角，让我们先站在较高的层次，对该对象有一个全局的概览：
XMLHttpRequest只是一个JavaScript对象，确切的说，是一个构造函数。换句话说，它一点也不神秘，它的特殊之处只在于它是由客户端(即浏览器)提供的（而不是JavaScript原生的），除此之外，它有属性，有方法，需要通过new关键字进行实例化，我们只需掌握它们就好；
XMLHttpRequest对象是不断被扩展的。随着XML对象被广泛的接收，W3C也开始着手制定相应的标准来规范其行为。目前，XMLHttpRequest有两个级别：1级提供了XML对象的实现细节，2级进一步发展了XML对象，额外添加了一些方法，属性和数据类型。但是，并不是所有浏览器都实现了XML对象2级的内容（并不意外，对吧？）；
让我们先从剖析 XMLHttpRequest实例的属性和方法开始，先创建一个XML对象的实例：
const xhr = new XMLHttpRequest()
该实例的属性、方法有：
方法
.open()：准备启动一个AJAX请求；
.setRequestHeader()：设置请求头部信息；
.send()：发送AJAX请求；
.getResponseHeader(): 获得响应头部信息；
.getAllResponseHeader()：获得一个包含所有头部信息的长字符串；
.abort()：取消异步请求；
属性
.responseText：包含响应主体返回文本；
.responseXML：如果响应的内容类型时text/xml或application/xml，该属性将保存包含着相应数据的XML DOM文档；
.status：响应的HTTP状态；
.statusText：HTTP状态的说明；
.readyState：表示“请求”/“响应”过程的当前活动阶段
另外，浏览器还为该对象提供了一个 onreadystatechange监听事件，每当XML实例的 readyState属性变化时，就会触发该事件的发生。
至此，关于XMLHttpRequest实例对象的属性方法就全部罗列完毕了，接下来，我们将更进一步的探究如何使用这些方法，属性完成发送AJAX请求的流程。
三、准备AJAX请求
要想与服务器交互，我们首先需要回答以下问题：
我们是要获取数据还是存储数据？ –表现为请求方式的不同：GET或POST；
以何种方式等待响应？ –有“同步”和“异步”两种选择；（网络传输是一个过程，请求和响应不是同时发生的。）
下面是一个 .open()方法调用的例子：
// 该段代码会启动一个针对“example.php”的GET同步请求。
xhr.open(“get”, “example.php”, false)
相当于开始做饭前，将工具准备齐备，将菜洗好， .open()方法也同样出色地完成了发送AJAX请求的准备工作。
现在，让我们再深入聊聊一些准备工作的细节：
（一）GET请求 与 POST请求
GET请求
GET请求用于获取数据，有时候我们需要获取的数据需要通过“查询参数”进行定位，在这种情况下，我们会将查询参数追加到URL的末尾，令服务器解析。
查询参数是指一个由 ?号起始，由 &符号分割的包含相应键值对的字符串。用来告知浏览器所要查询的特定资源。
const query = “example.php?name=tom&age=24” // “?name=tom&age=24″即是一个查询参数
需要注意的是，查询字符串中每个参数的名和值都必须使用encodeURIComponent()进行编码（这是因为URL中有些字符会引起歧义，例如“&”）。
POST请求
POST请求用于向服务器发送应该被保存的数据，因此POST请求天然比GET请求多需要一份需要被保存的数据。那么这些数据应该放在何处呢？毕竟，我们的 .open()方法接收的三个参数都没有合适的位置。
答案是需要发送的数据会作为 .send()方法的参数最终被发往服务器，该数据可以是任意大小，任意类型。
这里需要注意以下两点：
.send()方法的参数是不可为空的，也就是说，对于不需要发送任何数据的GET请求，也需要在调用.send()方法时，向其传入null值；
目前为止，我们知道了两种向服务器发送数据的方式：表单提交以及发送POST请求，要注意服务器对待这两种方式并不一视同仁，这意味着服务器需要有相应的代码专门处理POST请求发送来的原始数据。
但好在我们可以通过POST请求模拟表单提交，只需要简单两步：
设置请求头参数：Content-Type:application/x-www-form-urlencoded（表单提交时的内容类型）；
将表单数据序列化为查询字符串形式，传入.send()方法；
这里需要注意若使用相对路径，请求URL是相对于执行代码的当前页面。
（三）同步请求与异步请求
人们通常认为AJAX是异步的，实际上并非如此，AJAX是避免页面在获取数据后刷新的一种技术，至于等待服务器响应的方式是同步还是异步，需要开发人员结合业务需求进行配置（虽然通常是异步的）。
最后我们再简单解释一下“同步”等待响应与“异步”等待响应的区别：“同步”意味着一旦请求发出，任何后续的JavaScript代码不会再执行，“异步”则是当请求发出后，后续的JavaScript代码会继续执行，当请求成功后，会调用相应的回调函数。
四、设置请求头
每个HTTP请求和响应都会带有相应的头部信息，包含一些与数据，收发者网络环境与状态等相关信息。XMLHttpRequest对象提供的 .setRequestHeader()方法为开发者提供了一个操作这两种头部信息的方法，并允许开发者自定义请求头的头部信息。
默认情况下，当发送AJAX请求时，会附带以下头部信息：
Accept：浏览器能够处理的内容类型；
Accept-Charset: 浏览器能够显示的字符集；
Accept-Encoding：浏览器能够处理的压缩编码；
Accept-Language：浏览器当前设置的语言；
Connection：浏览器与服务器之间连接的类型；
Cookie：当前页面设置的任何Cookie；
Host：发出请求的页面所在的域；
Referer：发出请求的页面URI；
User-Agent：浏览器的用户代理字符串；
注意：部分浏览器不允许使用 .setRequestHeader()方法重写默认请求头信息，因此自定义请求头信息是更加安全的方法：
// 自定义请求头
xhr.setRequestHeader(“myHeader”, “MyValue”)
五、发送请求
// 发送AJAX请求！
const xhr = new XMLHttpRequest()
xhr.open(“get”, “example.php”, false)
xhr.setRequestHeader(“myHeader”, “goodHeader”)
xhr.send(null)
呃，简单的有些令人尴尬不是吗？换个POST请求试试看：
// 发送AJAX请求！
const xhr = new XMLHttpRequest()
xhr.open(“post”, “example.php”, false)
xhr.setRequestHeader(“myHeader”, “bestHeader”)
xhr.send(some_data)
额，总觉得还是差点什么？放轻松伙计，因为我们只是发出了请求，还没有处理响应，我们这就来看看它。
六、处理响应
让我们直接看看如何处理一个同步的GET请求响应：
const xhr = new XMLHttpRequest()
xhr.open(“get”, “example.php”, false)
xhr.setRequestHeader(“myHeader”, “goodHeader”)
xhr.send(null)
// 由于是同步的AJAX请求，因此只有当服务器响应后才会继续执行下面的代码
// 因此xhr.status的值一定不为默认值
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert(“Request was unsuccessful: ” xhr.status)
}
上面的代码不难理解，我们通过之前提到的xhr .status属性（如果你忘记了，它存储着响应的HTTP状态）判断请求是否成功，如果成功的话，我们将读取xhr .responseText属性中存储的返回值。但是，当我们的请求为异步时，问题就稍微变得复杂了，由于是异步的请求，在 xhr.send(null)语句被执行后，JavaScript引擎会紧接着执行下面的判断语句，而这时由于尚未来得及响应，我们注定会得到一个默认的xhr.status值，因此，我们永远都不可能获取请求的资源了。
如何解决这个问题？答案是通过为XMLHTTPRequest实例添加 onreadystatechange事件处理程序（当然你也可以直接使用DOM2级规范规定的 .addEventListener()方法，但是注意，IE8是不支持该方法的）。
xhr实例的 readystatechange事件会监听xhr .readyState属性的变化，你可以将这个属性想象为一个计数器，随着AJAX流程的推进而不断累加，其可取的值如下：
未初始化 — 尚未调用.open()方法；
启动 — 已经调用.open()方法，但尚未调用.send()方法；
发送 — 已经调用.send()方法，但尚未接收到响应；
接收 — 已经接收到部分响应数据；
完成 — 已经接收到全部响应数据，而且已经可以在客户端使用了；
有了这个时间处理程序对AJAX进程做监听，剩下的事就简单多了，一个异步的GET请求代码如下：
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
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”, “example.php”, true)
xhr.send(null)
注意：为了确保跨浏览器的兼容性，必须要在调用 .open()方法之前指定事件处理程序，仔细想想也有道理，毕竟 .open()方法的执行也包含在该事件处理程序的监听范围之内对吧？
七、取消异步请求
有时候，你可能需要在接收到响应之前取消异步请求，这时候，你需要调用 .abort()方法。
该方法会令XHR对象实例停止触发事件，并且不再允许访问任何和响应有关的对象属性。没了监控器，我们再也没法判断响应了不是吗？
但是需要注意的是，当终止AJAX请求后，你需要手动对XHR对象实例进行解绑以释放内存空间。
???? 恭喜你！到这里你已经学会了所有的AJAX基础知识，你知道了AJAX是什么，存在的意义以及如何真正发起一个AJAX请求并接收响应，你已经是一个AJAX大师！祝贺你！太棒了！????
?? 真棒，尊敬的AJAX大师，你居然还没有离开，那么我将传授你最后一部分AJAX秘籍，帮助你成为一个真正的AJAX忍者，这是你的坚持赢得的！
八、秘籍：XMLHttpRequest 2级
还记得我们一开始有提到，W3C提出了XMLHttpRequest 2级规范吗？虽然并非所有的浏览器都实现了该规范所规定的内容，但还是有一些内容被全部或大多数浏览器所实现。想成为AJAX忍者？往下看吧。
提示：在这一部分，你将会看到很多有关浏览器兼容性的文字，希望你不要觉得枯燥，毕竟这可是忍者的修行，对吧？
（一）FormData 类型
FormData是XMLHttpRequest 2级为我们提供的新的数据类型（构造函数），还记的我们之前是如何伪装一个POST请求为一个表单提交吗？FormData令这一过程变得更加轻松，因为XHR对象能够识别传入的数据类型是FormData的实例，并自动配置适当的头部信息。
FormData的使用方式如下：
// 添加数据
let data1 = new FormData()
data1.append(“name”, “Tom”)
xhr.send(data1)
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)
除此之外，FormData的另一个好处是相较于传统的AJAX请求，它允许我们上传二进制数据（图片，视频，音频等），具体详情可查看该链接。
FormData的浏览器兼容性：
桌面端
IE 10 与其他浏览器均支持
移动端
Android，Firefox Mobile，OperaMobile均支持，其余浏览器未知
（二）超时设定
当我们发送一个AJAX请求，却迟迟得不到服务器响应，这种感觉是很糟糕的。为了缓解这种糟糕的感觉，XMLHttpRequest 2级规范为我们提供了一个额外的属性和事件监听事件：
timeout属性：设置超时时间，单位为毫秒；
timeout事件：当响应时间超出实例对象timeout属性时被触发；
使用方式如下：
// 当响应时间超过1秒时，请求中止，弹出提示框
xhr.timeout = 1000
xhr.ontimeout = () => { alert(“Request did not return in a second.”) }
注意，当请求终止时，会调用 ontimeout事件处理程序，此时xhr的 readyState属性的值可能已变为4，这意味着会继续调用 onreadystatechange事件处理程序，但是当超时中止请求后再访问xhr的 status属性会使浏览器抛出一个错误，因此需要将检查 status属性的语句放入 try-catch语句中。
虽然带来了一些麻烦，但是我们却对XMLHttpRequest对象有了更多的控制。
浏览器兼容性：
桌面端
IE 10 与其他浏览器均支持
移动端
IE Mobile 10 与其他浏览器均支持
（三）overrideMimeType()方法
响应返回的响应头里，描述了返回数据的MIME类型，浏览器通过识别该类型，告知XMLHttpRequest实例处理该数据的方式。然而有时候（例如将XML类型数据当做纯文本处理），我们想要以我们想要的方式处理响应的数据，在XMLHttpRequest 2级规范中，我们可以使用 .overrideMimeType()方法，从方法名也可以轻松猜出，该方法可以覆写响应头所描述数据的MIME类型。
其写法如下：
const xhr = new XMLHttpRequest()
xhr.open(“get”, “example.php”, true)
xhr.overrideMimeType(“text/xml”) // 强迫浏览器将响应数据以指定类型方式解读
xhr.send(null)
至此，我们掌控了响应数据的处理方式。
浏览器兼容性：
桌面端
IE 7 与其他浏览器均支持
移动端
Firefox Mobile，Chrome for Android 均支持，其余浏览器未知
（四）进度事件
Progress Events规范是W3C制定的一个工作草案。该规范定义了与客户端与服务器通信相关的一系列事件，这些事件监听了通信进程中的各个关键节点，使我们能够以更细的颗粒度掌控数据传输过程中的细节。目前共有6个进度事件，他们会随数据传输进展被顺序触发（除了error，abort事件），让我们看看他们的定义和浏览器兼容情况：
loadstart：在接收到响应数据的第一个字节时触发；
桌面端：除 Safari Mobile 未知外，其他浏览器均支持
移动端：除 Safari Mobile 未知外，其他浏览器均支持
progress：在接收响应期间持续不断地触发；
桌面端：IE10 与其他浏览器均支持
移动端：均支持
error：在请求发生错误时触发；
abort：再因为调用abort()方法时触发；
桌面端：未知
移动端：未知
load：在接收到完整的响应数据时触发；
桌面端：IE7 与其他浏览器均支持
移动端：Chrome for Android，Edge，Firefox Mobile支持，其余浏览器未知
loadend：在通信完成或者触发error，abort或load事件后触发；
桌面端：所有浏览器不支持
移动端：所有浏览器不支持
这里我们将着重展开讲解以下两个事件：
load事件
该事件帮助我们节省了 readstatechange事件，我们不必在XHR对象实例上绑定该事件监听函数以追踪实例上 readState属性的变化，而是可以直接使用以下代码：
const xhr = new XMLHttpRequest()
xhr.onload = () => {
if ((xhr.status >= 200 && xhr.status <300) || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert(“Something wrong!”)
}
}
xhr.open(“get”, “example.php”, true)
xhr.send(null)
progress事件
该事件令我们可以实现我们梦寐以求的加载进度条效果。因为 onprogress事件处理程序会接收到一个 event对象，其 target属性为XHR对象实例，但却额外包含着三个属性：
lengthComputable：表示进度信息是否可用的布尔值；
position：表示目前接收的字节数；
totalSize：表示根据Content-Length响应头部确定的预期字节数；
很显然，我们的加载进度条所需的一切资源都准备就绪，我们只需写出下面的代码：
const xhr = new XMLHttpRequest()
xhr.onload = () => {
if ((xhr.status >= 200 && xhr.status <300) || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert(“Something wrong!”)
}
}
// 加载进度条
xhr.onprogress = function(event) {
const divStatus = document.getElementById(“status”)
if (event.lengthComputable) {
divStatus.innerHTML = `Received ${event.postion} of ${event.totalSize} bytes`
}
}
xhr.open(“get”, “example.php”, true)
xhr.send(null)
一切大功告成！不过还要记得注意，需要在 .open()方法前调用 onprogress事件处理程序。
太棒了，关于AJAX，我已经没有什么可说的了，如果你已经掌握了以上所有概念，那么“AJAX忍者”的称号你当之无愧。
我真的为你感到骄傲，Great Work！??
相关文章推荐
AJAX 原理与 CORS 跨域
前端常见跨域解决方案（全）
深入理解 JSON
