您的位置:

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