ajax的底层实现和请求的过程

ajax实现的核心是XMLHttpRequest对象，该对象有个事件onreadystatechange，每次状态改变都会触发，通过监听该事件触发时的状态可以判断异步请求到了哪一步。

XMLHttpRequest对象的属性：

1. readyState： 请求状态，开始请求时值为0，直到请求完成时，这个值增长到4
2. responseText： 目前为止接收到的响应体，readyState < 3时，此属性为空字符串，=3时为当前响应体，=4时则为完整响应体
3. responseXML： 服务端响应，解析为xml并作为document对象返回
4. status： 服务器端返回的状态码，200表示成功，404表示Not Found
5. statusText： 用名称表示的服务器端返回状态，200为OK， 404为Not Found

XMLHttpRequest对象的方法：

1. setRequestHeader()： 向一个打开但是未发送的请求设置头信息
2. open()： 初始化请求参数，但不发送
3. send()： 发送http请求
4. abort()： 取消当前请求
5. getAllResponseHeaders()： 把http响应头作为未解析的字符串返回
6. 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);
    }
}