AJAX readyState的五种状态详解

本文详细解释了XMLHttpRequest对象的生命周期,从初始化到完成的五个关键阶段,并通过示例展示了如何跟踪和理解每个阶段的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(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的核心部分有一个真正简单明了的理解。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值