JavaScript第二十一章 XMLHttpRequest 2級

FormData

FormData 爲序列化表單以及建立與表單格式相同的數據（用於經過 XHR 傳輸）提供 了便利。

用法以下:

var data = new FormData();
data.append("name", "Nicholas"); 
複製代碼

這個 append()方法接收兩個參數：鍵和值，分別對應表單字段的名字和字段中包含的值。 建立了 FormData 的實例後，能夠將它直接傳給 XHR 的 send()方法

即:

xhr.send(data);
複製代碼

超時設定

何時會用到超時呢？ 咱們假設一個場景，你很開心的對着接口，忽然網絡緣由變差了，你等待一個接口的數據響應足足等了20多秒

這時候超時這個概念就出來了

超時設定：若是在規定的時間內瀏覽器尚未接收到響應，那麼就會觸發 timeout 事 件，進而會調用 ontimeout 事件處理程序。

示例:

var xhr = createXHR();
xhr.onreadystatechange = function(){
     if (xhr.readyState == 4){
         try {
             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                 alert(xhr.responseText);
             } else {
                 alert("Request was unsuccessful: " + xhr.status);
             }
         } catch (ex){
         //假設由 ontimeout 事件處理程序處理
         }
     }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //將超時設置爲 1 秒鐘（僅適用於 IE8+）
xhr.ontimeout = function(){
 //超時以後觸發
 alert("Request did not return in a second.");
};
xhr.send(null); 
複製代碼

以上就是超時設定的用法

overrideMimeType()方法

做用：重寫 XHR 響應的 MIME 類型。支持 overrideMimeType()方法的瀏覽器有 Firefox、Safari 4+、Opera 10.5 和 Chrome。

進度事件

這個是重點！！！

進度事件常常用來檢測文件的上傳和下載進度

有如下 6 個進度事件：

• loadstart：在接收到響應數據的第一個字節時觸發。
• progress：在接收響應期間持續不斷地觸發。
• error：在請求發生錯誤時觸發。
• abort：在由於調用 abort()方法而終止鏈接時觸發。
• load：在接收到完整的響應數據時觸發。
• loadend：在通訊完成或者觸發 error、abort 或 load 事件後觸發。

每一個請求都從觸發 loadstart事件開始，接下來是一或多個progress事件，而後觸發error、abort 或 load 事件中的一個，最後以觸發 loadend 事件結束。

支持前 5 個事件的瀏覽器有 Firefox 3.5+、Safari 4+、Chrome、iOS 版 Safari 和 Android 版 WebKit。 Opera（從第 11 版開始）、IE 8+只支持 load 事件。目前尚未瀏覽器支持 loadend 事件。

load事件

當瀏覽器接收到服務器的響應時會觸發load事件

示例:

var xhr = createXHR();
xhr.onload = function(){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null); 
複製代碼

只要瀏覽器接收到服務器的響應，無論其狀態如何，都會觸發load事件。而這意味着你必需要檢查 status 屬性，才能肯定數據是否真的已經可用了。

progress事件

會在瀏覽器接收新數據期間週期性地觸發。而onprogress事件處理程序會接收到一個 event 對象，其 target屬性是XHR對象，但包含着三個額外的屬性：lengthComputable、position 和 totalSize。其中，lengthComputable是一個表示進度信息是否可用的布爾值，position 表示已經接收的字節數，totalSize 表示根據Content-Length 響應頭部肯定的預期字節數。有了這些信息，咱們就能夠爲用戶建立一個進度指示器 了。

示例:

var xhr = createXHR();
xhr.onload = function(event){
 if ((xhr.status >= 200 && xhr.status < 300) ||
 xhr.status == 304){
 alert(xhr.responseText);
 } else {
 alert("Request was unsuccessful: " + xhr.status);
 }
};
xhr.onprogress = function(event){
 var divStatus = document.getElementById("status");
 if (event.lengthComputable){
 divStatus.innerHTML = "Received " + event.position + " of " +
 event.totalSize +" bytes";
 }
};
xhr.open("get", "altevents.php", true);
xhr.send(null); 
複製代碼

爲確保正常執行，必須在調用 open()方法以前添加 onprogress 事件處理程序。

每次觸發 progress 事件，都會以新的狀態信息更新 HTML 元素的內容。若是響應頭部中包含 Content-Length 字段，那麼也能夠利用此信息來計算從響應中已經接收到的數據的百分比。