JavaScript之AjAX
一: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