document.onreadystatechange事件的用法分析
文章来源：365jz.com 点击数：315 更新时间：2017-08-15 18:58 参与评论
这两天，正在给部门的一个项目做优化，其中一项是将web应用中的所有alert用div方式实现，javascript的相关方法都写好了，方法名为showDialog，前台页面调用showDialog方法一点也没有问题，可是页面一旦提交，从后台输出脚本，调用showDialog方法，就会时不时的出现问题了，报一个无法打开Internet站点的错误，在脚本中下断点调试，依然找不到问题的根源，最后到网上一查，这个问题有可能是页面没有完全加载造成的，于是乎，修改后台输出脚本的代码，将其改为
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('来自网页的消息','用户名或密码错误，请重新输入！','warning'); } };
问题解决，一切OK!
说明 ：onreadystatechange 事件能辨识readyState 属性的改变。
关于onreadystatechange属性的一点疑问
在编写Ajax方法的时候，我们经常会写上类似于这样的代码：
第一次阅读这段代码的时候，我就感到了一点点不对劲，但是说不出来什么地方不对劲。随着对Ajax代码的进一步了解，这种感觉时刻伴随着我。
后来，我知道了这种感觉来自于什么地方。
看看startRequest函数。我们发现xmlHttp.onreadystatechange指向了一个函数，这个函数是在xmlHttpRequest.readyState发生改变的时候触发。我们再来看startRequest函数，想象一下整个请求发送的步骤。现在我们点击一个按钮，触发了一个startRequest函数。函数往下走，第一步是createXmlHttpRequest()，它的作用是创建一个xmlHttpRequest对象，当它完毕的时候，xmlHttpRequest.readyState的值是0(window.alert跟踪得到的)，程序继续往下走，xmlHttp.onreadystatechange = handlestatechange，因为状态没有改变(xmlHttpRequest.readyState的值是0)，所以不触发函数，紧接着是Open()和Send()，那么，整个函数从头到尾都应该没有触发handlestatechange函数啊，但是为什么出来的结果是正确的呢？
后来我用window.alert跟踪xmlHttp.readystate的变化，发现于原来它运行的机制是这样的。首先创建一个xmlHttpRequest的对象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange没有运行。紧接着是open()，这个函数发生了之后xmlHttp.readyState的值是1了，那么就会有一个断点在Open()函数处断开，保留现场，紧接着又返回到xmlHttp.onreadystatechange = handlestatechange运行，然后再执行Send()函数，这个函数发生了之后xmlHttp.readyState的值是2了，接着又返回到xmlHttp.onreadystatechange = handlestatechange运行。以此类推。
浏览器因为不能真正地像面向对象那么编程，所以找了个折衷的办法，但是这个办法看起来不伦不类，想了半天，再跟一个同学一起讨论，才得出这样的一个结果。
各浏览器对link标签onload/onreadystatechange事件支持的差异分析，需要的朋友可以参考下。
1，onload事件
IE6/7/8/9中弹出了两次，其它浏览器均没有弹。说明只有IE支持link元素的onreadystatechange事件。弹出两次分别是readyState为loading，complete状态。可使用readyState来判断载入情况。我们再使用JS动态创建link元素试试，
IE6/7/8/9中仍然弹出了2次。Firefox/Safari/Chrome仍然没弹。貌似一切正常，但神奇的是这次在Opera中弹出了一次，说明Opera支持动态创建link元素时的onreadystatechange事件。
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('来自网页的消息','用户名或密码错误，请重新输入！','warning'); } };
问题解决，一切OK!
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething()
{
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入
//你要做的操作。
}
}
说明 ：onreadystatechange 事件能辨识readyState 属性的改变。
关于onreadystatechange属性的一点疑问
在编写Ajax方法的时候，我们经常会写上类似于这样的代码：
<script type="text/javascript">
var xmlHttp;
//创建一个XmlHttpRequeset对象
function createXMLHttpRequest()...{
if(window.ActiveXObject)...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)...{
xmlHttp = new XMLHttpRequest();
}
}
//开始一个请求
function startRequest()...{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handlestatechange;
xmlHttp.open("GET", "SimpleRespose.xml", true);
xmlHttp.Send(null);
}
function handlestatechange()...{
if(xmlHttp.readyState == 4)...{//描述一种"已加载"状态；此时，响应已经被完全接收。
if(xmlHttp.status == 200)...{//200表示成功收到
alert("The Server Replied with:" + xmlHttp.responseText)
}
}
}
</script>
第一次阅读这段代码的时候，我就感到了一点点不对劲，但是说不出来什么地方不对劲。随着对Ajax代码的进一步了解，这种感觉时刻伴随着我。
后来，我知道了这种感觉来自于什么地方。
看看startRequest函数。我们发现xmlHttp.onreadystatechange指向了一个函数，这个函数是在xmlHttpRequest.readyState发生改变的时候触发。我们再来看startRequest函数，想象一下整个请求发送的步骤。现在我们点击一个按钮，触发了一个startRequest函数。函数往下走，第一步是createXmlHttpRequest()，它的作用是创建一个xmlHttpRequest对象，当它完毕的时候，xmlHttpRequest.readyState的值是0(window.alert跟踪得到的)，程序继续往下走，xmlHttp.onreadystatechange = handlestatechange，因为状态没有改变(xmlHttpRequest.readyState的值是0)，所以不触发函数，紧接着是Open()和Send()，那么，整个函数从头到尾都应该没有触发handlestatechange函数啊，但是为什么出来的结果是正确的呢？
后来我用window.alert跟踪xmlHttp.readystate的变化，发现于原来它运行的机制是这样的。首先创建一个xmlHttpRequest的对象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange没有运行。紧接着是open()，这个函数发生了之后xmlHttp.readyState的值是1了，那么就会有一个断点在Open()函数处断开，保留现场，紧接着又返回到xmlHttp.onreadystatechange = handlestatechange运行，然后再执行Send()函数，这个函数发生了之后xmlHttp.readyState的值是2了，接着又返回到xmlHttp.onreadystatechange = handlestatechange运行。以此类推。
浏览器因为不能真正地像面向对象那么编程，所以找了个折衷的办法，但是这个办法看起来不伦不类，想了半天，再跟一个同学一起讨论，才得出这样的一个结果。
各浏览器对link标签onload/onreadystatechange事件支持的差异分析，需要的朋友可以参考下。
1，onload事件
<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onload="alert(this)"/> </HEAD> <BODY> </BODY> </HTML>
IE6/7 :
IE8/9 :
Opera :
即IE6/7/8/9/Opera都支持onload事件， Firefox/Safari/Chrome不支持。
注：用JS创建link标签再添加到head中，情况如上。
2，onreadystatechange事件
<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onreadystatechange</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onreadystatechange="alert(this)"/> </HEAD> <BODY> </BODY> </HTML>
IE6/7/8/9中弹出了两次，其它浏览器均没有弹。说明只有IE支持link元素的onreadystatechange事件。弹出两次分别是readyState为loading，complete状态。可使用readyState来判断载入情况。我们再使用JS动态创建link元素试试，
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>Link Element onreadystatechange</title>
</HEAD>
<BODY>
<script>
function createEl(type, attrs){
var el = document.createElement(type),
attr;
for(attr in attrs){
if(attrs.hasOwnProperty(attr)){
el.setAttribute(attr, attrs[attr]);
}
}
return el;
}
var link = createEl('link', {
href : 'http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css',
rel : 'stylesheet',
type : 'text/css'
});
link.onreadystatechange = function(){
alert(this)
}
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</BODY>
</HTML>
IE6/7/8/9中仍然弹出了2次。Firefox/Safari/Chrome仍然没弹。貌似一切正常，但神奇的是这次在Opera中弹出了一次，说明Opera支持动态创建link元素时的onreadystatechange事件。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
