繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > document.onreadystatechange事件的用法分析
- Javascript
- 颜色变换 像字符逐字输入的欢迎词
- CSS 伪类实现的鼠标滑动图片链接
- 百度用到的Js日历 大家可以看看
- CSS 渐变背景的6个演示代码
- Jquery 弹出层插件实现代码
- Javascript 模式实例 观察者模式
- [原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
- javascript window对象属性整理
- JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
- WEB页子窗口(showModalDialog和showModelessDialog)使用说明
- 用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
- 理解 JavaScript 预解析
- 理解JavaScript变量作用域更轻松
- JavaScript的变量作用域深入理解
- javascript写的一个链表实现代码
- Js 打字效果 逐一出现的文字
- javascript 走马灯效果的链接提示
- CSS 动态链接提示
- JavaScript 事件的一些重要说明
- JavaScript 三种不同位置代码的写法
Javascript 中的 document.onreadystatechange事件的用法分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 305 ::
收藏到网摘: n/a
document.onreadystatechange事件的用法分析 这两天，正在给部门的一个项目做优化，其中一项是将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运行。以此类推。
浏览器因为不能真正地像面向对象那么编程，所以找了个折衷的办法，但是这个办法看起来不伦不类，想了半天，再跟一个同学一起讨论，才得出这样的一个结果。
评论 (0) All
