Ajax

1. 简介

Ajax 能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术。

2. 实现一个 Ajax

AJAX 创建异步对象 XMLHttpRequest

操作 XMLHttpRequest 对象

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange，类似函数指针

（3）获取异步对象的readyState属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

（4）判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。

（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

const xhr = new XMLHttpRequest();		// 创建 XMLHttpRequest 对象
xhr.open('get', 'aabb.php', true);		// 设置请求参数
xhr.send(null);
xhr.onreadystatechange = function() {	// 设置回调函数
    if(xhr.readyState == 4) {			// 获取异步对象的 readyState 属性
        if(xhr.status == 200) {			// 判断响应报文的状态
            console.log(xhr.responseText);		// 读取响应数据
        }
    }
}

3. Ajax 返回的状态

0——（未初始化）还没有调用 send() 方法

1——（载入）已调用 send() 方法，正在发送请求

2——（载入完成）send() 方法执行完成，已经接收到全部响应内容

3——（交互）正在解析响应内容

4——（完成）响应内容解析完成，可以在客户端调用了