ajax全方位解读

前端开发

什么是ajax？

下面是MDN对于ajax的简单解释:

AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers.

ajax的全称是Asynchronous JavaScript and XML（异步JavaScript和XML）。简而言之，ajax是使用XMLHttpRequset对象来与服务器进行通讯的。它可以传送并接收多种格式的数据，包括JSON、XML、HTML以及文件等。ajax最吸引人的地方在于其“异步”的特性，着表明着它可以在与服务器通讯时，不需要重载页面。

ajax的概念：

• 1.ajax = 异步 JavaScript 和 XML。
• 2.ajax是一种用于创建快速动态网页的技术。
• 3.通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。
• 4.可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest对象详解

要使用ajax发送一个http请求，需要通过XMLHttpRequest()构造器创建一个XMLHttpRequest对象实例：

let xhr = new XMLHttpRequset()

然后，现在可以向服务器发送一个HTTP请求：

xhr.open('GET', 'api/example')  // 通过GET方式请求数据，
                                // 请求的数据可以是JSON、HTML、图片等等，
                                // 这依赖于api/example这个域名下服务器返回的数据类型是什么
xhr.send()                      //发送数据

XMLHttpRequset的属性：

1.onreadystatechange
XMLHttpRequset的回调函数，监听该xhr对象的变化。也可以使用onload进行监听。

xhr.onreadystatechange = function() {
// code here...
}

2.readyState
该属性只可读，表示请求的状态，有5个值：

• 0：UNSENT(未打开)，此时open()方法还未被调用
• 1：OPENED(未发送)，此时send()方法还未被调用
• 2：HEADERS_RECEIVED(已获取响应头)，此时send()方法已经被调用, 响应头和响应状态已经返回
• 3：LOADING(正在下载响应体)，响应体下载中，responseText中已经获取了部分数据
• 4：DONE(请求完成)，请求完成

3.response
该属性只可读，响应体数据，通过http请求得到的数据在response属性当中。
其数据类型由responseType来指定。
如果请求未完成或者失败，该值为null。

4.responseType
设置该值能够改变响应类型，即告诉服务器你期望的响应格式。其属性值为：

• ''(空字符串)：字符串(默认值)
• 'arraybuffer'：ArrayBuffer
• 'blob'：blob
• 'document'：Document
• 'json'：JavaScript 对象，解析自服务器传递回来的JSON 字符串
• 'text'：字符串

5.responseText
该属性只可读，responseText也是响应体数据，与response类似，该属性表示服务器返回的文本数据。后面会详细说这两者的区别。

6.status
该属性只可读，该请求的响应状态码 (例如, 状态码200，表示一个成功的请求)。

7.statusText
该属性只可读， 该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK")。

8.timeout
设置HTTP请求的时限，若超过这个时限，就会自动停止HTTP请求。

xhr.timeout = 3000  // 如果时间超过3S，请求会自动停止

9.ontimeout
与上面timeout匹配的事件，用于指定当回调函数：

xhr.ontimeout = function() {
    alert('请求超时！')
}

以上是常用的XMLHttpRequest对象的属性。一个完整的实例应该如下，此处我们使用formData创建数据，并通过POST方法向服务器提交。

function sendAjax() {
    //构造表单数据
    var formData = new FormData();
    formData.append('username', 'Daniel');
    formData.append('id', 123456);
    //创建xhr对象 
    var xhr = new XMLHttpRequest();
    //设置xhr请求的超时时间
    xhr.timeout = 3000;
    //设置响应返回的数据格式
    xhr.responseType = "text";
    //创建一个 post 请求，采用异步
    xhr.open('POST', '/server', true);
    //注册相关事件回调处理函数
    xhr.onload = function(e) { 
        if(xhr.readyState === 4 && xhr.status === 200){
            alert(this.responseText);
        }
    };
    xhr.ontimeout = function(e) { ... };
    xhr.onerror = function(e) { ... };
    xhr.upload.onprogress = function(e) { ... };
    //发送数据
    xhr.send(formData);
}

