Contents
  1. 1. 什么是ajax
  2. 2. XMLHttpRequest对象
  3. 3. 程序说明
  4. 4. readyState
  5. 5. 进度事件
  6. 6. 超时设定

关于ajax中XHR对象的使用,以后就写在这里,慢慢完善。

什么是ajax

ajax,是Asynchronous JavaScript + XML的简写,这种技术使得无需刷新页面即可从服务器取得数据,可以带来更好的用户体验。但是,ajax通信与数据格式无关,也就是说,通信数据不一定是XML。

XMLHttpRequest对象

一个完整的ajax请求过程如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 创建一个请求对象
var xhr = new XMLHttpRequest();
// 监听请求状态
// 监听函数必须在调用open()方法之前,能够确保跨浏览器兼容性
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
// 无论响应内容什么格式,都会保存到responseText中
// 如果响应数据不是XML,则responseXML为null
console.log(xhr.responseText);
} else {
console.log("Request was unsuccessful:" + xhr.readyState);
}
}
}
// 启动请求,以备发送
xhr.open('GET', 'test.txt', true);
// 发送请求,send()方法要接收一个参数作为发送数据
// 如果不需要发送数据,则必须传入null,因为这个参数对某些浏览器是必须的
xhr.send(null);

程序说明

open()方法接收三个参数:请求类型、请求的url、是否异步发送请求(true表示是)。

send()方法接收一个参数,即要作为请求主体发送的数据。如果不需要发送数据,则传入null,以保证浏览器兼容性。

客户端在收到响应后,响应数据会填充到XHR对象的属性中,比如:

1
2
3
resopnseText // 作为响应主体被返回的数据
responseXML // 如果响应数据为XML,则保存在此属性。否则,将为null
status // 响应的HTTP状态码

一般来说,HTTP返回的状态码为200,即status属性值为200时,表明响应已经成功返回。此外,状态码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本。

HTTP状态码由3位数字构成,其中首位数字定义了状态码的类型。关于HTTP状态码说明如下:

1
2
3
4
5
1XX // 信息类,表示收到浏览器请求,服务器正在进一步处理
2XX // 成功,表示用户请求被正确接收,理解和处理
3XX // 重定向,表示请求没有成功,客户必须采取进一步动作
4XX // 客户端错误,表示客户端提交信息有误。比如404 NOT Found表示请求的文件不存在
5XX // 服务器错误,表示服务器不能完成对请求的处理

readyState

我们发送的是异步请求,所以JavaScript可以继续执行而不必等待回应。

此时,可以检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性取值如下:

1
2
3
4
5
0 // 未初始化。尚未调用open()方法
1 // 已经启动。已经调用open()方法,但是未调用send()方法
2 // 已经发送。已经调用send()方法,但是还没收到响应
3 // 已经接收到部分响应数据
4 // 完成。已经接收到全部响应数据

只要readyState属性由一个值变成另外一个值,就会触发readystatechange事件。

我们可以通过以下代码来验证:

1
2
3
xhr.onreadystatechange = function () {
console.log(xhr.readyState);
}

进度事件

xhr对象还可以监听响应的进度,共有以下几个事件:

1
2
3
4
5
loadstart // 在接受到响应数据的第一个字节时触发
progress // 在接受响应期间持续不断地触发
error // 在请求发生错误时触发
abort // 因为调用abort()而终止连接时触发
load // 在接收到完整的响应数据时触发

超时设定

xhr对象的timeout属性,可以设置请求在等待响应多少毫秒之后就终止。

1
2
3
4
xhr.timeout = 1000;
xhr.ontimeout = function () {
console.log('timout...');
};
Contents
  1. 1. 什么是ajax
  2. 2. XMLHttpRequest对象
  3. 3. 程序说明
  4. 4. readyState
  5. 5. 进度事件
  6. 6. 超时设定