XMLHttpRequest

1、XMLHttpRequest對象

IE7+、標準瀏覽器可以使用原生的XMLHttpRequest對象， IE6須要使用IE本身實現的BOM對象 ActiveXObject建立XHR對象。

寫一段跨瀏覽器建立XHR對象的代碼：

function createXHR(){
    var objXMLHttp = null;
    if (window.XMLHttpRequest) {
        objXMLHttp = new XMLHttpRequest();
    } else {
        var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
        for (var n = 0; n < MSXML.length; n++) {
            try {
                objXMLHttp = new ActiveXObject(MSXML[n]);
                break;
            }catch (e) {
            }
        }
    }return objXMLHttp;
}

 

 

2、XHR的用法

（1）方法屬性

open方法

方法接受三個參數：

請求方法：get、post

請求URL

是否異步調用： true異步調用，false同步AJAX

若是是同步AJAX請務必設置超時時間避免瀏覽器長時間鎖死。可用定時器保證這一點兒，下文中會提到這一點。

 

onreadystatechange方法

每次readyState值變化時都會調用該事件處理程序，可在函數內部判斷readyState（等於4）、status（大於等於200小於300或者等於304）的值取xhr.responseText的值執行業務層代碼。

 

setRequestHeader方法

open以後send以前調用

 

send方法

方法接受一個參數

調用send方法可將數據做爲請求主體發送到服務端（一般當請求方法爲get時該參數傳null），若是不須要提交數據請 務必傳參數null， 在某些瀏覽器下該參數是必須的。

 

getResponseHeader方法

獲取指定的響應頭

 

getAllResponseHeader方法

返回整個響應頭部字符串，注意會換行，須要本身解析字符串。

 

abort

在接收到響應以前能夠調用該方法取消異步請求，注意，調用該方法以後，不容許再訪問與響應有關的對象屬性

 

（2）值屬性

responseText：

響應主體文本

responseXML：

當響應頭部content-type爲application/xml或者text/xml時該值不爲空

status：

響應的http狀態碼，IE瀏覽器經過ActiveX建立的XHR對象會將204狀態碼設置爲1223

statusText：

狀態碼的短說明

readyState：

0 初始狀態

1 調用open

2 調用send，還未收到響應

3 接收部分數據

4 數據接收完畢，可在客戶端使用

 

（3）請求方法

get請求

經過url傳遞參數時務必對參數名與參數值進行 encodeURIComponent編碼

 

post請求

可用XHR來模擬表單請求，設置請求頭位application/x-www-form-urlencoded，再將數據拼裝成查詢字符串（&分割鍵值對）的形式經過send方法發送給服務端。

 

3、XMLHttpRequest 2級

（1）FormData

web應用中比較經常使用的功能爲表單數據的序列化(xhr模擬表單提交)，有了FormData世界將變得很美好，以下：

var data = new FormData(document.forms[0]);

xhr.send(data);

 

（2）超時設定

IE8爲XHR對象添加了一個timeout屬性，表示請求在等待響應多長時間以後就終止。在給timeout設定值以後，在規定時間內瀏覽器尚未接收到響應就會觸發ontimeout事件處理程序。

xhr.timeout = 1000; // 1秒以後沒有收到響應就執行ontimeout時間處理程序（ 僅適用於IE8+）

xhr.ontimeout = function(){alert('timeout!')};

xhr.send(null);

因爲timeout屬性僅適用於IE8+一般咱們會使用定時器來實現相應的功能，定時檢查xhr.status的狀態，設定時間內尚未變爲200則調用abort方法取消請求。應用場景：139郵箱的通信層

 

（3）進度事件

loadstart

progress

error

abort

load

loadend

IE8+只支持load事件，load事件在接收到完整的響應數據時觸發，可省掉對readyState值的判斷。

 

process事件

可在數據接收的過程當中重複觸發，可用來作進度指示器（文件下載）。

文件上傳也有process事件，只是該屬性爲 xhr.upload.onprogcess

onprogcess事件處理程序會接收到一個event對象，event對象的target屬性指向的是xhr對象，還有其餘三個頗有用的屬性：

lengthComputable,position,totalSize。其中，lengthComputable表示進度信息是否可用的布爾值，position表示已經接收的字節數，totalSize表示Content-Length響應頭肯定的預期字節數。