ajax

AJAX 指的是通过js的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

1. 创建一个 XMLHttpRequest 对象
2. 在这个对象上使用 open 方法创建一个 HTTP 请求。
3. 在发起请求前，可以为这个对象添加一些信息和监听函数。setRequestHeader 方法 还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有5个状态，状态变化会触发 onreadystatechange 事件，可以通过设置监听函数，来处理成功后的结果。当状态为4，代表服务器返回的数据接收完成，如果状态2xx表示正常。
4. 当对象的属性和监听函数设置完成之后，最后调用 send 方法来向服务器发起请求，可以传入参数作为发送的数据体。

var ajax = {
    get: function (url, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open('GRT', url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readState === 4 && xhr.status === 200) {
                fn(xhr.responseText);
            }
        }
        xhr.onerror = function() {
            console.error(this.statusText);
        };
        // 设置请求头信息
        xhr.responseType = 'json';
        xhr.setRequestHeader('Accept', 'application/json');
        // 发送http请求
        xhr.send(null);
    },
    post: function (url, data, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.send(data);
        xhr.setRequestHeader('Context-Type', 'application/x-www-form-urlencoded');
        xhr.onreadysatatechange = function () {
            if(xhr.readySate === 4 && xhr.status === 200) {
                fn(xhr.responseText);
            }
        };
    }
}

onreadystatechange, 每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState：存有服务器响应的状态信息.

• 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
• 1: 服务器连接已建立（open方法已经被调用）
• 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
• 3: 请求处理中（下载中，responseText 属性已经包含部分数据）
• 4: 请求已完成，且响应已就绪（下载操作已完成）

使用 promise 来封装

function getJSON(url) {
    let promise = new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        // 新建一个 http 请求
        xhr.open('GET', url, true);
        // 设置监听函数
        xhr.onreadystatechange =function () {
            if (this.readyState !== 4) return;
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        }
        xhr.onerror = function () {
            reject(new Error(this.statusText));
        }
        xhr.responseType = 'json';
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send(null);
    })

    return promise;
}