对 onreadystatechange 属性的理解

在编写 Ajax 方法的时候，我们经常会写上类似于这样的代码：
Ajax 代码：

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)}}
}

第一次阅读这段代码的时候，我就感到了一点点不对劲，但是说不出来什么地方不对劲。随着对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 运行。以此类推。

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

onreadystatechange：设置为指向 handlestatechange的函数的指针（比较难理解些）

函数是具有执行特定功能的子程序，编译后，它的执行代码分配在代码段，而其参数及变量则在堆栈段，因而主程序调用函数时，实际上就是将程序执行地址转移为函数在代码段的入口地址去执行，即每个函数都有一个在代码段的确定入口地址，依此程序执行，当遇到返回指令时（表示该程序结束），程序便返回到该函数调用者的断点程序处，又继续执行，既然函数有确定的入口地址（实际上函数名就代表了它的入口地址），因而可以用指针指向它，这个指针又称为函数指针。

转载地址：https://www.runoob.com/w3cnote/onreadystatechange-attribute-learn.html

对 onreadystatechange 属性的理解相关推荐

对onreadystatechange属性的理解
在编写Ajax方法的时候,我们经常会写上类似于这样的代码: <script type="text/javascript"> var xmlHttp; //创建一个Xml ...
对对onreadystatechange属性的理解
http://blog.chinaunix.net/uid-20730110-id-1883890.html 在编写Ajax方法的时候,我们经常会写上类似于这样的代码: <script type ...
关于onreadystatechange属性（转）
关于onreadystatechange属性(转) 在编写Ajax方法的时候,我们经常会写上类似于这样的代码: Javascript代码 <script type="text/java ...
[html] 说说你对HTML5中pattern属性的理解
[html] 说说你对HTML5中pattern属性的理解好像是判断input在输入时按下tab键跳转到下一个input的优先级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
[html] 说说你对属性data-的理解
[html] 说说你对属性data-的理解 data- 属性是H5新增的自定义属性,也可以用来存储值.我个人用的不多,这个data- 属性倒是和vue中的v-bind 功能相似, 自定义属性,绑定数据 ...
[html] 谈谈你对input元素中readonly和disabled属性的理解
[html] 谈谈你对input元素中readonly和disabled属性的理解相同点:都会使文本框变成只读,不可编辑.不同点:1.disabled属性在将input文本框变成只读不可编辑的同时, ...
[css] 说说你对css的will-change属性的理解，它有什么作用呢？
[css] 说说你对css的will-change属性的理解,它有什么作用呢? 告诉浏览器,这个元素的某些属性可能会频繁变动触发回流,要求浏览器给予资源进行优化,一般浏览器会给这个元素单独生成一个图层 ...
[css] 举例说说你对white-space属性的理解
[css] 举例说说你对white-space属性的理解值说明 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. ...
BOM部分属性及理解
BOM部分属性及理解 BOM称之为浏览器对象模型.里面主要是我们和浏览器进行交互的方法. 是由IE3.0和Netscape Navigator3.0(网景)提供的一种新的特性,主要是用来通过JS这门脚 ...

对 onreadystatechange 属性的理解

对 onreadystatechange 属性的理解相关推荐

最新文章

热门文章