理解readystatechange

一、readystatechange mdn

readystatechange事件是在文檔或XMLHttpRequest的readyState屬性改變時觸發。

XMLHttpRequest對象和文檔屬性有一個叫做readyState的屬性，表示讀取對象的狀態，其值從0到4不等，每個值表示一個狀態，分別是：

0: 請求未初始化
1: 伺服器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

在XMLHttpRequest對象接收到來自伺服器的響應後，還有一些事情要做。readystatechange事件在每次 readyState改變時被觸發，所以它被觸發了4次（0-4），而每次它都觸發了相同的事件處理函數。

二、readystatechange handler took

在readystatechange事件中，我們可以調用一個函數，也就是readystatechange的處理函數。本質上一個回調函數，無論什麼時候readyState屬性改變，都會觸發這個回調函數。

下面的代碼中，我們實現了一個解析XML的函數，使用onreadystatechange和XMLHttpRequest請求XML文件，一旦響應返回，我們調用XML解析函數（parseXML）處理響應的結果。在XML請求期間， onreadystatechange會周期性地被觸發。

function parseXML() {
  var xmlDoc = xmlhttp.responseXML;
  var table="ArtistTitle";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "";
  }
  document.getElementById("demo").innerHTML = table;
}

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    parseXML();
  }
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();

三、非同步載入數據

一些大型數據的載入可能會使Web應用程序變得緩慢或不響應，所以我們需要在後台非同步的載入這些數據，為此，可以使用readystatechange事件來實現非同步數據載入。當readystate屬性的狀態從”0″變成”4″時，就是請求完成並且非同步數據成功載入。

在下面的代碼示例中，我們非同步獲取JSON數據，一旦可用，就把數據列印到控制台中。

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("readystatechange", function() {
  if (this.readyState === 4) {
    console.log('Data Loaded Successfully');
    reqListener();
  } else {
    console.log('Loading Data');
  }
});

oReq.open("GET", "https://api.example.com/data.json");
oReq.send();

四、動態顯示數據

使用readystatechange事件還可以實現局部內容無刷新更新。例如，一個Web頁面可以定期地從伺服器下載消息或遊戲成績，顯示一個動態的分數面板。為了實現這些效果，我們可以用請求狀態值 3 來監視流信息， 4 來處理最終結果

var xhr = new XMLHttpRequest();

function show() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var target = document.getElementById("target-id");
    target.innerHTML = xhr.responseText;
  }
}

xhr.onreadystatechange = show;
xhr.open('GET', 'data.php', true);
xhr.send(null);

五、錯誤處理

readystatechange事件也可以用來處理錯誤。例如，在數據請求期間，如果發生了500錯誤，我們可以使用請求狀態值4來查看響應文本中的錯誤消息，並顯示給用戶。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      // Success! Do something with the response data
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }

};

xhr.open("get", "somefile.php", true);
xhr.send(null);