AJAX和XMLHttpRequest对象

前言

在web发展的早期，页面上的交互元素（比如表单的提交按钮）的工作模式是用户点击，浏览器发起请求，用户等待，服务器返回新的页面，浏览器刷新页面，如果网速比较差，那么用户需要等待很长的事件。虽然web的发展，网页上的元素越来越多，也不局限于文本，越来越多的图片出现在网页上，原来的这种点击，等待，刷新的机制让用户体验非常糟糕。顺应着这种需求，ajax诞生了。

AJAX

AJAX是一种技术方案，让浏览器能够异步向服务器请求数据而不用刷新页面，AJAX的核心就是浏览器的 XMLHttpRequest 对象，这个对象最早由微软实现，后来各大浏览器都提供了对 XMLHtmlRequest 对象的支持。其实在 XMLHtmlRequest 出现之前，很多开发人员就在尝试这种模式的通信了，当时都是使用一些hack的手段。 XMLHttpRequest 对象的出现为向服务器发送HTTP请求和接收HTTP响应提供了流畅的接口，让开发人员能够方便地用异步的方法于服务器进行交互，这种异步的通信方法在2005年正式被命名为 ajax 。正是ajax技术极大的提高了web应用的用户体验和性能，是web飞速发展的一个起点。

XHR标准

从微软在 IE5 上引入 XHR 对象以后，其他浏览器也都增加了对 XHR 对象的支持，如今 XHR 已经有了通用的 标准 ，最新版的标准是 XHR level 2 ， level1 的用法如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php');
xhr.send();
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
        alert( xhr.responseText );
    } else {
        alert( xhr.statusText );
    }
};

level1 的主要属性如下：

– xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。

– xhr.status：服务器返回的状态码，等于200表示一切正常。

– xhr.responseText：服务器返回的文本数据

– xhr.responseXML：服务器返回的XML格式的数据

– xhr.statusText：服务器返回的状态文本。

level1 有以下几个缺点：

– 受同源策略的限制，不能发送跨域请求；

– 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；

– 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

level2 对 level1 进行了改进，增加了以下特性：

– 可以发送跨域请求，在服务端允许的情况下；

– 支持发送和接收二进制数据；

– 新增formData对象，支持发送表单数据；

– 发送和获取数据时，可以获取进度信息；

– 可以设置请求的超时时间；

XHR的使用

设置请求首部

HTTP请求报文有很多首部信息，首部中会提供请求的许多信息，比如优先的字符集，编码等， XHR 对象提供了让我们设置请求首部的方法 setRequestHeader() 。

XMLHttpRequest.setRequestHeader(header, value)

setRequestHeader() 方法有几点需要注意：

1. setRequestHeader必须在open()方法之后，send()方法之前调用，否则会抛错；

2. setRequestHeader可以调用多次，最终的值不会采用覆盖override的方式，而是采用追加append的方式。下面是一个示例代码：

3. 并不是所有首部字段都可以设置，参照 禁止修改的首部列表

// The following script:
var client = new XMLHttpRequest();
client.open('GET', 'demo.cgi');
client.setRequestHeader('X-Test', 'one');
client.setRequestHeader('X-Test', 'two');
client.send();

// …results in the following header being sent:
// X-Test: one, two

获取Response Header

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

重写响应的MIME类型

MIME类型

媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化。详见[MDN](媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化。 “MDN”)

浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理URL，因此Web服务器在响应头中添加正确的MIME类型非常重要。如果配置不正确，浏览器可能会曲解文件内容，网站将无法正常工作，并且下载的文件也会被错误处理。

对于服务器返回的内容，可能由于响应报文中的 content-type 和实际内容不符而导致浏览器对数据的处理出现问题，有时候需要告诉浏览器返回的内容按什么媒体类型处理。XHR给出的方法有两个： xhr.overrideMimeType() 方法和 xhr.responseType 属性。

xhr.overrideMimeType()

XMLHttpRequest 的 overrideMimeType 方法是指定一个MIME类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定MIME类型处理。例如强制使流方式处理为” text/xml “类型处理时会被使用到，即使服务器在响应头中并没有这样指定。此方法必须在 send 方法之前调用方为有效。

如果服务器没有指定一个 Content-Type 头, XMLHttpRequest 默认MIME类型为” text/xml “. 如果接受的数据不是有效的 XML ，将会出现格”格式不正确“的错误。你能够通过调用 overrideMimeType() 指定各种类型来避免这种情况。

req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.addEventListener("load", callback, false);
req.open("get", url);
req.send();

xhr.responseType

XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的” text “类型。

当将 responseType 设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容,服务器返回的数据会变成 null ，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置 responseType 会抛出一个 InvalidAccessError 的异常。

responseType 支持以下几种类型：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
//可以将`xhr.responseType`设置为`"blob"`也可以设置为`" arrayBuffer"`
//xhr.responseType = 'arrayBuffer';
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    ...
  }
};

xhr.send();

获取 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 ：请求未完成、请求失败、请求成功但返回数据无法被正确解析时

获取请求状态

用 xhr.readyState 这个属性可以获取当前请求的状态。这个属性是只读属性，总共有5种可能值，分别对应 xhr 不同的不同阶段。每次 xhr.readyState 的值发生变化时，都会触发 xhr.onreadystatechange 事件，我们可以在这个事件中进行相关状态判断。

