談談對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);