Ajax

全称 - Asynchronous JavaScript and XML

过程步骤

创建 Ajax 的核心对象 XMLHttpRequest 对象
调用 XMLHttpRequest 对象的 open 方法与服务端建立连接
构建请求所需的数据内容，调用 XMLHttpRequest 对象的 send 方法发送请求给服务器端
通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
接受并处理服务端向客户端响应的数据结果
将处理结果更新到 HTML 页面中

创建 XMLHttpRequest 对象

通过 XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

    var xhr = new XMLHttpRequest();

与服务端建立连接 | open

通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

    /**
     * @param method 请求方式 GET、POST
     * @param url 请求地址
     * @param async 是否异步 表示是否异步执行操作，默认为true
     * @param user 用户名  用于认证用途；默认为null
     * @param password 密码 用于认证用途；默认为null
    */
    xhr.open(method, url, async, user, password);

发送请求 | send

通过 XMLHttpRequest 对象的 send() 方法发送请求给服务器端

    /**
     * @param data 请求参数 则默认值为 null
     * */
    xhr.send(data);

使用GET请求发送数据的时候，需要注意如下：

GET请求发送数据，数据会附加在 open() 方法 url 之后（即把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如 EditPosts.aspx?name=test1&id=test2
GET请求发送数据，会受到浏览器的限制，最多只能发送1024字节
送请求数据中的 send() 方法中参数设置为null

接受响应数据 | onreadystatechange

onreadystatechange 事件用于监听服务器端的通信状态，主要监听的属性为 readyState,有五个状态:

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 `open()` 方法
1	OPENED	`open()` 方法已经被调用
2	HEADERS_RECEIVED	`send()` 方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中； `responseText` 属性已经包含部分数据
4	DONE	下载操作已完成

只要 readyState 属性值一变化，就会触发一次 readystatechange 事件
responseText 属性用于接收服务器端的响应结果

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // 请求已完成，且响应已就绪
            if (xhr.status === 200) {
                console.log(xhr.responseText); // 服务器端响应的数据
            } else {
                console.log('Error: ' + xhr.status);
            }
        }
    }