在现代Web开发中，与服务器进行数据交互是至关重要的一环。而在早期的Web开发中，原生Ajax（Asynchronous JavaScript and XML）技末正是首要选择之一。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求，并根据响应更新页面的部分内容，实现更加流畅的用户体验。本文将探讨原生Ajax请求的基本流程以及如何将其封装成函数，以便在项目中能更方便的发送请求。

1.请求的基本流程

1.创建 XMLHttpRequest 对象 xhr。
2.通过 xhr 对象里的 open() 方法和服务器建立连接。
3.构建请求所需的数据，并通过 xhr 对象的 send() 方法发送给服务器。
4.通过 xhr 对象的 onreadystatechansge 事件监听服务器的通信状态。
5.通过 xhr 对象 readyState 和 status 属性判断请求状态。
6.接收并处理服务器响应的数据结果。

2.示例代码

const xhr = new XMLHttpRequest() // 第一步
xhr.open('GET', 'url', true) // 第二步
xhr.send() // 第三步
xhr.onreadystatechange=()=>{ // 第四步
    // console.log(xhr.readyState,xhr.status);
    if(xhr.readyState===4 && xhr.status===200){ // 第五步
            console.log(xhr.responseText); // 第六步
    }
}

其中 send 方法接收三个参数分别为：请求方式, 请求地址, 是否异步（默认为异步true）。
readyState 属性用来表示一个 Ajax 请求的全部过程中的某一个状态。
readyState === 0 ： 表示未初始化完成，也就是 open 方法还没有执行。
readyState === 1 ： 表示配置信息已经完成，也就是执行完 open 之后。
readyState === 2 ： 表示 send 方法已经执行完成。
readyState === 3 ： 表示正在解析响应内容。
readyState === 4 ： 表示响应内容已经解析完毕，可以在客户端使用了。
status 属性记录本次请求的 http 状态码。
readyStateChange 事件用来监听 Ajax 对象的 readyState 值改变。
responseText 用来记录服务端的响应体内容。

3.携带参数的请求

改变 open 方法的第一个参数可以更换请求方式。send 方法可以传入请求的参数。配合setRequestHeader 方法设置请求头来实现复杂类型的请求。

xhr.open("POST", 'url')
// 表单格式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(`name=luaox&age=23`)
// 或 json 格式
xhr.setRequestHeader("Content-Type","application/json")
xhr.send(JSON.stringify({name:"luaox",age:23}))

4.使用Promise简单封装Ajax

// get请求
const ajaxGet = (url) => {
    const promise = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.send()
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(xhr.responseText)
                }
                else {
                    reject(new Error('请求错误'))
                }
            }
        }
    })
    return promise
}
// post请求
const ajaxPost = (url, params) => {
    const promise = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.setRequestHeader("Content-Type","application/json")
        xhr.send(JSON.stringify(params))
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(xhr.responseText)
                }
                else {
                    reject(new Error('请求错误'))
                }
            }
        }
    })
    return promise
}