Ajax與Comet-JavaScript高級程序設計第21章讀書筆記(1)

Ajax(Asynchronous Javascript + XML)技術的核心是XMLHttpRequest對象,即: XHR。雖然名字中包含XML,但它所指的僅僅是這種無須刷新頁面便可從服務器端獲取數據的技術,其通訊與數據格式無關,並不必定是XML數據。javascript

XMLHttpRequest對象

IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的XHR對象。咱們能夠直接使用XMLHttpRequest構造函數來建立XHR對象。php

var xhr = new XMLHttpRequest();html

雖然,IE7以前版本的瀏覽器中,建立xhr的方法與此有所不一樣,可是,前端技術發展到今天,已經不多有業務需求是要支持IE7以前的版本了。所以,這裏我略過這一狀況。前端

XHR的用法

使用 XHR對象的時候,要調用的第一個方法是open(),它接受3個參數:java

  1. 要發送請求的類型,如: get/postajax

  2. 請求的url瀏覽器

  3. 是否異步發送請求,這個參數是一個布爾值緩存

xhr.open('get', 'example.php', false)服務器

注意:open()方法的調用並不會真正發送請求,僅僅是啓動一個請求以備發送!app

另外,只能向同一個域中使用相同端口和協議的URL發送請求,不然,會出現錯誤。

在執行open()方法以後,必須再調用send()方法,纔會真正發起ajax請求。

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

send()方法接收一個參數,即:要做爲請求主體發送的數據。若是不須要發送數據,那麼必須傳入null,由於該參數對於部分瀏覽器而言是必需的。

本例中的請求是同步的,Javascript代碼會等到服務器響應以後再執行。
收到響應後,響應的數據會自動填充XHR對象的屬性,相關的屬性有:

  1. responseText: 做爲響應主體被返回的文本。

  2. responseXML: 若是響應的內容類型是"text/xml"或者"application/xml",那麼這個屬性中將保存着包含響應數據的XML DOM文檔。

  3. status: 響應的HTTP狀態

  4. statusText: HTTP狀態的說明

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

收到響應後,通常來講,會先判斷 status 是否爲200,這是這次請求成功的標誌。此時,responseText屬性的內容已經就緒,並且在內容類型正確的狀況下,responseXML也可以訪問了。
另外,狀態碼status若是是304,那麼表示請求的資源沒有被修改,能夠直接使用瀏覽器中的緩存,固然,這樣的響應也是有效的。

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

有的瀏覽器會錯誤地報告 204 的狀態代碼。IE中 XHR 的ActiveX版本會將204設置爲1223,而IE中原生的 XHR 則會將 204 規範化爲 200。Opera會在取得204時報告 status的值爲0。

參考文章:http://www.4455q.com/ajax-com...

相關文章
相關標籤/搜索