自己实现 Ajax

用不同方法来实现 Ajax 基本是前端的经典考题了，这篇文章总结了2种常用的实现 Ajax 方法，分别是原生 JS 实现和Promise 实现。

原生 JS 实现

原生 JS 实现 Ajax 算法问得最多的了，所以基本都要把 4 个步骤背下来。

1. 创建 XMLHttpRequest 对象。
2. 监听 readystatechange 事件（接收 response 事件）。
3. 使用 open 和 setRequestHeader 来配置请求。
4. 发送请求，如果有请求内容，则以字符串形式发送。

mybutton.addEventListener('click', () => {
    // 声明 XMLHttpRequest
    let request = new XMLHttpRequest()

    // 监听
    request.onreadystatechange = () => {
        // 判断 readyState
        if (request.readyState === 4) {
            // 判断响应码
            if (request.status >= 200 && request.status < 300) {
                // 获取响应内容
                let string = request.responseText
                let object = JSON.parse(string)
               
                // 打印相关信息
                console.log(object)
                console.log('Response Header', request.getAllResponseHeaders())
                console.log('Content-Type', request.getResponseHeader('Content-Type'))
                console.log('Status Text', request.statusText)
            }
            // 打印错误
            else if (request.status >= 400) {
                console.log('请求失败')
            }
        }
    }

    // 配置 request
    request.open('POST', '/xxx')

    // 配置请求头信息
    request.setRequestHeader("Content-Type", "x-www-form-urlencoded")

    // 发送请求（发送请求内容）
    request.send('请求的内容')
})