深入理解ajax系列第一篇

ajax是asynchronous javascript and XML的簡寫,中文翻譯是異步的javascript和XML,這一技術能夠向服務器請求額外的數據而無須卸載頁面,會帶來更好的用戶體驗。雖然名字中包含XML,但ajax通信與數據格式無關。

創建

ajax技術的核心是XMLHttpRequest對象(簡稱XHR),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屬性,以確定響應已經成功返回??梢詫TTP狀態碼為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 事件處理程序才能確??鐬g覽器兼容性,否則將無法接收readyState屬性為0和1的情況

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status == 200){

alert(xhr.responseText);

}

}

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容