xhr.onreadystatechange = function () {
    switch(xhr.readyState){
      case 1://OPENED
        //do something
            break;
      case 2://HEADERS_RECEIVED
        //do something
        break;
      case 3://LOADING
        //do something
        break;
      case 4://DONE
        //do something
        break;
    }

设置请求超时时间

如果请求过了很久还没有成功，为了不会白白占用的网络资源，我们一般会主动终止请求。 XMLHttpRequest 提供了 timeout 属性来允许设置请求的超时时间。

XMLHttpRequest.timeout 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生， timeout 事件将会被触发。

xhr.onloadstart 事件触发的时候开始计时，也就是你调用 xhr.send() 方法的时候。

可以在 send() 之后再设置此 xhr.timeout ，但计时起始点仍为调用 xhr.send() 方法的时刻。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.timeout = 2000; // 超时时间，单位是毫秒

xhr.onload = function () {
  // 请求完成。在此进行处理。
};

xhr.ontimeout = function (e) {
  // XMLHttpRequest 超时。在此做某事。
};

xhr.send(null);

同步请求

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”也不允许）

在 chrome中，当 xhr 为同步请求时，在 xhr.readyState 由2变成3时，并不会触发 onreadystatechange 事件， xhr.upload.onprogress 和 xhr.onprogress 事件也不会触发。

获取上传、下载的进度

我们可以通过 onprogress 事件来实时显示进度，默认情况下这个事件每 50ms 触发一次。需要注意的是，上传过程和下载过程触发的是不同对象的 onprogress 事件：

onprogress
onprogress

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

发送的数据类型

xhr.send(data) 的参数 data 可以是以下几种类型：

ArrayBuffer
Blob
Document
DOMString
FormData
null

如果是 GET/HEAD 请求， send() 方法一般不传参或传 null 。不过即使你真传入了参数，参数也最终被忽略， xhr.send(data) 中的 data 会被置为 null .

xhr.send(data) 中 data 参数的数据类型会影响请求头部 content-type 的默认值：

• 如果 data 是 Document 类型，同时也是 HTML Document 类型，则 content-type 默认值为 text/html;charset=UTF-8;否则为application/xml;charset=UTF-8 ；
• 如果 data 是 DOMString 类型， content-type 默认值为 text/plain;charset=UTF-8 ；
• 如果 data 是 FormData 类型， content-type 默认值为 multipart/form-data; boundary=[xxx]
• 如果 data 是其他类型，则不会设置content-type的默认值

当然这些只是 content-type 的默认值，但如果用 xhr.setRequestHeader() 手动设置了中 content-type 的值，以上默认值就会被覆盖。

FormData对象

ajax操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个FormData对象，可以模拟表单。

var formData = new FormData();
formData.append('username', '张三');
formData.append('id', 123456);
xhr.send(formData);

//FormData对象也可以用来获取网页表单的值。
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);

上传文件

假定 files 是一个”选择文件”的表单元素（ input[type="file"] ），我们将它装入 FormData ，

javascript

var formData = new FormData();

for (var i = 0; i 
对象。  
  

    
      xhr.withCredentials
    
  
  

我们都知道，在发同域请求时，浏览器会将    cookie
自动加在    request header
中。但大家是否遇到过这样的场景：在发送跨域请求时，    cookie
并没有自动加在    request header
中。  
  

造成这个问题的原因是：在    CORS
标准中做了规定，默认情况下，浏览器在发送跨域请求时，不能发送任何认证信息（credentials）如”    cookies
“和”    HTTP authentication schemes
“。除非    xhr.withCredentials
为    true
（    xhr
对象有一个属性叫    withCredentials
，默认值为    false
）。  
  

所以根本原因是    cookies
也是一种认证信息，在跨域请求中，client端必须手动设置    xhr.withCredentials=true
，且    server
端也必须允许request能携带认证信息（即    response header
中包含    Access-Control-Allow-Credentials:true
），这样浏览器才会自动将    cookie
加在    request header
中。  
  

另外，要特别注意一点，一旦跨域    request
能够携带认证信息，    server
端一定不能将    Access-Control-Allow-Origin
设置为    *
，而必须设置为请求页面的域名。  
  

    
      XMLHttpRequest
事件    
  
  

    XMLHttpRequestEventTarget
接口定义了7个事件：  
  
onloadstart
onprogress
onabort
ontimeout
onerror
onload
onloadend

  

    

每一个      XMLHttpRequest
里面都有一个      upload
属性，而      upload
是一个      XMLHttpRequestUpload
(表示上传进度）对象    
    

      XMLHttpRequest
和      XMLHttpRequestUpload
都继承了同一个      XMLHttpRequestEventTarget
接口，所以      xhr
和      xhr.upload
都有第一条列举的7个事件    
    

      onreadystatechange
是      XMLHttpRequest
独有的事件    
  
  

事件触发顺序

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这3种异常。

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] 事件
6. 触发 xhr.onloadend 事件

参考文章

1. 你真的会使用XMLHttpRequest吗？
2. XMLHttpRequest Living Standard
3. XMLHttpRequest Level 2 使用指南
4. MDN