javascript ajax的5种状态介绍_基础知识

在《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 (未初始化): (xml(标准化越来越近了)HttpRequest)对象已经创建,但还没有调用open()方法。
1 (载入):已经调用open() 方法,但尚未发送请求。
2 (载入完成): 请求已经发送完成。
3 (交互):可以接收到部分响应数据。
4 (完成):已经接收到了全部数据,并且连接已经关闭。

在《Understanding ajax(动态网站静态化): Using JavaScript to Create Rich Internet Applications》中,则用下表进行了说明:

readyState Status Code
Status of the xml(标准化越来越近了)HttpRequest Object
(0) UNINITIALIZED
未初始化 The object has been created but not initialized. (The open method has not been called.)
(xml(标准化越来越近了)HttpRequest)对象已经创建,但尚未初始化(还没有调用open方法)。
(1) LOADING
载入 The object has been created, but the send method has not been called.
(xml(标准化越来越近了)HttpRequest)对象已经创建,但尚未调用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)未初始化
此阶段确认xml(标准化越来越近了)HttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。

(1)载入
此阶段对xml(标准化越来越近了)HttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responsexml(标准化越来越近了)属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。

(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过xml(标准化越来越近了)HttpRequest对象的相应属性取得数据。

概而括之,整个xml(标准化越来越近了)HttpRequest对象的生命周期应该包含如下阶段:
创建-初始化请求-发送请求-接收数据-解析数据-完成

在具体应用中,明确了readyState的五个状态(xml(标准化越来越近了)HttpRequest对象的生命周期各个阶段)的含义,就可以消除对ajax(动态网站静态化)核心的神秘感(语焉不详的背后要么是故弄玄虚,制造神秘感;要么就是“以其昏昏,使人昭昭”),迅速把握其实质,对减少学习中的挫折感和增强自信心都极其有益。

比如,通过如下示例:

复制代码 代码如下:

//声明数组
var states = [“正在初始化……”,
“正在初始化请求……成功!
正在发送请求……”,
“成功!
正在接收数据……”,
“完成!
正在解析数据……”,
“完成!
”];

//回调函数内部代码片段
if (xml(标准化越来越近了)Http.readyState==4)
{
var span = document.createElement(“span”);
span.innerHTML = states[xml(标准化越来越近了)Http.readyState];
document.body.appendChild(span);

if (xml(标准化越来越近了)Http.status == 200)
{
var xml(标准化越来越近了)doc = xml(标准化越来越近了)Http.responsexml(标准化越来越近了);
//其他代码
}

//别忘记销毁,防止内存泄漏
xml(标准化越来越近了)Http = null;
}else{
var span = document.createElement(“span”);
span.innerHTML = states[xml(标准化越来越近了)Http.readyState];
document.body.appendChild(span);
}结果如下:

正在初始化请求……成功!
正在发送请求……成功!
正在接收数据……完成!
正在解析数据……完成!

我们很容易明白xml(标准化越来越近了)HttpRequest对象在各个阶段都在做什么。因此,也就很容易对ajax(动态网站静态化)的核心部分有一个真正简单明了的理解。

时间: 2024-11-03 22:15:39

javascript ajax的5种状态介绍_基础知识的相关文章

javascript创建对象的几种模式介绍_基础知识

在js中有几种模式可以创建对象,通过对象操作所包含的属性与方法. 一般来说,构造函数名称的第一个字母为大写字母,非构造函数名称的第一个字母为小写字母,当然,构造函数与一般函数唯一的区别只是调用的方式不同而已,所以任何函数只要通过new来调用,那它就可以作为构造函数,若不通过new来调用,则与一般函数一样. 谈谈我对这几种模式的理解: 工厂模式:创建一个一般函数,在函数里创建一个Object对象,为这个对象增添属性与方法,同时赋予其值,最后返回对象.无法识别对象类型. 构造函数模式:创建构造函数,

谈谈JavaScript中的几种借用方法_基础知识

前言 通过call().apply()和bind()方法,我们可轻易地借用其它对象的方法,而无须从这些对象中继承它. 在JavaScript中借用方法 在JavaScript中,有时可以重用其它对象的函数或方法,而不一定非得是对象本身或原型上定义的.通过 call().apply() 和 bind() 方法,我们可轻易地借用其它对象的方法,而无须继承这些对象.这是专业 JavaScript 开发者常用的手段. 原型方法 在 JavaScript 中,除了不可更改的原始数据类型,如 string.

javascript 进阶篇3 Ajax 、JSON、 Prototype介绍_基础知识

Ajax 这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下. Ajax技术的创新之处在于,改善了传统的"请求-等待-响应-刷新-返回数据"模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新.这样大大的提高了交互性. Ajax其实并不是一个技术,而是由许多技术组成的.最大的特色之一就是可以异步传输,实现多线程服务. Ajax的异步传输,依靠的是js中的XMLHttpRequst对象,于是我们从它入手. XMLHttpRequest是XMLHttp组建

Javascript动态引用CSS文件的2种方法介绍_基础知识

最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用

javascript模块化是什么及其优缺点介绍_基础知识

如今backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而来.CommonJS.AMD.NodeJS.RequireJS.SeaJS.curljs等模块化的JavaScript扑面而来.web前端已经演变成大前端,web前端的发展速度之快. 1)我们来看看什么是模块化? 模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口.模块间具有透明性.javascript中的模块在一些C.PHP.java中比较常见: c中使用inclu

javascript运行机制之this详细介绍_基础知识

this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况:1. 纯函数2. 对象方法调用3. 使用new调用构造函数4. 内部函数5. 使用call / apply 6.事件绑定 1. 纯函数 复制代码 代码如下: var name = 'this is window';  //定义window的name属性  f

JavaScript中OnLoad几种使用方法_基础知识

在前几个项目的开发中 遇到onload使用的几种情形 1. 可以在Body 里面执行 <body onload="alert(123)"></body>2. 先定义好 在页面加载完成后使用 复制代码 代码如下: <script type="text/javascript"> function test(){ var aa = "嘻嘻,你个大猪猪"; alert(aa); } window.onload = te

javascript中的location用法简单介绍_基础知识

先前写了一片用window.location.href实现刷新另个框架页面 ,特此我看了一下locaiton的详细用法,对此有点改进,现在我将他整理成js,方便查阅,也贴上和朋友们分享一下,具体如下: 第一.简单介绍一下location属性.用法以及相关示例: Location 包含了关于当前 URL 的信息. 描述 location 对象描述了与一个给定的 Window 对象关联的完整 URL.location 对象的每个属性都描述了 URL 的不同特性. 通常情况下,一个 URL 会有下面的

javascript nextSibling 与 getNextElement(node) 使用介绍_基础知识

1. nextSibing:下一个节点,节点类型可以是任何一种,其中就有文本节点. 2.得到下一个元素节点: 复制代码 代码如下: function getNextElement(node){ if(node.nodeType == 1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }