XMLHttpRequest onreadystatechange事件

admin發表於2018-07-31
XMLHTTP事件

每次readyState屬性發生變化的時候就會觸發onreadystatechange事件。

readyState屬性的變化也就是XMLHttpRequest物件請求狀態的變化。

關於readyState屬性可以參閱XMLHttpRequest readyState屬性一章節。

更多關於XMLHttpRequest物件內容可以參閱ajax XMLHttpRequest物件一章節。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
XMLHttpRequest.onreadystatechange=functionObj

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadXMLDoc(){
  var xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("show").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","demo/ajax/txt/demo.txt",true);
  xmlhttp.send();
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div id="show"><h2>原來的內容</h2></div>
<button type="button" id="bt">檢視效果</button>
</body>
</html>

在上面的程式碼中，從頭到尾，onreadystatechange事件其實觸發了多次，只有當滿足xmlhttp.readyState==4 && xmlhttp.status==200的時候才會執行指定的程式碼，關於status屬性的用法可以參閱XMLHttpRequest status屬性一章節。

相關文章