对onreadystatechange属性的理解

发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态,XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。
onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如:

ajaxObj=createAjaxObject(); 
var url="/MyTodoes/FetchText?id="+id;  
ajaxObj.open("Get",url,true);
ajaxObj.onreadyStateChange=changeTabCallBack;
ajaxObj.send(null);

onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。 readyState有五种可取值

0:尚未初始化,

1:正在加载,

2:加载完毕,

3:正在处理;

4:处理完毕。

一旦readyState属性的值变成了4,就可以从服务器返回的响应数据进行访问了。
通常在事件中判断readyState的值是在请求完毕时才做处理,如:

function changeTabCallBack(){
  if(ajaxObj.readyState==4){
     // 下一步验证
  }
}

Status存储了服务器端返回的Http请求响应代码,它表示请求的处理结果,常见响应代码的含义如右。
在Ajax开发中,最常用就是200这个响应码,代码如下:

function changeTabCallBack(){
  if(ajaxObj.readyState==4){
    if(ajaxObj.status==200){
       // 服务端返回了正确数据,开始响应处理
    }
  }
}

Http状态码 含义
200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误

在编写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运行。以此类推。

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

onreadystatechange -----设置为指向handlestatechange的函数的指针(比较难理解些)

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

代表了它的入口地址),因而可以用指针指向它,这个指针又称为函数指针

时间: 2024-08-29 15:59:23

对onreadystatechange属性的理解的相关文章

【转】对onreadystatechange属性的理解

发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态,XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如:ajaxObj=createAjaxObject(); var url="/MyTodoes/FetchText?id="+id;  ajaxObj.open(&quo

对WPF依赖项属性的理解

属性和事件是.NET抽象模型的核心部分, 而WPF中则用更高级的依赖项属性(Dependency Property)代替了原来.NET中的属性.依赖项属性主要应用于自定义元素中,用于为自定义元素注入自定义的属性. 以下是定义和注册依赖项属性的方法: //声明并注册依赖项属性 FoodProperty public static DependencyProperty FoodProperty =      DependencyProperty.Register("Food", typeo

iOS数据存储之属性列表理解

iOS数据存储之属性列表理解 数据存储简介 数据存储,即数据持久化,是指以何种方式保存应用程序的数据. 我的理解是,开发了一款应用之后,应用在内存中运行时会产生很多数据,这些数据在程序运行时和程序一起驻留在内存中,一旦程序运行结束从内存中退出后,这些数据也就相应消失了.等到再次运行程序的时候,之前的那些数据又要重新计算.但是对于一些应用,我们需要将程序产生的数据持久的保存起来,使得应用重启之后这些数据不会丢失,这时候就需要用到数据的持久化技术. 在iOS设备上实现数据持久化存储的方式有很多中机制

关于userInteractionEnabled的属性的理解

userInteractionEnabled A Boolean value that determines whether user events are ignored and removed from the event queue. 译:一个布尔值,它决定了是否用户触发的事件被该视图对象忽略和把该视图对象从事件响应队列中移除. @property(nonatomic, getter=isUserInteractionEnabled) BOOL userInteractionEnabled

《prototype属性的理解》

1.对象:对象是JS的基本数据类型(原始类型(数字.字符串和布尔值),对象类型).对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值. 2.三类JS对象和两类属性: 内置对象:是由ECMAScript规范定义的对象或类.例如,数组(Array).函数(Function).日期(Date)和正则表达式(RegExp)都是内置对象 宿主对象:由JS解释器所嵌入的宿主环境定义的.客户端JS中表示网页结构的HTMLElement对象均是宿主对象,既然宿主环境定义的方法可以

Python - 04182016 - 类与实例间属性的理解

Python是个很灵活的语言,光看它的类和实例间属性的访问机制就可以看出这一点,不过这一点还真的不好理解,做了些测试之后我的理解是这样的: 实例在访问类属性时,先检索自己的names, 如果有的话就直接取出,没有的话就去来的names里面找,找不到就是error啦 class Pclass(object): """docstring for Pclass""" num = 10 def __init__(self): super(Pclass,

CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法

页脚固定的底部的两种方式: 1.使用fixed属性值 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="height: 1500px;width: 100%;background-color: green;margin-bottom: 320px;"> 8 9 <

flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现他的弹性,所谓弹性也就是对空间的分配.成员设置中的flex属性,就是对于额外空间的管理. flex可以设置三个值,第一个值必选,后两个可选. flex的第一个值 可以用flex-grow单独设置,代表含义是对额外空间的占据量,所谓额外空间就是这一行多余的空间,有多余的空间这一属性才有用.默认值是0,

CSSs width属性 和offsetwidth属性深入理解

本人菜鸟一枚,趁着奥运期间,一边看奥运,一边学习,最近在慕课网学习前端技术,学习过程中有向很多前辈们博客学习,现在就来分享我的学习所得. 慕课网,导航条菜单的制作,使用javascript去制作伸缩菜单(水平方向上),下面是学习过程中的一个小插曲: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&quo