1. 概述
Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。
在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：
- 地址栏输入地址，回车，刷新
- 特定元素的 href 或 src 属性
- 表单提交
这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），如果我们可以通过 JavaScript 直接发送网络请求，那么 Web 的可能就会更多，随之能够实现的功能也会更多，至少不再是“单机游戏”。
AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载页面。让 Web 更能接近桌面应用的用户体验。
说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程。
能力不够 API 凑。
2. 快速上手
使用 AJAX 的过程可以类比平常我们访问网页过程
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器 var xhr = new XMLHttpRequest() // 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址 xhr.open('GET', './time.php') // 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求 xhr.send(null) // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作 xhr.onreadystatechange = function () { // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成 if (this.readyState === 4) { // 通过 xhr 的 responseText 获取到响应的响应体 console.log(this) } }
2.1. readyState
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：
2.1.1. 时间轴
var xhr = new XMLHttpRequest() console.log(xhr.readyState) // => 0 // 初始化 请求代理对象 xhr.open('GET', 'time.php') console.log(xhr.readyState) // => 1 // open 方法已经调用，建立一个与服务端特定端口的连接 xhr.send() xhr.addEventListener('readystatechange', function () { switch (this.readyState) { case 2: // => 2 // 已经接受到了响应报文的响应头 // 可以拿到头 // console.log(this.getAllResponseHeaders()) console.log(this.getResponseHeader('server')) // 但是还没有拿到体console.log(this.responseText) break case 3: // => 3 // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整 // 在这里处理响应体不保险（不可靠）console.log(this.responseText) break case 4: // => 4 // 一切 OK （整个响应报文已经完整下载下来了） // 这里处理响应体console.log(this.responseText) break } })
通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。
xhr.onreadystatechange = function () { if (this.readyState === 4) { // 后续逻辑...... } }
2.2. 遵循 HTTP
本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是HTTP 请求，同样符合 HTTP 约定的格式：
小案例：设置http请求头
add.php
<?php var_dump($_POST);
ajax-http.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遵循HTTP协议</title> </head> <body> <script> var xhr = new XMLHttpRequest() xhr.open('POST', '/add.php') // 设置请求行 xhr.setRequestHeader('Foo', 'Bar') // 设置一个请求头 // 一旦你的请求体是 urlencoded 格式的内容，一定要设置请求头中 Content-Type 'application/x-www-form-urlencoded' xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('key1=value1&key2=value2') // 以 urlencoded 格式设置请求体 </script> </body> </html>
参考链接：
MDN 使用 XMLHttpRequest官方文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
MDN XMLHttpRequest官方文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
