手写一个简易ajax

Ajax一般是通过XMLHttpRequest对象来是实现的

let request =new XMLHttpRequest() //声明一个XMLHttpRequest对象

常用的方法和属性

XMLHttpRequest对象的setRequestHeader方法

语法：request.setRequestHeader(key,value) //设置请求头

XMLHttpRequest对象的open方法

语法：request.open(method, url, async, user, password); //初始化请求；一般使用前三个参数，后三个为可选参数

method参数

要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。

url参数

表示向其发送请求的URL。

async 可选参数

表示需不需要异步执行操作，不传入则该参数默认为true，已完成事务的通知可供事件监听器使用。如果值为false，send()方法直到收到答复前不会返回。

XMLHttpRequest对象的send方法

语法：request.send(data) //发送请求，data参数为可选参数。如果是异步请求，则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。

data参数

表示发送请求时的请求体

在通过send方法发送请求后，request对象在收到响应数据时会自动填充到其对应的属性中，xhr 具有以下常用属性：

responText：响应返回的数据内容

responseXML： 如果响应内容是"text/xml""application/xml"，这个属性将保存响应数据的 XML DOM文档

status： 相应的HTTP状态码（200，302，404，503等）

statusText： HTTP状态说明内容（如status的值为200，则statusText的值为"ok"）

readyState： 无论请求是否成功，都回响应的一个属性，表示当前的状态

总共有5个状态值，分别为0~4，每个值代表了不同的含义

0：初始化，XMLHttpRequest对象还没有完成初始化

1：载入，XMLHttpRequest对象开始发送请求

2：载入完成，XMLHttpRequest对象的请求发送完成

3：解析，XMLHttpRequest对象开始读取服务器的响应

4：完成，XMLHttpRequest对象读取服务器响应结束

timeout： 设置请求超时时间

需要结合ontimeout事件使用

发送一个请求，readyState会一直改变状态值，当值改变时会触发onreadystatechange事件，所以可以在此处做请求成功/失败后的数据操作，得出以下代码

request.onreadystatechange=()=>{
    if(request.readyState === 4){    //响应已结束时
        if (request.status === 200 && request.status < 300 || request.status === 304) {    //2xx的状态码均表示成功，304状态码表示请求与上次一致
            let tempRT = request.responseText    //将响应的数据内容赋值给tempRT变量
            console.log(tempRT)    //打印数据内容
        }else if(request.status > 400){    //大于400的状态码均表示为请求失败
            console.log("request fail")  //打印请求失败
        }
    }
}

最后封装这个手写的ajax

window.myAjax = {
    ajax: (options) => {  //接受一个对象参数
        let method = options.method
        let url = options.url
        let header = options.header
        let body = options.body
        let request = new XMLHttpRequest()
        request.open(method, url)
        for (key in header) {
            let temp = key
            request.setRequestHeader(key, temp)
        }
        request.onreadystatechange = () => {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    let temp = request.responseText
                    console.log(temp)
                }
            }
        }
        request.send(body)
    }
}
options = {}  //设置传参
myAjax.ajax(options)  //引入该文件，调用全局变量myAjax的ajax方法

功能较为简易，以实现基础功能为需求