Ajax(一)：XHR的用法

AJAX
能夠向服務器請求額外的數據而無須卸載頁面，會帶來更好的用戶體驗。

1、在使用xhr對象時，要調用都第一個方法就是open(),它接收3個參數：要發送的請求的類型(get,post等)、請求的url和表示
是否異步發送請求的布爾值。

xhr.open('get', 'example.php', false);

調用open()方法並不會真正發送請求，而只是啟動一個請求以備發送，要發送特定的請求，必須像下面這樣調用send()方法：

xhr.open('get', 'example.txt', false);
xhr.send(null);

＊：只能向同一個域中使用相同端口和協議的url發送請求，如果url與啟動請求的頁面有任何差別，都會引發安全錯誤

 

2、調用send()之后，請求就會分派到服務器。等到服務器響應之后再繼續執行。在收到響應后，響應到數據會自動填充xhr對象到屬性，
相關的屬性簡介如下：

responseText:作為響應主體被返回的文本。
responseXML:如果響應的內容類型是'text/xml'或'application/xml'，這個屬性中將保存包含着響應數據的xml dom文檔
status:響應的http狀態
statusText:http狀態的說明。

通過檢測status來決定下一步的操作，不要依賴statusText，因為后者的跨瀏覽器使用時不太可靠

 

3、多數情況下，我們還是要發送異步請求，才能讓js繼續執行而不必等待響應。此時，可以檢測xhr對象的readyState屬性，該屬性
表示請求/響應過程的當前活動階段。

0:未初始化。尚未調用open()方法
1:啟動。已經調用open()方法，但尚未調用send()方法。
2:發送。已經調用了send()方法，但未接收到響應。
3:接收。已經接收到部分響應數據
4:完成。已經接收到全部響應數據，而且已經可以在客戶端使用了。

只要readyState屬性的值由一個值變成另一個值，都會觸發一次readystatechange事件。利用這個事件來檢測每次狀態變化后的state的值。通常我們只對readyState為4的階段感興趣，因為此時所有數據都已經就緒。
不過，必須在調用open()之前指定onreadystatechange事件處理程序才能確保跨瀏覽器兼容性。

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
        return new XMLHttpRequest(); 
    }else if(typeof ActiveXObject !="undefined"){
        if(typeof arguments.callee.activeXString !="string"){
            var versions =    ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
            var i,len;
            for (i=0,len=versions.length;i<len;i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                   break;
                }catch(ex){}
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("No XHR object available");
    }
}

var xhr = createXHR(); 
xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4){ 
        if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){ 
            alert(xhr.responseText); 
　　　　　}else{ 
            alert("Request was unsuccessful : " + xhr.status); 
        } 
    } 
}

//讀取example文本 
xhr.open("get","example.txt",true); 
xhr.send(null);

    

 

另外，在接收到響應之前還可以調用abort()方法來取消異步請求

xhr.abort()