XMLHttpRequest readyState響應狀態

admin發表於2019-03-11
XMLHTTP

當ajax請求傳送到伺服器時，我們需要根據請求響應狀態來執行一定的操作。

readyState儲存有XMLHttpRequest物件的狀態資訊。

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

XMLHttpRequest物件主要屬性列表如下：

屬性描述
readyState存有XMLHttpRequest的狀態，返回值是從0到4。
（1）.0: 請求未初始化。
（2）.1: 伺服器連線已建立。
（3）.2: 請求已接收。
（4）.3: 請求處理中。
（5）.4: 請求已完成，且響應已就緒。
status（1）.200: "OK"。
（2）.404: 未找到頁面。

當readyState屬性值發生改變的時候就會觸發onreadystatechange事件。

然後將相應的處理程式碼放在onreadystatechange事件處理函式中。

程式碼例項如下：

[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/net/Async.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  loadXMLDoc();
  var odiv = document.getElementById("content");
  odiv.innerHTML = "由於是非同步操作，所以不會阻塞當前內容的顯示。";
}
</script> 
</head> 
<body> 
<div id="show"><img src="demo/ajax/net/img/wait.gif"></div> 
<div id="content"></div>
</body> 
</html>

當readyState發生變化的時候，就會觸發onreadystatechange事件，並且當readyState屬性值等於4和status屬性值等於200的時候，說明響應已經就緒，且沒有發生其他錯誤，那就執行指定的相關程式碼。

相關文章