`

关于 "XMLHttpRequest 的 readyState" 几个你可能不知道的细节.

阅读更多
请大家原谅这个俗气的标题吧

如果这些你已经知道了 就算我火星好了
反正我早已经加入"火星常驻JE办事处"了.

==============================

XMLHttpRequest.onreadystatechange  按照定义 是
当 XMLHttpRequest 的 readyState 发生变化时 触发.

[ 注: readyState 在 XMLHttpRequest.open时即改变,
也就是说 onreadystatechange 最好在 open之前设置. ]


在 opera  safari chrome  IE7 FF3 中是这样.
但是 在 IE6 和 FF2中 却并不总是如此.

==============================

在 opera  safari chrome  IE7 FF3 中,
只有当 readyState 状态发生变化时 才会触发 onreadystatechange .
这里的"变化" 是指  readyState 有了新值而且这个新值和之前的值不一样.

所以 最后我附上的测试代码 在 opera  safari chrome IE7 FF3 中, 每种状态值只会alert一次.

但是 在IE6 和 FF2中 , readyState 只要被重新赋值 ,不管值和之前是否一样,都会触发 onreadystatechange 事件.

xhr.open 之后 readyState==1 
xhr.send 之初 readyState==1
....

在上述两个时刻  IE6 和 FF2中 都会触发 onreadystatechange 事件,
而 opera  safari chrome IE7 FF3  则只会在 open时触发一次 ,下次触发则已经是在 readyState !== 1 时.

关于此问题 网上也有人提及
http://blog.csdn.net/hulefei29/archive/2008/04/18/2305683.aspx
引用
XMLHttpRequest.readyState这个值在IE7和Firefox中都是0,1,2,3,4,
但是经测试,IE各个数都只返回一次,而在firfox中3的值返回多次,
由此可以判断,firfox对readyState值改变的判断的频率高于IE7;...

显然这个"判断的频率"的这个观点是不正确的.
浏览器是不会通过轮询来做检查的, 实现机制应该是在 类似setReadyState()方法里做的.

==============================

另外 在我测试的例子中 , FF2 会alert多次 readyState==3 ,而 IE6 只会alert 一次 readyState==3.
也就是说 在处理 XHR与服务端交互时IE6和FF2的策略 还有所不同.
不过 目前我尚未知晓 具体的不同在哪里.
欢迎有经验的朋友发表一下看法.

==============================

值得注意的是, 在FireFox 3 中XMLHttpRequest.send之后 (readyState==4)
XMLHttpRequest会自动重新初始化 也就是说 在FF3中 下列例子的alert顺序是
1 2 3 4 1
这个特性是目前其他浏览器不具备的.


==============================

还有一个小细节注意一下 :

xmlHttp.onreadystatechange=function(){
// alert(this)
// 注意 上面那句中的 this 不是 xmlHttp, 是window
}


===============================
正是因为 onreadystatechange 有诸多未统一的细节 和不确定性
所以 在ExtJS 中 根本就没有使用 onreadystatechange 来实现对 XMLHttpRequest的监听.
而是 自己通过 setTimeout 和 setInterval 来实现的 XMLHttpRequest状态跟踪.
我想 这也是一个无奈之举吧.


===============================


说了这么多 可能有点太学究了 太专研细节了
对于框架满天飞的今天 这种细节技术可能确实无关紧要.

大家就看个热闹好了 呵呵


==============================



我测试用的代码 很简陋 呵呵 见笑了
// 页面文件就是 testAjax.html , 所以我请求的是自己 .
function createXMLHttp(){
		if (window.XMLHttpRequest) {
			return(new XMLHttpRequest());
		}
		var arr_t = [
			'MSXML2.XMLHTTP.3.0',
			'MSXML2.XMLHTTP',
			'Microsoft.XMLHTTP'
        ]
		for(var i=0; i<arr_t.length; i++) {
			try {
				xmlhttp_ver = arr_t[i];
				return new ActiveXObject(arr_t[i]);
			}catch(e) {}
		}
		return null ;
}

var xmlHttp = createXMLHttp();
xmlHttp.onreadystatechange = function(){
	alert(xmlHttp.readyState);	
};
xmlHttp.open('post','testAjax.html',true);
xmlHttp.send()



17
7
分享到:
评论
12 楼 fins 2008-12-02  
谢谢你的回复
这个问题 我现在也越来越迷糊了
呵呵 等我再研究研究

不过 你说的那个原因是很有可能的哦.
11 楼 zuoshu 2008-12-02  
fins 写道

zuoshu 写道
兄弟,你说错啦“也就是说 onreadystatechange 最好在 open之前设置.” 这个在IE6下面如果这样的话,回调函数是设置不好的,设置之后不会被调用, onreadystatechange要在open之后设置。误人了...


确实 我秀逗了

我自己的代码都是 onread... 在open后面的

但是有个事情很奇怪 我这里也是IE6 根本不受这个影响哦
我的 onreadystatechange&nbsp; 写在open前面 也是可以的
IE6后来出了补丁吧



我说要在前面 主要是为了捕捉 open时的状态变化.
忽略了浏览器版本的问题.



不好意思,是我弄错了,我用
function getHTTPObject()
{
    var xmlhttp=false;
        try    {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} 
        catch (e) {
            try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} 
            catch (e) {xmlhttp = false;}
                 }if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
                    {xmlhttp = new XMLHttpRequest();
                 if (xmlhttp.overrideMimeType)
                    {xmlhttp.overrideMimeType('text/xml');}
                    }
    return xmlhttp;
}
来得到XMLHTTPObject,再这样做是不行的

function getHTTPObject(){  
         if (window.XMLHttpRequest) {  
             return(new XMLHttpRequest());  
         }  
         var arr_t = [ 
         	"MSXML2.XMLHTTP.5.0",
         	"MSXML2.XMLHTTP.4.0",
            "MSXML2.XMLHTTP.3.0",
            "MSXML2.XMLHTTP",
            "Microsoft.XMLHTTP"
         ];
         for(var i=0; i<arr_t.length; i++) {  
             try {  
                 xmlhttp_ver = arr_t[i];  
                 return new ActiveXObject(arr_t[i]);  
             }catch(e) {}  
         }  
         return null ;  
 } 
得到XMLHTTPObject再这样设置是可以的。问问是XMLHTTPObject的版本问题吧?~
10 楼 fins 2008-12-01  
zuoshu 写道

兄弟,你说错啦“也就是说 onreadystatechange 最好在 open之前设置.” 这个在IE6下面如果这样的话,回调函数是设置不好的,设置之后不会被调用, onreadystatechange要在open之后设置。误人了...


确实 我秀逗了

我自己的代码都是 onread... 在open后面的

但是有个事情很奇怪 我这里也是IE6 根本不受这个影响哦
我的 onreadystatechange  写在open前面 也是可以的
IE6后来出了补丁吧



我说要在前面 主要是为了捕捉 open时的状态变化.
忽略了浏览器版本的问题.

9 楼 zuoshu 2008-12-01  
兄弟,你说错啦“也就是说 onreadystatechange 最好在 open之前设置.”
这个在IE6下面如果这样的话,回调函数是设置不好的,设置之后不会被调用, onreadystatechange要在open之后设置。误人了...
8 楼 llp20_2000 2008-11-24  
mark,mark
7 楼 hax 2008-11-07  
fins 写道

hax 写道
所以要制定标准,一出还出了两个。http://www.w3.org/TR/XMLHttpRequesthttp://www.w3.org/TR/XMLHttpRequest2


  无语了


一步一步走是好的方法。

第一个标准用来得到一个最大公约数,也就是将事实标准扶正。
第二个标准用于在这个基础上的改进。

XMLHttpRequest其实是一个不怎么地的API,但是历史证明,推到重来是没可能的,所以只有这样啦。
6 楼 fins 2008-11-06  


hax 写道

所以要制定标准,一出还出了两个。http://www.w3.org/TR/XMLHttpRequesthttp://www.w3.org/TR/XMLHttpRequest2


  无语了
5 楼 hax 2008-11-06  
所以要制定标准,一出还出了两个。

http://www.w3.org/TR/XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest2
4 楼 taya 2008-11-05  
第一次知道这些细节,谢谢小胖
3 楼 juzhibest 2008-11-05  
楼主的阿里妈妈广告 呵呵怎么放这里了.

呵呵. .支持你的阿里妈妈
2 楼 javaDevil 2008-11-04  
早就知道了,IBM中国开发上一篇文章,是关于这方面的。
1 楼 天下有鹏 2008-11-04  
支持!

相关推荐

    XMLHttpRequest

    在提供的资源文件"XMLHttpRequest - MDC.htm"和"XMLHttpRequest - MDC.files"中,可能包含了Mozilla Developer Network(MDN)关于XMLHttpRequest的详细文档,包括API参考、示例代码和更深入的技术细节。MDN是一个...

    ajax请求一次却执行两次.zip

    一个完整的Ajax请求通常包括以下几个步骤: 1. 创建XMLHttpRequest对象,即XHR实例。 2. 配置请求参数,如URL、HTTP方法(GET、POST等)、是否异步等。 3. 发送请求,这通常通过调用`open()`和`send()`方法完成。 4...

    Ajax源代码集(ajax)

    在"Ajax源代码集(ajax)"这个资料中,我们可以期待深入学习关于Ajax的各个方面,包括但不限于以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的核心,用于在后台与服务器通信。你可以了解如何创建...

    Ajax Ajax本质 Ajax本质源码

    在Ajax的工作流程中,有以下几个关键组成部分: 1. **XMLHttpRequest对象**:这是Ajax的基础,它允许JavaScript在后台与服务器进行通信。通过创建XMLHttpRequest对象,然后利用其open()方法设置请求类型(GET或POST...

    Html viewer转ajax 应用简单说明

    将HTML Viewer转换为基于Ajax的应用,主要涉及到以下几个步骤: 1. **理解ArcIMSparam.js**: ArcIMSparam.js是ESRI ArcIMS服务的一个组件,用于处理与服务器通信的相关参数。在转换过程中,你需要打开这个文件,...

    Ajax实例演示Ajax实例演示

    在实际应用中,一个简单的Ajax实例可能涉及以下几个步骤: 1. 创建XMLHttpRequest对象:在JavaScript中,大部分现代浏览器都内置了XMLHttpRequest对象,我们可以通过`new XMLHttpRequest()`来创建。 ```javascript ...

    JavaScript封装Ajax

    **JavaScript封装Ajax**通常涉及到以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的基础,几乎所有的浏览器都内置了XMLHttpRequest对象,用于与服务器进行通信。首先,我们需要创建一个...

    AJAX之搜索

    在实际应用中,AJAX搜索的实现可能包括以下几个步骤: 1. 监听用户输入:使用JavaScript监听搜索框的事件,如`input`或`keyup`,当用户输入关键词时触发相关操作。 2. 创建XMLHttpRequest对象:创建一个新的...

    ajax例子ajax例子

    在Ajax的例子中,通常会涉及到以下几个关键步骤: 1. **创建XMLHttpRequest对象**:在JavaScript代码中,首先需要创建一个XMLHttpRequest对象,这是Ajax的基础。虽然名称中含有XML,但实际上它不仅可以处理XML,还...

    ajax实战中文版.rar

    这个压缩包中的"ajax实战中文版.pdf"提供了关于Ajax技术的详细学习资料,对于想要深入理解Web开发的人来说,是一份非常宝贵的学习资源。 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与...

    Ajax基础实例讲解

    在Ajax的基础实例中,通常包括以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,它是浏览器提供的一个内置对象,用于在后台与服务器通信。在JavaScript中,我们可以通过`new XMLHttpRequest()`...

    Ajax 中的高级请求和响应

    在深入探讨Ajax的高级请求和响应之前,我们需要先理解几个核心概念,包括HTTP状态代码、就绪状态以及XMLHttpRequest对象。 **HTTP状态代码**是服务器向客户端返回的一种状态信息,它反映了服务器处理请求的结果。...

    AJAX开发简略PPT和相关AJAX开发例子代码下载.

    在AJAX开发中,以下几个关键知识点至关重要: 1. **异步通信**:AJAX的核心是XMLHttpRequest对象,它允许JavaScript向服务器发送异步请求。这意味着用户可以在等待响应的同时继续与网页交互,提高了用户体验。 2. ...

    XMLHTTP参考(HTML格式)

    4. **事件处理**:XMLHTTP对象有几个关键的事件,如`onreadystatechange`,当请求状态改变时触发。状态码4表示完成,200表示成功。通常会检查`readyState`和`status`来确定何时处理响应。 5. **获取响应**:通过`...

    .net的Ajax 简单登陆源代码

    通常,这样的系统会包含以下几个关键组成部分: 1. 登录表单:包含用户名和密码输入框,以及登录按钮。这些元素通过HTML和CSS定义样式,而JavaScript负责处理用户交互。 2. JavaScript事件处理:当用户点击登录...

    AJAX深入浅出

    在描述中提到的文件《ASP.NET AJAX深入浅出系列课程(6):客户端访问WebService(下):原理与细节.pdf》可能详细介绍了如何使用AJAX技术访问Web Service。Web Service是一种提供跨平台数据交换的接口,AJAX可以通过...

    基于ASP的简便无刷新 ASP 文件上传系统.zip

    一个基于ASP的文件上传系统通常包括以下几个关键组件: 1. **前端界面**:使用HTML和CSS构建用户交互界面,包含文件选择输入控件和提交按钮。通过JavaScript监听按钮事件,触发AJAX请求。 2. **服务器端脚本**:...

    很实用的ajax例子

    在"ajax_day1"的学习中,你可能会接触到以下几个基本概念和步骤: 1. 创建XMLHttpRequest对象:这是所有Ajax操作的基础,大部分现代浏览器都内置了这个对象。你可以通过`new XMLHttpRequest()`来创建一个新的实例。...

    Ajax 最重要的文档

    尽管没有具体的文档内容,我们可以假设它们涵盖了以下几个关键知识点: 1. **Ajax的基本概念**: - 异步通信:Ajax的核心特性,允许页面在不重新加载整个页面的情况下与服务器进行交互。 - JavaScript:Ajax的...

    ajax原理及用法

    Ajax 的工作原理可以简单概括为以下几个步骤: 1. **创建 XMLHttpRequest 对象**:这是 Ajax 技术的基础,用于创建一个客户端与服务器之间的连接。 - 在现代浏览器中,可以通过 `new XMLHttpRequest()` 创建对象。...

Global site tag (gtag.js) - Google Analytics