在XMLHttpRequest中,onload是否等于readyState==4?

我对xhr返回事件感到困惑,可以看出,onreadystatechange–>readyState==4和onload之间没有太大区别,是真的吗

var xhr=new XMLHttpRequest();
xhr.open(“Get”,url,false);
xhr.onreadystatechange=函数(){
if(xhr.readyState==4)
{
/*做点什么*/
}
};
xhr.send(空);

xhr.onload=function(){/*做点什么*/}

这几乎总是正确的。然而,一个显著的区别是,onreadystatechange事件处理程序在通常触发onerror处理程序(通常是网络连接问题)的情况下,也会触发readyState==4。在这种情况下,它的状态为0。我已经在最新的Chrome、Firefox和IE上验证了这一点

因此,如果您使用的是onerror并且针对的是现代浏览器,那么您不应该使用onreadystatechange,而应该使用onload,这似乎保证只有在HTTP请求成功完成时(使用真实的响应和状态代码)才会调用。否则,在发生错误的情况下,您可能会触发两个事件处理程序(这就是我根据经验发现这个特殊情况的原因)

这里有一个指向我编写的Plunker测试程序的链接,该程序允许您测试不同的URL,并查看JavaScript应用程序在不同情况下看到的实际事件序列和readyState值。下面还列出了JS代码:

var xhr;
功能测试(url){
xhr=newXMLHttpRequest();
addEventListener(“readystatechange”,function(){log(xhr,“readystatechange”)};
xhr.addEventListener(“loadstart”,函数(ev){log(xhr,“loadstart”,ev.loaded+”of“+ev.total”);
xhr.addEventListener(“进度”,函数(ev){log(xhr,“进度”,ev.loaded+”of“+ev.total”);
addEventListener(“abort”,function(){log(xhr,“abort”)});
addEventListener(“error”,function(){log(xhr,“error”)};
addEventListener(“load”,function(){log(xhr,“load”)};
addEventListener(“timeout”,函数(ev){log(xhr,“timeout”,ev.loaded+”of“+ev.total”);
xhr.addEventListener(“loadend”,函数(ev){log(xhr,“loadend”,ev.loaded+”of“+ev.total”);
xhr.open(“GET”,url);
xhr.send();
}
函数clearLog(){
document.getElementById('log')。innerHTML='';
}
函数日志文本(msg){
document.getElementById('log').innerHTML+=msg+“<br/>”;
}
函数日志(xhr、evType、info){
var evInfo=evType;
如果(信息)
evInfo+=“-”+信息;
evInfo+=”-readyState:“+xhr.readyState+”,状态:“+xhr.status;
日志文本(evInfo);
}
已选择功能(收音机){
document.getElementById('url').value=radio.value;
}
函数testUrl(){
clearLog();
var url=document.getElementById('url')。值;
如果(!url)
logText(“请选择或键入URL”);
否则{
日志文本(“++测试URL:”+URL);
测试(url);
}
}
函数中止(){
xhr.abort();
}

发表评论