深入理解ajax系列第一篇——XHR對象

目錄

前面的話

　　ajax是asynchronous javascript and XML的簡寫，中文翻譯是非同步的javascript和XML，這一技術能夠向伺服器請求額外的數據而無須卸載頁面，會帶來更好的用戶體驗。雖然名字中包含XML，但ajax通信與數據格式無關。下麵將詳細介紹ajax的內容

創建

　　ajax技術的核心是XMLHttpRequest對象(簡稱XHR)，這是由微軟首先引入的一個特性，其他瀏覽器提供商後來都提供了相同的實現。XHR為向伺服器發送請求和解析伺服器響應提供了流暢的介面，能夠以非同步方式從伺服器取得更多信息，意味著用戶單擊後，可以不必刷新頁面也能取得新數據

　　IE5是第一款引入XHR對象的瀏覽器。在IE5中，XHR對象是通過MSXML庫中的一個ActiveX對象實現的，而IE7+及其他標準瀏覽器都支持原生的XHR對象

　　創建一個XHR對象，也叫實例化一個XHR對象，因為XMLHTTPRequest()是一個構造函數。下麵是創建XHR對象的相容寫法

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

發送請求

open()

　　在使用XHR對象時，要調用的第一個方法是open()，它接受3個參數：要發送的請求的類型 ("get"、"post"等)、請求的URL和表示是否非同步發送請求的布爾值

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

　　[註意]URL是相對於執行代碼的當前頁面，且只能向同一個域中使用相同埠和協議的URL發送請求。如果URL與啟動請求的頁面有任何差別，都會引發安全錯誤

send()

　　send()方法接收一個參數，即要作為請求主體發送的數據。調用send()方法後，請求被分派到伺服器

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

接收響應

　　在收到響應後，響應的數據會自動填充XHR對象的屬性，主要有以下4個屬性

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

　　在接收到響應後，第一步是檢查status屬性，以確定響應已經成功返回。一般來說，可以將HTTP狀態碼為200作為成功的標誌。此時，responseText屬性的內容已經就緒，而且在內容類型正確的情況下，responseXML也可以訪問了。此外，狀態碼為304表示請求的資源並沒有被修改，可以直接使用瀏覽器中緩存的版本；當然，也意味著響應是有效的

　　無論內容類型是什麼，響應主體的內容都會保存到responseText屬性中，而對於非XML數據而言，responseXML屬性的值將為null

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
}else{
    alert('request was unsuccessful:' + xhr.status);
}

非同步

　　如果需要接收的是非同步響應，這就需要檢測XHR對象的readyState屬性，該屬性表示請求/響應過程的當前活動階段。這個屬性可取的值如下：

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

　　只要readyState屬性值由一個值變成另一個值，都會觸發一次readystatechange事件。可以利用這個事件來檢測每次狀態變化後readyState的值。通常，我們對readyState值為4的階段感興趣，因為這時所有數據都已就緒

　　[註意]必須在調用open()之前指定onreadystatechange 事件處理程式才能確保跨瀏覽器相容性，否則將無法接收readyState屬性為0和1的情況

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

實例

　　下麵以一個小實例來演示ajax中xhr對象的應用

<button id="btn">獲取信息</button>
<div id="result"></div>
<script>
btn.onclick = function(){
    //創建xhr對象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //非同步接受響應
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //實際操作
                result.innerHTML += xhr.responseText;
            }
        }
    }
    //發送請求
    xhr.open('get','message.xml',true);
    xhr.send();
}
</script>    

//message.xml
<p>hello world</p>

最後

　　通過實例的演示發現，ajax前端本身的內容並不難。但是，由於ajax涉及到一些後端及網路的知識，使得學起來不是很容易。以後的博文將逐步深入地介紹ajax的重點內容