繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > document.onreadystatechange事件的用法分析
- Javascript
- JavaScript 自动完成脚本整理(33个)
- 7个Javascript地图脚本整理
- JavaScript 事件记录使用说明
- Javascript remove 自定义数组删除方法
- fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
- Jquery Ajax.ashx 高效分页实现代码
- extjs 学习笔记 四 带分页的grid
- javascript void(0)的妙用
- 用Javascript 编写可以缓慢弹出收缩的层
- 再谈ie和firefox下的document.all属性
- JavaScript 常用函数库详解
- JS 截取字符串substr 和 substring方法的区别
- Domino中运用jQuery读取视图内容的方法
- Js+CSS 文字渐隐渐现显示
- Javascript 小写字母依次变为大写
- JavaScript 炫彩的文字
- javascript 洒脱飘动的文字
- JavaScript 平滑文字闪烁
- 仿打字特效的JS逐字出现的信息文字
- JavaScript数组应用 可依次读取的公告栏文字
Javascript 中的 document.onreadystatechange事件的用法分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 343 ::
收藏到网摘: 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
