[AJAX系列]onreadystatechange事件

標籤：

onreadystatechange事件：

當請求被發送到伺服器時，我們需要執行一些基於響應的任務

每當readyState改變時，就會觸發onreadystatechange事件

readyState屬性存有XMLHttpRequest的狀態資訊

XMLHttpRequest對象的三個重要的屬性：

屬性	描述
onreadystatechange	儲存函數（函數名）每次readystate改變時就會調用該函數
readyState	存有XMLHttpRequest的狀態從0到4發生變化 0：請求未初始化 1：伺服器串連已建立 2：請求已接收 3：請求處理中 4：請求已完成，且響應已就緒
status	200:"ok" 404:請求未找到

在onreadystatechange事件中，我們規定當伺服器響應已做好被處理的準備時執行的任務

當readyState等於4且狀態為200時，表示響應已就緒

1 xmlhttp.onreadystatechange=function()2   {3   if (xmlhttp.readyState==4 && xmlhttp.status==200)4     {5     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;6     }7   }

onreadystatechange事件被觸發5次，對應著readyState的每個變化

使用回呼函數：

回呼函數是一種以參數的形式傳遞給另一個函數的函數

如果頁面存在多個AJAX任務，就應該為建立XMLHttpRequest對象編寫一個標準的函數，並為每個AJAX任務調用該函數

該函數應該包含URL以及發生onreadystatechange事件執行時的任務

 1 <script> 2 var xmlhttp; 3 function loadXMLDoc(url,cfunc) 4 { 5 if (window.XMLHttpRequest) 6   {// IE7+, Firefox, Chrome, Opera, Safari 代碼 7   xmlhttp=new XMLHttpRequest(); 8   } 9 else10   {// IE6, IE5 代碼11   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");12   }13 xmlhttp.onreadystatechange=cfunc;14 xmlhttp.open("GET",url,true);15 xmlhttp.send();16 }17 function myFunction()18 {19 loadXMLDoc("/try/ajax/ajax_info.txt",function()20   {21   if (xmlhttp.readyState==4 && xmlhttp.status==200)22     {23     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;24     }25   });26 }27 </script>

 

 

 

[AJAX系列]onreadystatechange事件