繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > document.onreadystatechange事件的用法分析
- Javascript
- JavaScript 基础问答一
- CSS JavaScript 实现菜单功能 改进版
- JavaScript 图片切割效果(放大镜)
- JavaScript 拖放效果代码
- 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
- 鼠标滑过 放大显示效果的列表
- JS 相册效果 自动播放[本地整合]
- 仿CSDN 右下角悬挂的浮动层效果
- 右下角广告(点击广告后出现关闭按钮可关闭)
- javascript this用法小结
- JavaScript 绘图代码
- JavaScript CSS菜单功能 改进版
- javascript jQuery插件练习
- jQuery 浮动广告实现代码
- jQuery 位置插件
- jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
- jquery 图片预加载 自动等比例缩放插件
- JavaScript 仿关机效果的图片层
- javascript 对表格的行和列都能加亮显示
- JavaScript Select和Option列表元素上下左右移动
Javascript 中的 document.onreadystatechange事件的用法分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 261 ::
收藏到网摘: 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
