简单实现一个ajax请求

sevenliao2025-04-20 17:13

方法原理：

创建一个XMLHttpRequest对象；

在这个对象上使用open方法创建一个http请求。open方法所需要的参数是：1.请求的方法、2.请求的地址、3.是否异步、4.用户的认证信息。

在发起请求前，可以为这个对象添加一些信息和监听函数。比如：通过setRequestHeader方法为请求添加头信息、这个对象添加一个状态监听函数。

补充：

一个XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。当这个对象的readyState变为4的时候，代表服务器返回的数据接收完成。然后再通过判断请求的状态，如果状态是2xx或者304的话则代表返回正常。这个时候可以把response中的数据返回去，页面对应进行页面更新和业务逻辑。

当这个对象的属性和监听函数设置完成后，最后调用send方法来向服务器发起请求。可以传入参数作为发送的数据体。

补充：

send方法用于实际发送Http请求到服务器。它接受一个参数，即作为请求体发送的数据。

对于GET请求，这个参数通常传入null（有些浏览器可能都不要求），因为GET请求的数据是通过URL参数传递。

对于POST请求，这个参数是请求体中要发送的数据。

js 复制代码

//对于GET请求
xhr.send(null) 

//对于POST请求
xhr.send("name=xxx&age=12")

举个例子

这里使用Promise封装ajax:

js 复制代码

function getAjax(url，params){
    //创建一个promise对象
    let promise = new Promise((resolve, reject)=>{
        //创建一个XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
        
        //新建一个http请求
        xhr.open("GET", url, true);
        
        //设置状态的监听函数
        xhr.onreadystatechange= ()=>{
            if(this.readyState !== 4) {
                return
            }
            
            //通过状态码请求成功或失败
            if(this.status === 200){
                resolve(this.response)
            }else{
                let error = new Error(this.statusText);
                reject(error)
            }
        }
        
        //异常监听
        xhr.onerror= ()=>{
            let error = new Error(this.statusText);
            reject()
        }
        
        //设置响应的数据类型
        xhr.responseType = "json";
        //设置请求头信息
        xhr.setRequestHeader('Accept','application/json');
        //发送Http请求
        xhr.send(null);
    })
    
    return promise;
}