JavaScript之AjAX

標籤：字串   timer   http   color   根據   timeout   func   接受   abort   

一：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