javascript ajax的5种状态介绍


Posted in Javascript onAugust 18, 2014

在《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(动态网站静态化)的核心部分有一个真正简单明了的理解。
Javascript 相关文章推荐
常用的javascript function代码
May 23 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 #Javascript
js判断浏览器是否支持html5
Aug 17 #Javascript
一段非常简单的js判断浏览器的内核
Aug 17 #Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 #Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 #Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 #Javascript
Node.js中的事件驱动编程详解
Aug 16 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php常用图片处理类
2016/03/16 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Python线程threading模块用法详解
2020/02/26 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Keras自定义IOU方式
2020/06/10 Python
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
历史专业个人求职信范文
2013/12/07 职场文书
实习公司领导推荐函
2014/05/21 职场文书
教育见习报告范文
2014/11/03 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
第一军规观后感
2015/06/12 职场文书