理解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);