谈谈对XMLHTTPRequest Level 2的理解

要想了解XMLHTTPRequest Level 2，首先得回顾一下XMLHTTPRequest对象。

什么是XMLHTTPRequest

XMLHTTPRequest是一个由浏览器提供的接口，用于客户端和服务器之间传输数据，它是ajax的核心，使ajax可以实现异步请求。

XMLHTTPRequest Level 1的属性、方法及使用

首先，建立一个XMLHTTPRequest

var xhr = new XMLHTTPRequest();

而后，初始化一个http请求并发送，指明请求方法、地址和是否异步，true为异步，第三个参数能够不填，默认是true。

xhr.open('GET', URL, true);
xhr.send();

最后，用onreadystatechange函数监控readyState状态变化，编写回调函数。

readyState是xhr的属性，表示当前的请求状态，一共有5个值：
0 - xhr对象已经建立，open( )方法还未调用；
1 - open( )方法已调用，send( )还未调用；
2 - send( )方法被调用，响应头和响应状态已经返回；
3 - 响应数据正在下载中；
4 - 请求完成，无论是否请求成功；
每当readyState变化的时候，都会触发onreadystatechange，并得到当前状态。

其余属性：

1. responseXML表示服务器返回的XML格式的数据
2. responseText表示服务器返回的文本
3. statusText表示服务器返回的响应状态说明

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var responseText = xhr.responseText;
    } else {
        var statusText = xhr.statusText;
    }
};

XMLHTTPRequest Level 1的缺点

• 只支持文本格式传送，不能传输或者读取二进制文件；
• 不能跨域请求数据；
• 只能获取到状态值，不能获取具体的进度；

XMLHTTPRequest Level 2

IE5首先引进了XMLHTTPRequest接口，因为它的异步请求，获取数据不用刷新整个页面，使得它都到了普遍应用，其余浏览器也都支持了它。但XMLHTTPRequest一直没有获得标准化，直到HTML5概念造成后，W3C提出了XMLHttpRequest Level 2草案。它针对老版的缺点进行了改进，支持了更多的功能。

XMLHTTPRequest Level 2的改进和具体使用方法

1. 支持文件格式的传输：
   HTML5新增了一个FormData对象，经过访问FormData能够编辑表单数据：

   var formData = new FormData(); // 建立一个FormData对象
   formData.append(Key, Value); // 经过append()方法插入一个表单数据

   经过这个对象，就能够实现文件格式的传输：

   var formData = new FormData();
   formData.append('file', file);
   xhr.send(formData);

2. 支持读取服务器端的二进制数据：

   var xhr = new XMLHttpRequest();
   xhr.open(Method, URL);
   xhr.responseType = 'blob'; // 经过responseType属性表示接瘦的是一个二进制对象

3. 支持设置HTTP请求超时时间：
   经过timeout属性设置超时时间，超过该时间，没有完成请求，触发ontimeout方法。Opera、Firefox和IE10支持该属性，IE八、IE9是由XDomainRequest对象支持该属性。

   xhr.timeout = 5000;
   xhr.ontimeout = function(e) {
       alert('请求超时!');
   }

4. 支持获取当前的传输进度：
   传输数据时，由progress事件返回进度信息，分为上传和下载，下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

   xhr.onprogress // 下载的progress事件
   xhr.upload.onprogress // 上传的progress事件

   定义回调函数：total是须要传输的总字节，loaded是已经传输的字节，若是lengthComputable值为false，total为0

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

5. 支持跨域请求:
   跨域请求的前提是浏览器必须支持这个功能，并且服务器端必须赞成跨域，若是可以知足上面的条件，则代码的写法与不跨域的请求彻底同样。除了IE八、IE9不支持，其余主流浏览器都支持。

   xhr.open(Method, URL);