一、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(artist)[0].childnodes[0].nodevalue < td>" +
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);
理解readystatechange
2023-05-20
java方法整理笔记(java总结)
2022-11-08
python基础学习整理笔记,Python课堂笔记
2022-11-21
印象笔记记录java学习(Java成长笔记)
2022-11-12
java学习笔记(java初学笔记)
2022-11-14
java笔记,大学java笔记
2022-11-28
数据库的笔记mysql,数据库管理系统笔记
2022-11-24
java笔记,尚硅谷java笔记
2022-12-01
深入浅出理解onreadystatechange事件
2023-05-18
java客户端学习笔记(java开发笔记)
2022-11-14
重学java笔记,java笔记总结
2022-11-23
发篇java复习笔记(java课程笔记)
2022-11-09
怎么抽取网页整理,怎么抽取网页整理数据
2023-01-08
python课堂整理32(python笔记全)
2022-11-12
java包笔记,Java语言包
2022-11-18
python基础笔记整理(python基础教程总结)
2022-11-12
Mac笔记:在日常生活中高效实用的笔记工具
2023-05-18
java基础知识学习笔记一,Java基础笔记
2022-11-21
我的python笔记06(Python)
2022-11-14
最新python学习笔记3,python基础笔记
2022-11-17