document.onreadystatechange事件的用法分析


Posted in Javascript onOctober 17, 2009

这两天,正在给部门的一个项目做优化,其中一项是将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运行。以此类推。

浏览器因为不能真正地像面向对象那么编程,所以找了个折衷的办法,但是这个办法看起来不伦不类,想了半天,再跟一个同学一起讨论,才得出这样的一个结果。

Javascript 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 #Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 #Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 #Javascript
JavaScript 定义function的三种方式小结
Oct 16 #Javascript
JavaScript 函数式编程的原理
Oct 16 #Javascript
实现JavaScript中继承的三种方式
Oct 16 #Javascript
显示js对象所有属性和方法的函数
Oct 16 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python中除法使用的注意事项
2014/08/21 Python
python排序方法实例分析
2015/04/30 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python常用特殊方法实例总结
2019/03/22 Python
python求绝对值的三种方法小结
2019/12/04 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
幼儿园父亲节活动方案
2014/03/11 职场文书
环保倡议书
2014/04/14 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
松材线虫病防治方案
2014/06/15 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
Python正则表达式中flags参数的实例详解
2022/04/01 Python