手写 AJAX

什么是 AJAX

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

AJAX 的步骤

1. 创建 XMLHttpRequest 对象实例
2. 发出 HTTP 请求
3. 服务器返回 XML 格式的字符串 (XML 已被淘汰，现在采用 JSON)
4. JS 解析 XML (JSON)，并更新局部页面

手写 AJAX

const ajax = (method, url, data, success, fail) => {

    let request = new XMLHttpRequest()  // 1. 创建 xhr 对象
    
    request.open(method, url)  // 2. 设置 方法 和 路径，比如 request.open('GET', '/xxx')
    
    request.onreadystatechange = function() {  // 4. 监听 onreadystatechange 事件
        if(request.readyState === 4) {
            if(request.status >= 200 && request.status < 300 || request.status === 304) {
                success(request)
            } else {
                fail(request)
            }
        }
    }
    
    request.send(data)  // 3. 发送请求，比如 request.send('{"name": "Terre"}')
    
}

XMLHttpRequest.onreadystatechange 属性指向一个监听函数。当实例的 readyState 属性变化时，就会执行这个属性。

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态：