XMLHttpRequest对象详解

XMLHttpRequest提供了一组用于客户端和服务器之间传输数据的API

从XMLHttpRequest接口来看：

[NoInterfaceObject]
interface XMLHttpRequestEventTarget: EventTarget {
    attribute EventHandler onloadstart;
    attribute EventHandler onprogress;
    attribute EventHandler onabort;
    attribute EventHandler onerror;
    attribute EventHandler onload;
    attribute EventHandler ontimeout;
    attribute EventHandler onloaded;
};

interface XMLHttpRequestUpload: XMLHttpRequestEventTarget {

};

enum XMLHttpRequestResponseType {
    "",
    "arraybuffer",
    "blob",
    "document",
    "json",
    "text"
};

[Constructor]
interface XMLHttpRequest: XMLHttpRequestEventTarget {
    //event handler
    attribute EventHandler onreadystatechange;

    //states
    const unsigned short UNSENT = 0;
    const unsigned short OPENED = 1;
    const unsigned short HEADERS_RECEIVED = 2;
    const unsigned short LOADING = 3;
    const unsigned short DONE = 4;
    readonly attribute unsigned short readyState;

    //request
    void open(ByteString method,[EnsureUTF16] DOMString url);
    void open(ByteString method,[EnsureUTF16] DOMString url,boolean async,optional [EnsureUTF16] DOMString? username = null,optional [EnsureUTF16] DOMString? password = null);
    void setRequestHeader(ByteString header,ByteString value);

    attribute unsigned lond timeout;
    attribute boolean withCredentials;
    readonly attribute XMLHttpRequestUpload upload;
    void send(optional (ArrayBufferView or Blob or [EnsureUTF16] DOMString or FormData)?data=null);

    //response
    ByteString?getResponseHeader(ByteString header);
    ByteString?getAllResponseHeader();
    void overrideMimeType(DOMString mime);

    readonly attribute unsigned short status;
    readonly attribute ByteString statusText;
    attribute XMLHttpRequestResponseType responseType;
    readonly attribute any response;
    readonly attribute DOMString responseText;
    readonly attribute Document? responseXML;
}

每一个XMLHttpRequest都有一个唯一的与之关联的XMLHttpRequestUpload对象
实例：

    var formData = new FormData();
    formData.append('name','Kuang');
    formData.append('password','Kuang')

    var xhr = new XMLHttpRequest();
    xhr.timeout = 300;
    xhr.responseType = 'json';
    xhr.open('POST',test.json',true);
    xhr.onreadystatechange = function() {
        if(this.readyState === this.DONE){
            if(this.status === 200 || this.status === 304){

            }
        }
    }
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(formData);

XMLHttpRequest详解

事件

实现XMLHttpRequestEventTarget的事件：

    onloadstart
    onprogress
    onabort
    onerror
    onload
    ontimeout
    onloaded

自身定义的事件：

    onreadystatechange

状态

常量：

    UNSENT = 0
    OPENED = 1;
    HEADERS_RECEIVED = 2;
    LOADING = 3;
    DONE = 4;

readyState是一个只读属性可取以上五个常量的值，当readyState改变是将出发onreadystatechange事件。

request相关

方法：
open()打开一个请求

    open(method,url,async,[name],[password]);
    method: 请求方法POST，GET
    url: 请求地址
    async: 是否使用异步方式发起请求

setRequestHeader()设置请求头

    setRequestHeader(header,value);
    header: 请求头类型
    value: 请求头值
    采用追加方式设置

send()发起请求

    send(arraybuffer|blob|formdata|string);
    发起一个请求，可附带数据，发送query string时需要设置setRequestheader('Content-Type','application/x-www-form-urlencoded')

属性

    timeout             
    //设置请求超时时间
    withCredentials
    /*
    发起同域请求时，request header中会自动添加上cookie。而发送跨域请求时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设置为*，而必须设置为请求页面的域名。
    *／
    upload
    //XMLHttpRequestUpload
    对象用户上传，实现了XMLHttpRequestEventTarget接口，故带有相应的事件处理

response相关

方法：
getResponseHeader获取某一请求头

    getResponseHeader(header);
    //返回特定请求头的值

getAllResponseHeader获取全部请求头

    getAllResponseHeader()
    //返回所有请求头组成的字符串

overrideMimeType

overrideMimeType是xhr level 1就有的方法，所以浏览器兼容性良好。这个方法的作用就是用来重写response的content-type，这样做有什么意义呢？比如：server 端给客户端返回了一份document或者是 xml文档，我们希望最终通过xhr.response拿到的就是一个DOM对象，那么就可以用xhr.overrideMimeType(‘text/xml; charset = utf-8’)来实现。
获取图片的实例

    var xhr = new XMLHttpRequest();
    //向 server 端获取一张图片
    xhr.open('GET', '/path/to/image.png', true);

    // 这行是关键！
    //将响应数据按照纯文本格式来解析，字符集替换为用户自己定义的字符集
    xhr.overrideMimeType('text/plain; charset=x-user-defined');

    xhr.onreadystatechange = function(e) {
      if (this.readyState == 4 && this.status == 200) {
        //通过 responseText 来获取图片文件对应的二进制字符串
        var binStr = this.responseText;
        //然后自己再想方法将逐个字节还原为二进制数据
        for (var i = 0, len = binStr.length; i < len; ++i) {
          var c = binStr.charCodeAt(i);
          //String.fromCharCode(c & 0xff);
          var byte = c & 0xff; 
        }
      }
    };

    xhr.send();

代码示例中xhr请求的是一张图片，通过将 response 的 content-type 改为’text/plain; charset=x-user-defined’，使得 xhr 以纯文本格式来解析接收到的blob 数据，最终用户通过this.responseText拿到的就是图片文件对应的二进制字符串，最后再将其转换为 blob 数据。

属性：
status
请求成功后的状态

statusText
请求成功后的状态文字

responseType
responseType是xhr level 2新增的属性，用来指定xhr.response的数据类型，目前还存在些兼容性问题，可以参考本文的【XMLHttpRequest的兼容性】这一小节。那么responseType可以设置为哪些格式呢，我简单做了一个表，如下：

值	数据类型	说明
“”	String字符串	默认不设置responseType时
text	Sting字符串
arraybuffer	ArrayBuffer对象
blob	Blob对像
formdata	FormData对象	FormData实例
document	Document对象	希望返回XML格式数据时使用

下面是同样是获取一张图片的代码示例，相比xhr.overrideMimeType,用xhr.response来实现简单得多。

    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
返回与设置的responseType一致的数据
responseText
当responseType为"text"或""时才有此属性
responseXML
当responseType为"text"，""，doument时才有此属性