這篇文章主要介紹了ajax中XHR對象的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出海滄免費做網(wǎng)站回饋大家。

 創(chuàng)建

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

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

創(chuàng)建一個XHR對象，也叫實例化一個XHR對象，因為XMLHTTPRequest()是一個構(gòu)造函數(shù)。下面是創(chuàng)建XHR對象的兼容寫法

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

發(fā)送請求

open()

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

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

[注意]URL是相對于執(zhí)行代碼的當前頁面，且只能向同一個域中使用相同端口和協(xié)議的URL發(fā)送請求。如果URL與啟動請求的頁面有任何差別，都會引發(fā)安全錯誤

send()

send()方法接收一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)。調(diào)用send()方法后，請求被分派到服務(wù)器

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

接收響應(yīng)

在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會自動填充XHR對象的屬性，主要有以下4個屬性

responseText: 作為響應(yīng)主體被返回的文本

responseXML: 如果響應(yīng)的內(nèi)容類型是'text/xml'或'application/xml'，這個屬性中將保存著響應(yīng)數(shù)據(jù)的XML DOM文檔

status: 響應(yīng)的HTTP狀態(tài)

statusText: HTTP狀態(tài)的說明

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

無論內(nèi)容類型是什么，響應(yīng)主體的內(nèi)容都會保存到responseText屬性中，而對于非XML數(shù)據(jù)而言，responseXML屬性的值將為null

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

異步

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

0(UNSENT):未初始化。尚未調(diào)用open()方法

1(OPENED):啟動。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法

2(HEADERS_RECEIVED):發(fā)送。己經(jīng)調(diào)用send()方法，且接收到頭信息

3(LOADING):接收。已經(jīng)接收到部分響應(yīng)主體信息

4(DONE):完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了

只要readyState屬性值由一個值變成另一個值，都會觸發(fā)一次readystatechange事件?？梢岳眠@個事件來檢測每次狀態(tài)變化后readyState的值。通常，我們對readyState值為4的階段感興趣，因為這時所有數(shù)據(jù)都已就緒

[注意]必須在調(diào)用open()之前指定onreadystatechange 事件處理程序才能確?？鐬g覽器兼容性，否則將無法接收readyState屬性為0和1的情況

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

實例

下面以一個小實例來演示ajax中xhr對象的應(yīng)用

獲取信息