关于XMLHttpRequest的更多用法细节

1.设置请求头(request header)

在发送Ajax请求（实质是一个HTTP请求）时，我们可能需要设置一些请求头部信息，比如content-type、connection、cookie、accept-xxx等。xhr提供了setRequestHeader来允许我们修改请求 header。

xhr.setRequestHeader('header', 'value')

注意：

• 方法的第一个参数header 大小写不敏感，即可以写成content-type，也可以写成Content-Type，甚至写成content-Type;
• setRequestHeader必须在open()方法之后，send()方法之前调用，否则会抛错；
• setRequestHeader可以调用多次，最终的值不会采用覆盖override的方式，而是采用追加append的方式。

如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'api/example');
xhr.setRequestHeader('X-Test', 'one');
xhr.setRequestHeader('X-Test', 'two');
// 最终request header中"X-Test"为: one, two
client.send();

2.获取响应头(response header)

xhr提供了2个用来获取响应头部的方法：getAllResponseHeaders和getResponseHeader。前者是获取response中的所有header 字段，后者只是获取某个指定header 字段的值。另外，getResponseHeader(header)的header参数不区分大小写。

xhr.getAllResponseHeaders()     // 获取response中所有header
xhr.getResponseHeader(header)   // 获取response中指定header

对于这两个方法，值得注意的是：

• 无论是同域请求还是跨域请求，客户端无法获取 response 中的 Set-Cookie、Set-Cookie2这2个字段；
• 规定对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers”。

上面所指的simple response header包括的字段为：Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma;
而对于Access-Control-Expose-Headers，该字段是在跨域请求中出现的，对于同域请求，响应头部是没有这个字段。这个字段中列举的 header 字段就是服务器允许暴露给客户端访问的字段。

因此，getAllResponseHeaders()只能拿到限制以外（即被视为safe）的header字段，而不是全部字段；而调用getResponseHeader(header)方法时，header参数必须是限制以外的header字段，否则调用就会报Refused to get unsafe header的错误。

3.关于获取response返回数据

xhr提供了3个属性来获取请求返回的数据，分别是：xhr.response、xhr.responseText、xhr.responseXML。

• xhr.response
  
  • 默认值为空字符串""
  • 当请求完成时，此属性才有正确的值
  • 请求未完成时，此属性的值可能是""或者 null，具体与 xhr.responseType有关：当responseType为""或"text"时，值为""；responseType为其他值时，值为 null
• xhr.responseText
  
  • 默认值为空字符串""
  • 只有当 responseType 为"text"、""时，xhr对象上才有此属性，此时才能调用xhr.responseText，否则抛错
  • 只有当请求成功时，才能拿到正确值。以下2种情况下值都为空字符串""：请求未完成、请求失败
• xhr.responseXML
  
  • 默认值为 null
  • 有当 responseType 为"text"、""、"document"时，xhr对象上才有此属性，此时才能调用xhr.responseXML，否则抛错
  • 只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下3种情况下值都为null：请求未完成、请求失败、请求成功但返回数据无法被正确解析时

4.使用ajax发送同步请求

xhr默认发的是异步请求，但也支持发同步请求（当然实际开发中应该尽量避免使用）。到底是异步还是同步请求，由xhr.open（)传入的async参数决定。

open(method, url [, async = true [, username = null [, password = null]]])

• method: 请求的方式，如GET/POST/HEADER等，这个参数不区分大小写
• url: 请求的地址，可以是相对地址如example.php，这个相对是相对于当前网页的url路径；也可以是绝对地址如http://www.example.com/example.php
• async: 默认值为true，即为异步请求，若async=false，则为同步请求

值得注意的是，当xhr为同步请求时，有如下限制：
- xhr.timeout必须为0
- xhr.withCredentials必须为 false
- xhr.responseType必须为""（注意置为"text"也不允许）

若上面任何一个限制不满足，都会抛错，而对于异步请求，则没有这些参数设置上的限制。

我们要避免使用sync同步请求的原因是，由于我们无法设置请求超时时间（xhr.timeout为0，即不限时）。在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。

