转载:http://hi.baidu.com/ooofcu/blog/item/1570d6079f1058c57a89472a.html
对于readyState的五种状态的描述或者说定义,很多Ajax书(英文原版)中大都语焉不详 在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍,感觉这个介绍很实在…… 比较理想的解释方法应该以“状态:任务(目标)+过程+表现(或特征)”的表达模式来对这几个状态进行定义 【全文】 在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍,感觉这个介绍很实在,摘译如下: 0: (Uninitialized) the send( ) method has not yet been invoked.1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire response received. 3: (Interactive) the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting. 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了 对 于readyState的这五种状态,其他书中大都语焉不详。像《Foundations of Ajax》中,只在书中的表2-2简单地列举了状态的“名称”--The state of the request. The five possible values are 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete。而《Ajax in Action》中好像根本就没有提到这5种状态的细节。《Professional Ajax》中虽不尽人意,但还是有可取之处: There are five possible values for readyState: 0 (Uninitialized): The object has been created but the open() method hasn't been called. 1 (Loading): The open() method has been called but the request hasn't been sent. 2 (Loaded): The request has been sent. 3 (Interactive). A partial response has been received. 4 (Complete): All data has been received and the connection has been closed. readyState有五种可能的值: 0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法。 1 (载入):已经调用open() 方法,但尚未发送请求。 2 (载入完成): 请求已经发送完成。 3 (交互):可以接收到部分响应数据。 4 (完成):已经接收到了全部数据,并且连接已经关闭。 在《Understanding AJAX: Using JavaScript to Create Rich Internet Applications》中,则用下表进行了说明:
根 据以上几本书中的关于readyState五种状态的介绍,我认为还是《Pragmatic Ajax A Web 2.0 Primer 》比较到位,因为它提到了对接收到的数据的解析问题,其他书中都没有提到这一点,而这一点正是“(3)交互”阶段作为一个必要的转换过程存在于“(2)载 入完成”到“(4)完成”之间的理由,也就是其任务是什么。归结起来,我觉得比较理想的解释方法应该以“状态:任务(目标)+过程+表现(或特征)”表达 模式来对这几个状态进行定义比较准确,而且让人容易理解。现试总结如下:
概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段: 创建-初始化请求-发送请求-接收数据-解析数据-完成 在 具体应用中,明确了readyState的五个状态(XMLHttpRequest对象的生命周期各个阶段)的含义,就可以消除对Ajax核心的神秘感 (语焉不详的背后要么是故弄玄虚,制造神秘感;要么就是“以其昏昏,使人昭昭”),迅速把握其实质,对减少学习中的挫折感和增强自信心都极其有益。 比如,通过如下示例: //声明数组 var states = ["正在初始化……", "正在初始化请求……成功!<br/>正在发送请求……", "成功!<br/>正在接收数据……", "完成!<br/>正在解析数据……", "完成!<br/>"]; //回调函数内部代码片段 if (xmlHttp.readyState==4) { var span =document.createElement("span"); span.innerHTML= states[xmlHttp.readyState]; document.body.appendChild(span); if (xmlHttp.status== 200) { var xmldoc =xmlHttp.responseXML; //其他代码 } //别忘记销毁,防止内存泄漏 xmlHttp =null; }else{ var span =document.createElement("span"); span.innerHTML= states[xmlHttp.readyState]; document.body.appendChild(span); } 结果如下: 正在初始化请求……成功! 正在发送请求……成功! 正在接收数据……完成! 正在解析数据……完成! |
另一个例子:
<script language="javascript">
var xmlhttp;
function PostOrder()
{
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlhttp.Open("GET","System_Select.aspx", true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 0)
{
ScoreBoard.innerHTML="(未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)"+"<br>"+ScoreBoard.innerHTML;
}
if (xmlhttp.readyState == 1)
{
ScoreBoard.innerHTML="(初始化) 对象已建立,尚未调用send方法 "+"<br>"+ScoreBoard.innerHTML;
}
if (xmlhttp.readyState == 2)
{
ScoreBoard.innerHTML="(发送数据) send方法已调用,但是当前的状态及http头未知"+"<br>"+ScoreBoard.innerHTML;
}
if (xmlhttp.readyState == 3)
{
ScoreBoard.innerHTML="(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误"+"<br>"+ScoreBoard.innerHTML;
}
if (xmlhttp.readyState == 4)
{
ScoreBoard.innerHTML="(完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据"+"<br>"+ScoreBoard.innerHTML;
}
}
xmlhttp.Send();
}
function SetCode()
{
PostOrder();
timer = window.setInterval("PostOrder()",3000);
}
SetCode();
</script>
-------------------------setTimeout与setInterval的区别
[setTimeout]
setTimeout(表达式,延时时间)
在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
用setTimeout实现的自动变化显示随机数的效果:
<html>
<head>
<script>
window.onload=sett;
function sett()
{
document.body.innerHTML=Math.random();
setTimeout("sett()",500);
}
</script>
</head>
<body>
</body>
</html>
[setInterval]
setInterval(表达式,交互时间)
则不一样,它从载入后,每隔指定的时间就执行一次表达式
用setInterval实现的自动变化显示随机数的效果:
<html>
<head>
<script>
function sett()
{
document.body.innerHTML=Math.random();
}
setInterval("sett();", 500);
</script>
</script>
</head>
<body>
</body>
</html>