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

ajax是asynchronous javascript and XML的簡寫，中文翻譯是異步的javascript和XML，這項技術能夠向伺服器請求額外的資料而無須卸載頁面，會帶來更好的使用者體驗，對ajax感興趣的朋友一起來看看深入理解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(&#39;request was unsuccessful:&#39; + 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>
<p id="result"></p>
<script>
btn.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
  xhr.send();
}
</script>

############//message.xml####### #####

<p>hello world</p>

##########

　　透過實例的示範發現，ajax前端本身的內容並不難。但是，由於ajax涉及一些後端及網絡的知識，使得學起來不是很容易。以後的部落格文章將逐步深入介紹ajax的重點內容

以上所述是小編給大家介紹的深入理解ajax系列第一篇之XHR對象，希望對大家有所幫助！

相關推薦：

詳解AJAX分頁效果的簡單實作

Ajax提交表單並接收json方法

實例講解Ajax實作簡單帶百分比進度條

#

以上是深入理解ajax系列第一篇之XHR對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！