Ajax 两种请求方式的区别onload和onreadystatechange
2021-04-01 19:27
标签：文本 oop upload opera width 方法 adt let ogre Ajax 两种请求方式的区别onload和onreadystatechange 标签：文本 oop upload opera width 方法 adt let ogre 原文地址：https://www.cnblogs.com/ygunoil/p/12565543.html一. onreadystatechange
1. XMLHttpRequest对象有一个属性readyState，将其(xhr.readyState)打印后发现。进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4。
>
>
2. readyState状态码和HTTP状态码
3. 可以利用网络请求码和readyState状态码进行判断
function loadText(){
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘,‘sample.txt‘,true);
console.log("READYSTATE"+ xhr.readyState);
xhr.onreadystatechange = function(){
console.log("READYSTATE"+ xhr.readyState);
if(this.status == 200 && this.readyState == 4){
console.log(this.responseText);
}else if(this.status == 404){
console.log("网页不存在");
}
}
xhr.send();
}
4. 如果此时将open中的路径改为一个错误路径，会产生如下效果
二. onload
1. 进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了。
function loadText(){
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘,‘sample.txt‘,true);
console.log("READYSTATE"+ xhr.readyState);
//两种请求方式onload和onreadystatechange
xhr.onload = function(){
console.log("READYSTATE"+ xhr.readyState);
console.log(this.responseText);
}
xhr.send();
}
2. 此时如果修改open中的路径为错误路径的话，会出现如下状况。仍然会打印1和4，证明已经进入onload请求状态。这里报错的原因是，HTTP状态码不是200。
3. 实现页面尚未加载完成使，加载页面的实现（eg：进度条或转圈）。可用onprogress方法，打印readyState出现状态3
function loadText(){
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘,‘sample.txt‘,true);
console.log("READYSTATE"+ xhr.readyState);
//两种请求方式onload和onreadystatechange
xhr.onprogress = function(){
console.log("测试加载状态READYSTATE"+ xhr.readyState);
}
xhr.onload = function(){
console.log("READYSTATE"+ xhr.readyState);
console.log(this.responseText);
}
xhr.send();
}
三. 将请求到的纯文本附在dom中
xhr.onload = function(){
document.getElementById(‘text‘).innerHTML = this.responseText;
}
作者：祝名
链接：https://www.jianshu.com/p/f914c9c8f4e7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章标题：Ajax 两种请求方式的区别onload和onreadystatechange
文章链接：http://soscw.com/index.php/essay/71067.html