5.获取上传、下载的进度

在上传或者下载比较大的文件时，实时显示当前的上传、下载进度是很普遍的产品需求。
我们可以通过onprogress事件来实时显示进度，默认情况下这个事件每50ms触发一次。需要注意的是，上传过程和下载过程触发的是不同对象的onprogress事件：

• 上传触发的是xhr.upload对象的 onprogress事件
• 下载触发的是xhr对象的onprogress事件

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
    if (event.lengthComputable) {
      var completedPercent = event.loaded / event.total;
    }
 }

上面的代码中，event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0。

与progress事件相关的，还有其他六个事件，可以分别指定回调函数，下面包括progress事件：

• onloadstart事件：传输开始
• onprogress事件：传输进度
• load事件：传输成功完成
• abort事件：传输被用户取消
• error事件：传输中出现错误
• loadstart事件：传输开始
• loadEnd事件：传输结束，但是不知道成功还是失败

xhr相关事件

上面已经总结了七个xhr事件，这些事件均属于XMLHttpRequestEventTarget。
因此，再包括我们前面提过的一个事件，可见XMLHttpRequest一共有八个相关事件：7个XMLHttpRequestEventTarget事件+1个独有的onreadystatechange事件。

事件的触发条件

事件触发顺序

①当请求一切正常时，相关的事件触发顺序如下：

1. 触发xhr.onreadystatechange(之后每次readyState变化时，都会触发一次)
2. 触发xhr.onloadstart
   //上传阶段开始：
3. 触发xhr.upload.onloadstart
4. 触发xhr.upload.onprogress
5. 触发xhr.upload.onload
6. 触发xhr.upload.onloadend
   //上传结束，下载阶段开始：
7. 触发xhr.onprogress
8. 触发xhr.onload
9. 触发xhr.onloadend

②发生abort/timeout/error异常的处理

在请求的过程中，有可能发生 abort/timeout/error这3种异常。那么一旦发生这些异常，xhr后续会进行哪些处理呢？后续处理如下：
1. 一旦发生abort或timeout或error异常，先立即中止当前请求
2. 将readystate置为4，并触发 xhr.onreadystatechange事件
3. 如果上传阶段还没有结束，则依次触发以下事件：
xhr.upload.onprogress
xhr.upload.[onabort或ontimeout或onerror]
xhr.upload.onloadend
4. 触发xhr.onprogress事件
5. 触发xhr.[onabort或ontimeout或onerror]事件
触发xhr.onloadend事件

在哪个xhr事件中注册成功回调？

从上面介绍的事件中，可以知道若xhr请求成功，就会触发xhr.onreadystatechange和xhr.onload两个事件。 那么我们到底要将成功回调注册在哪个事件中呢？实际上两个事件都可以，如下：

xhr.onreadystatechange = function () {
    //如果请求成功
    if(xhr.readyState == 4 && xhr.status == 200){
      //do successCallback
    }
  }

xhr.onload = function () {
    //如果请求成功
    if(xhr.status == 200){
      //do successCallback
    }
  }

上面的示例代码是很常见的写法：先判断http状态码是否是200，如果是，则认为请求是成功的，接着执行成功回调。这样的判断是有坑的，比如当返回的http状态码不是200，而是201时，请求虽然也是成功的，但并没有执行成功回调逻辑。所以更靠谱的判断方法应该是：当http状态码为2xx或304时才认为成功。

  xhr.onload = function () {
    //如果请求成功
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      //do successCallback
    }
  }

ajax 优缺点

优点

• 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
• 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
• 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
• 基于标准化的并被广泛支持的技术，不需要下载插件。

缺点

• ajax干掉了浏览器的back按钮，对浏览器后退机制的破坏。
• 安全问题，ajax技术就如同对企业数据建立了一个直接通道，暴露出请求的接口的数据。
• 对搜索引擎支持的不友好。
• 破坏了程序的异常机制，如果程序抛出异常，对调试带来不方便。
• 另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。