ajax实现的核心是XMLHttpRequest对象,该对象有个事件onreadystatechange,每次状态改变都会触发,通过监听该事件触发时的状态可以判断异步请求到了哪一步。
XMLHttpRequest对象的属性:
- readyState: 请求状态,开始请求时值为0,直到请求完成时,这个值增长到4
- responseText: 目前为止接收到的响应体,readyState < 3时,此属性为空字符串,=3时为当前响应体,=4时则为完整响应体
- responseXML: 服务端响应,解析为xml并作为document对象返回
- status: 服务器端返回的状态码,200表示成功,404表示Not Found
- statusText: 用名称表示的服务器端返回状态,200为OK, 404为Not Found
XMLHttpRequest对象的方法:
- setRequestHeader(): 向一个打开但是未发送的请求设置头信息
- open(): 初始化请求参数,但不发送
- send(): 发送http请求
- abort(): 取消当前请求
- getAllResponseHeaders(): 把http响应头作为未解析的字符串返回
- getResponseHeaders(): 返回http响应头的值
readyState的值包括:
- 0(未初始化),XMLHttpRequest对象已创建,但还没有调用open()方法
- 1(载入),已调用open()方法,但是请求还未发送
- 2(载入完成),请求已经发送完成
- 3(交互),已经接收到部分响应数据
- 4(完成),已经接收到全部数据,并且连接已关闭
使用ajax发送数据有5个步骤
第一步: 创建异步请求对象
第二步: 设置请求行(请求方式、请求url)
第三步: 设置请求头
第四步: 设置请求体
第五步: 设置响应状态变化监听函数
代码:
// 第一步
var xhr = new XMLHttpRequest();
// 第二步
xhr.open('post', 'validate.php');
// 第三步
// get请求不需要设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 第四步
xhr.send('name=' + value + '&age=12');
// 第五步
// 成功的响应有两个条件
// 1. 服务器成功响应了;
// 2. 异步对象的状态为4
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4) {
console.log(xhr.responseText);
}
}
网友评论