ajax readyState的五种状态详解

在《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 Status Code
Status of the XMLHttpRequest Object
(0) UNINITIALIZED 未初始化
The object has been created but not initialized. (The open method has not been called.)
(XMLHttpRequest)对象已经创建,但尚未初始化(还没有调用open方法)。
(1) LOADING 载入
The object has been created, but the send method has not been called.
(XMLHttpRequest)对象已经创建,但尚未调用send方法。
(2) LOADED 载入完成
The send method has been called, but the status and headers are not yet available.
已经调用send方法,(HTTP响应)状态及头部还不可用。
(3) INTERACTIVE 交互
Some data has been received. Calling the responseBody and responseText properties at this state to obtain partial results will return an error, because status and response headers are not fully available.
已经接收部分数据。但若在此时调用responseBody和responseText属性获取部分结果将会产生错误,因为状态和响应头部还不完全可用。
(4) COMPLETED 完成
All the data has been received, and the complete data is available in the responseBody and responseText properties.
已经接收到了全部数据,并且在responseBody和responseText属性中可以提取到完整的数据。
根据以上几本书中的关于readyState五种状态的介绍,我认为还是《Pragmatic Ajax A Web 2.0 Primer 》比较到位,因为它提到了对接收到的数据的解析问题,其他书中都没有提到这一点,而这一点正是“(3)交互”阶段作为一个必要的转换过程存在于“(2)载入完成”到“(4)完成”之间的理由,也就是其任务是什么。归结起来,我觉得比较理想的解释方法应该以“状态:任务(目标)+过程+表现(或特征)”表达模式来对这几个状态进行定义比较准确,而且让人容易理解。
总结如下:
readyState 状态 状态说明
(0)未初始化
此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之,整个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);
}
结果如下:
正在初始化请求……成功!
正在发送请求……成功!
正在接收数据……完成!
正在解析数据……完成!
我们很容易明白XMLHttpRequest对象在各个阶段都在做什么。因此,也就很容易对Ajax的核心部分有一个真正简单明了的理解。
附:
Example 1
readyState 返回XMLHTTP请求的当前状态
语法 lValue = oXMLHttpRequest.readyState;
程序代码
var XmlHttp;
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
function send() {
XmlHttp.onreadystatechange = doHttpReadyStateChange;
XmlHttp.open("GET", "http://localhost/sample.xml", true);
XmlHttp.send();
}
function doHttpReadyStateChange() {
if (XmlHttp.readyState == 4) {
alert("Done");
}
}
备注 变量,此属性只读,状态用长度为4的整型表示.定义如下:
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
Example 2
下面这个范例说明如何在运行时以 VBScript 代码读取 RDS.DataControl 对象的 ReadyState 属性。ReadyState 为只读属性。
要测试该范例,请剪切该代码并粘贴到标准 HTML 文档的 <Body></Body> 标记之间,然后将其命名为“ADCapi9.asp”,ASP 脚本将标识服务器。
程序代码
<Center>
<H2>RDS API Code Examples </H2>
<HR>
<H3> RDS.DataControl ReadyState property</H3>
</Center>
<!-- 在运行时设置参数的 RDS.DataControl -->
<OBJECT classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
ID=ADC>
<PARAM NAME="SQL" VALUE="Select * from Employee for browse">
<PARAM NAME="SERVER" VALUE="http://<%=Request.ServerVariables("SERVER_NAME")%>">
<PARAM NAME="CONNECT" VALUE="dsn=ADCDemo;UID=ADCDemo;PWD=ADCDemo;">
<PARAM NAME="ExecuteOptions" VALUE="adcExecAsync">
<PARAM NAME="FetchOptions" VALUE="adcFetchAsync">
</OBJECT>
<Script Language="VBScript">
Sub Window_OnLoad
Select Case ADC1.ReadyState
case 2: MsgBox "Executing Query"
case 3: MsgBox "Fetching records in background"
case 4: MsgBox "All records fetched"
End Select
End Sub
</Script>

(0)

