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(动态网站静态化)的核心部分有一个真正简单明了的理解。

(0)

相关推荐

  • 原生Javascript封装的一个AJAX函数分享

    最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ

  • JavaScript实现Ajax总结

    ajax应用非常普及,ajax的优点大家都知道,具体就不多说了,其缺点还真不少,比如破坏浏览器的back功能,同一个url打开的界面并不是完全相同,还有安全性能等方面,至于有这么多的缺点,也阻止不了大家使用ajax的步伐~~~ 这里以表单为例说一下实现Ajax的步骤: 1.先从表单中获取我们需要的数据 2.然后建立相应的URL 3.设置onreadystatechange函数 4.打开连接 5.发送请求 以上就是Ajax的实现步骤,接下来简单分步总结下. 首先是关于xrh对象的建立. funct

  • JavaScript调用ajax获取文本文件内容实现代码

    这几年JQuery写多了,传统的的javascript已经很久不写了,不少东西都忘掉了,还有多少人记得javascript中实现ajax操作需要借助XMLHttpRequest对象,其实jquery的ajax本质也是这个,好了,今天就花点时间演示一下如何用传统javascript获取文本内容并展示在页面上,废话不多少,直接上代码,注释写的很详细,大家应该能看懂: 复制代码 代码如下: <script type="text/javascript"> //(A)①获取文本文件方

  • Javascript Ajax异步读取RSS文档具体实现

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Ajax 技术可以经由超文本传输协议(Http) 向一个服务器发出请求并且在等待该响应时继续处理另外的数据.通过 Ajax 技术可以很容易实现读取远程 XML文件,因此,可以使用 Ajax技术实现远程访问依据 RSS 标准生成的摘要信息,甚至我们可以自己写一个 RSS 阅读器. Ajax 并不是一门新的语

  • javascript结合ajax读取txt文件内容

    代码很简洁,这里就不多废话了,直接上源码 html代码 复制代码 代码如下: <!doctype html>  <html>   <head>       <meta charset="utf-8"/>       </head>       <body>           <button type="button"  onclick="show()">请求数据

  • JavaScript AJAX之惰性载入函数

    在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR.我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了.在JS中就算只有一个if也总比没有if的语句效率要高. 普通Ajax方法 复制代码 代码如下: /**  * JS惰性函数  */   function ajax(){     if(typeof XMLHttpRequest != "undefined"){      

  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容

    本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件ajax_info.txt文件的内容 <!DOCTYPE html> <html> <head> <title>sharejs.com</title> <script> function loadXMLDoc() { var xmlhttp;

  • 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 ha

  • javascript创建对象的几种模式介绍

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

  • Java线程的五种状态介绍

    目录 1. 线程的5种状态 2. Java线程的6种状态 3. Java线程状态的转换 1. 线程的5种状态 从操作系统层面上,任何线程一般都具有五种状态,即创建.就绪.运行.阻塞.终止. (1) 新建状态(NEW) 在程序中用构造方法创建一个新线程时,如new Thread(),该线程就是创建状态,此时它已经有了相应的内存空间和其它资源,但是还没有开始执行. (2) 就绪状态(READ) 新建线程对象后,调用该线程的start()方法就可以启动线程.当线程启动时,线程就进入就绪状态(runna

  • javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法. 实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: 复制代码 代码如下: var xmlHttp; function cre

  • 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 res

  • jQuery中ajax的4种常用请求方式介绍

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下. 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml"). 实例: 保存数据到服务器,成功时显示信息. $.aj

  • 动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们

  • 原生javascript AJAX 三级联动的实现代码

    js 三级联动的实现代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生ajax</title> </head> <body> <select name="sel1"> <option value=""

  • Struts 2中实现Ajax的三种方式

    Ajax本质上和普通的HTTP请求是一样的,只不过普通的HTTP请求是给人看的,而Ajax请求是给JS代码去用的. 所以Ajax请求的页面一般比普通的HTTP请求的响应内容还要简单,可能是一个页面的一部分,也可能是xml.json等结构化的数据,还可能是一个简单的字符串. 所以,在Struts 2中使用Ajax,Action一般就不会调用一个jsp视图来显示了(如果Ajax请求内容是页面的一部分也可能调用jsp视图),而是通过一些其他的方式. 下面介绍了三种方法,用于Action实现Ajax请求

  • JavaScript中的useRef 和 useState介绍

    目录 1.useState hook 2.useRef hook 3.useRef 与 useState 4.何时使用 Refs 和 States 1.useState hook useState 是一个内置的 React hook,它允许您将信息作为状态存储在变量中.它允许您将 React 状态添加到功能组件.在下面的示例中,useState()声明状态变量,而值存储在计数变量中.setCount是用于更新此值的函数. //从 react 导入 useState import React, {

随机推荐