Ajax(Asynchronous Javascript + XML)技術的核心是XMLHttpRequest對象
,即: XHR
。雖然名字中包含XML,但它所指的僅僅是這種無須刷新頁面即可從服務器端獲取數據的技術,其通信與數據格式無關,並不一定是XML數據。
XMLHttpRequest對象
IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的XHR對象。我們可以直接使用XMLHttpRequest
構造函數來創建XHR對象。
var xhr = new XMLHttpRequest();
雖然,IE7之前版本的瀏覽器中,創建xhr的方法與此有所不同,但是,前端技術發展到今天,已經很少有業務需求是要支持IE7之前的版本了。因此,這裏我略過這一情況。
XHR的用法
使用 XHR對象的時候,要調用的第一個方法是open()
,它接受3個參數:
要發送請求的類型,如: get/post
請求的url
是否異步發送請求,這個參數是一個布爾值
xhr.open('get', 'example.php', false)
注意:open()方法的調用並不會真正發送請求,僅僅是啓動一個請求以備發送!
另外,只能向同一個域中使用相同端口和協議的URL發送請求,否則,會出現錯誤。
在執行open()
方法之後,必須再調用send()
方法,纔會真正發起ajax請求。
xhr.open('get', 'example.txt', false);xhr.send(null);
send()方法接收一個參數,即:要作爲請求主體發送的數據。如果不需要發送數據,那麼必須傳入null
,因爲該參數對於部分瀏覽器而言是必需的。
本例中的請求是同步的,Javascript代碼會等到服務器響應之後再執行。
收到響應後,響應的數據會自動填充XHR對象的屬性,相關的屬性有:
responseText: 作爲響應主體被返回的文本。
responseXML: 如果響應的內容類型是"text/xml"或者"application/xml",那麼這個屬性中將保存着包含響應數據的XML DOM文檔。
status: 響應的HTTP狀態
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-comet-javascript-chapter21-note1.html