详解原生ajax过程

//创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//监听statechange事件
xhr.onreadystatechange = function() {
/**
 * XMLHttpRequest的readystate有五个状态
 * 0 还没有调用open方法
 * 1 已调用open方法，尚未调用send方法
 * 2 已调用send，但尚未接收到响应
 * 3 已接收到部分响应数据
 * 4 已经接收到到全部数据，而且可以在客户端使用
 */
if (xhr.readystate == 4) {
//状态码在200 到 300表示请求成功，状态码304表示资源没有被修改，可以直接使用缓存中的版本
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)) {
alert(xhr.responseText);
} else {
//发生错误打印状态码，
alert("Request was unsuccessful: " + xhr.status);
}
}
}
//打开请求以备发送
xhr.open('post', 'http://example.com', false);
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//序列化表单
var form = document.getElementById('test-form');
//发送请求
xhr.send(serialize(form));

步骤

• 创建XMLHttpRequest对象(这里需要兼容，IE7之前的是ActiveXObject对象)
• 设置回调函数
• open()
• 设置请求的头部
• send()
• 更新页面显示

注：设置请求头必须在open和send之间，而回调函数通常会在send之前。

注意

如果你监听的是load事件，那么你必须要检查status属性，才能确定数据是否真的可用。因为只要浏览器接收到服务器的响应，不管状态如何，都会触发load事件。