1. 程式人生 > >JavaScript之AjAX

JavaScript之AjAX

out null quest 1.5 gin -s com 技術 參考

一:AJAX一詞的實際意義為“不發生頁面跳轉,異步載入內容並改寫頁面內容的技術”,異步處理的優點是不會讓用戶白白等待

1.1 XMLHttpRequest:如果要通過javascript動態的向服務器發送請求,則需要使用XMLHttpRequest對象,基本的處理流程如下,在創建了XMLHttpRequest對象之後,就需要對服務器的url進行指定,以發送請求

 1 var xhr = new XMLHttpRequest();
 2 xhr.onreadystatechange = function(){
 3     if(xhr.readState ==4){
 4           if
(xhr.status == 200){ 5 alert(xhr.responseText); 6 } 7 } 8 }; 9 xhr.open(‘GET‘,‘http://example.com/something‘); 10 xhr.setRequestHeader(‘If-Modiified-Since‘,‘Thu 01 Jun 1970 00:00;00 GMT‘); 11 xhr.send(null);

1.1.1 readyState的含義:0:open()尚未被調用,1:send()尚未被調用, 2:服務器尚未返回響應 3:正在接受來自服務器的響應 4:完成了對來自服務器的響應接受

1.1.2 status中包含了響應的狀態碼,如果通信正常結束,該值為200.關於http響應的其他狀態碼請參考其他書籍

1.1.3 在responseText中包含了服務器響應的字符串形式。而對於XML的情況,響應會以DOM對象的形式包含於responseXML之中。根據情況選擇合適的響應類型即可。不過無論響應的形式如何,在responseText中都會含有相應的值,所以只要使用responseText的值就不會有什麽問題

1.1.4 傳遞給open()的參數是HTTP請求類型及通信目標服務器的URL,其實它還可以再接受第三個參數,如果第三個參數為false,這時XMLHttpResponse則會執行同步通信

1.1.5 setRequestHeader用於請求頭部設置

1.1.6 實際向服務器發送請求的是send(),如果是post請求類型,則會將參數發送給服務器,如果是GET或HEAD請求等不需要發送數據的請求,則參數為null

1.2 超時處理:在同步通信時,通信過程很費時,則會在send()處等待,所以最好設置合適的超時時間,如果超時則取消改操作,進行下一步或則再次請求

 1 var xhr = new XMLHttpRequest();
 2 var timerId = window.setTimeout(funtion(){
 3        xhr.abort();
 4 },500);//五秒後將會超時
 5 xhr.onreadystatechange = funtion(){
 6       if(request.readyState===4){
 7          //取消超時處理
 8           window.clearTimeout(timeId);
 9       }
10 };

1.3 跨域通信:

JavaScript之AjAX