相关推荐

  • C#/.Net 中快速批量给SQLite数据库插入测试数据

    使用transaction: var stopwatch = new Stopwatch(); using (var cmd = new SQLiteCommand(db_con)) using (var transaction = db_con.BeginTransaction()) { stopwatch.Reset(); stopwatch.Start(); foreach (var item in sorted) { sql = string.Format("insert into db

  • 在ASP.NET 2.0中操作数据之六十二:GridView批量更新数据

    导言: 在前面的教程,我们对数据访问层进行扩展以支持数据库事务.数据库事务确保一系列的操作要么都成功,要么都失败.本文我们将注意力转到创建一个批更新数据界面. 在本文,我们将创建一个GridView控件,里面的每一行记录都可以进行编辑(见图1),因此我们没有必要多添加一列来包含Edit, Update,和Cancel按钮,而是在页面包含2个"Update Products"按钮,被点击时,遍历所有的产品并对数据库进行更新.让我们开始吧. 图1:GridView控件里的每一行记录都可以编

  • javascript学习笔记(七)Ajax和Http状态码

    Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡. AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com':或者使用服务器代理,代理XMLHttpRequest文件 AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据

  • 在ASP.NET 2.0中操作数据之六十四:GridView批量添加数据

    导言: 在前面的第62章<GridView批量更新数据>里,我们用GridView控件里定制了一个批编辑界面,同样的我们也可以定制一个批添加界面.假设有这种情况,我们接受一批从Tokyo(东京)发过来的货物:6种不同的tea 和 coffee,如果用户在一个DetailsView控件里一次输入一个产品,他将会重复的输入很多相同的值,比如相同的种类(Beverages),相同的供应商(Tokyo Traders),相同的discontinued值(False),以及相同的order值(0).重复

  • Asp.Net使用Bulk实现批量插入数据

    本文实例讲述了Asp.Net使用Bulk实现批量插入数据的方法,分享给大家供大家参考之用.具体方法如下: 主要功能代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Diagnostics; using System.Data; using System.Data.SqlClient; using System.Configuration;

  • 在ASP.NET 2.0中操作数据之三十七:DataList批量更新

    导言 在前面我们学习了如何创建item级的DataList.和可编辑的GridView一样,每个DataList里的item都包含一个Edit button,当点击时,item会变的可编辑.item级的编辑在偶尔需要更新时没什么问题,但是在有些情况下用户需要编辑大量的记录.如果一个用户需要编辑许多记录,他会被迫去不停的去点击Edit,作出修改,然后点击Update,这些大量的点击会妨碍他的工作效率.在这样的情况下,一个好的选择是提供一个完全可编辑的DataList,它的所有的item都处于编辑模

  • C#.NET中如何批量插入大量数据到数据库中

    在WEB项目开发过程中有时会碰到批量插入数据到数或者是将EXCEL文件据入到数据库中.为了方便实现可以先将EXCEL导入到GRIDVIEW中然后一次批量插入.实现代码如下: 前台代码 <asp:GridView ID="dgBom" runat="server" AutoGenerateColumns="false" CellPadding="1" CellSpacing="2"> <He

  • asp.net新闻列表生成静态页之批量和单页生成

    大家都知道,生成静态页的方法有两种,第一种是使用C#在后台硬编码,第二种是读取模板文件,使用字符串代替.总体来讲第一种方法代码量比较大,维护起来有点困难.生成静态页的目的是为了提高用户体验度,加快访问速度. 使用静态页面还有如下好处: 1. 安全:使用静态页面,用户访问的使没有任何操作功能的html页面,可以说从安全性方面大大提高了程序及服务器的安全. 2. 快速:用户访问的是提前生成好的静态页面,使用户对页面的请求瓶颈只受IO的限制而不会有其他方面的影响. 3. 降低服务器,数据库负载:因为用

  • asp.net线程批量导入数据时通过ajax获取执行状态

    前言 最近因为工作中遇到一个需求,需要做了一个批量导入功能,但长时间运行没个反馈状态,很容易让人看了心急,产生各种臆想!为了解决心里障碍,写了这么个功能. 通过线程执行导入,并把正在执行的状态存入session,既共享执行状态,通过ajax调用session里的执行状态,从而实现反馈导入状态的功能! 上代码: 前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

  • AJAX(XMLHttpRequest.status)状态码

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持. timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async

随机推荐