您现在的位置: 365建站网 > 365学习 > document.onreadystatechange事件的用法分析

document.onreadystatechange事件的用法分析

文章来源:365jz.com     点击数:202    更新时间:2017-08-15 18:58   参与评论
这两天,正在给部门的一个项目做优化,其中一项是将web应用中的所有alert用div方式实现,JavaScript的相关方法都写好了,方法名为showDialog,前台页面调用showDialog方法一点也没有问题,可是页面一旦提交,从后台输出脚本,调用showDialog方法,就会时不时的出现问题了,报一个无法打开Internet站点的错误,在脚本中下断点调试,依然找不到问题的根源,最后到网上一查,这个问题有可能是页面没有完全加载造成的,于是乎,修改后台输出脚本的代码,将其改为
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事件。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

您可能感兴趣的文章:


发表评论 (202人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------