Ajax readyState的五种状态

本文详细解释了Ajax中readyState的五种状态,从0(未初始化)到4(完成),涵盖了从调用send()方法到响应内容解析完成的全过程。通过状态描述,帮助开发者理解Ajax请求的各个阶段。

对于readyState的五种状态的描述或者说定义,很多Ajax书(英文原版)中大都语焉不详

在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍,感觉这个介绍很实在……

比较理想的解释方法应该以“状态:任务(目标)+过程+表现(或特征)”的表达模式来对这几个状态进行定义

【全文】

在《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 - (完成)响应内容解析完成,可以在客户端调用了


状态说明
 

(0)未初始化
 
此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
 

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

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

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

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

### readyState五种状态及对应含义 readyState 是 XMLHttpRequest 对象的一个属性,用于表示当前请求的处理状态。以下是 readyState五种状态及其具体含义: #### 1. 状态 0 - 未初始化 此阶段确认 XMLHttpRequest 对象是否创建,并为调用 `open()` 方法进行未初始化作好准备。值为 0 表示对象已经存在,否则浏览器会报错——对象不存在[^1]。 ```javascript const xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象后,readyState 为 0 ``` #### 2. 状态 1 - 载入 此阶段对 XMLHttpRequest 对象进行初始化,即调用 `open()` 方法,根据参数 `(method, url, true)` 完成对象状态的设置。并调用 `send()` 方法开始向服务端发送请求。值为 1 表示正在向服务端发送请求[^1]。 ```javascript xhr.open('GET', 'https://example.com/data', true); // readyState 变为 1 ``` #### 3. 状态 2 - 载入完成 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为 2 表示已经接收完全部响应数据,并为下一阶段对数据解析作好准备[^1]。 ```javascript xhr.send(); // 当请求被发送后,readyState 将变为 2 ``` #### 4. 状态 3 - 交互 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的 MIME 类型把数据转换成能通过 `responseBody`、`responseText` 或 `responseXML` 属性存取的格式,为在客户端调用作好准备。状态 3 表示正在解析数据[^1]。 ```javascript // 在某些情况下,可以在此阶段获取部分响应数据 if (xhr.readyState === 3) { console.log(xhr.responseText); // 可能只包含部分数据 } ``` #### 5. 状态 4 - 完成 此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为 4 表示数据解析完毕,可以通过 XMLHttpRequest 对象的相应属性取得数据[^1]。 ```javascript if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 获取完整的响应数据 } ``` ### 示例代码 以下是一个完整的 AJAX 请求示例,展示如何使用 `readyState` 和 `status` 来判断请求的状态和结果: ```javascript const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 请求成功时输出响应数据 } }; xhr.open('GET', 'https://example.com/data', true); xhr.send(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值