原生前端基于XMLHttpRequest实现ajax方案


class Ajax{
    xhr = new XMLHttpRequest();
    config = {
        header:{},
        data:{},
        param:{}
    }
    constructor(config={}){
        this.config = config
        if("header" in Object.keys(this.config)){
            Object.keys(this.config.header).forEach(e => {
                this.xhr.setRequestHeader(e,this.config.header[e])
            });
        }else if("data" in Object.keys(this.config)){
            let tmp_data = "?"
            Object.keys(this.config.data).forEach(e => {
                tmp_data+= `${e}=${this.config.data[e]}&`
            });
            this.config.data = tmp_data;
        }
        else if("param" in Object.keys(this.config)){
            let fromData = new FormData();
            Object.keys(this.config.param).forEach(e => {
                fromData.append(e,this.config.param[e])
            });
            this.config.param = fromData;
        }
    }
    post(url,param=null,asyncType=false,callback=()=>{}){
        let tmp_param = new FormData();
        if(param == null && "param" in Object.keys(this.config)){
            tmp_param = this.config.param;
        }else{
            let fromData = new FormData
            Object.keys(param).forEach(e => {
                fromData.append(e,param[e])
            });
            this.config.param = fromData;
            tmp_param = fromData;
        }
        this.xhr.open("post",url+(this.config.data==undefined?"":this.config.data),asyncType)
        this.xhr.send(tmp_param)
        if(!asyncType){
            let data = this.xhr.responseText;    
            return data;
        }else{
            this.xhr.onreadystatechange = ()=>{
                if(this.xhr.readyState == 4 && this.xhr.status == 200){
                    let data = this.xhr.responseText;
                    callback(data)
                    return data;
                }
            }
        }
    }
    get(url,data,asyncType=false,callback=()=>{}){
        if(data == null && "param" in Object.keys(this.data)){
        }else{
            let tmp_data = "?"
            Object.keys(data).forEach(e => {
                tmp_data+= `${e}=${data[e]}&`
            });
            this.config.data = tmp_data;
        }
        this.xhr.open("get",url+(this.config.data==undefined?"":this.config.data),asyncType)
        this.xhr.send()
        if(!asyncType){
            let data = this.xhr.responseText;
            return data;
        }
        else{
            this.xhr.onreadystatechange = ()=>{
                if(this.readyState == 4 && this.status == 200){
                    let data = this.xhr.responseText;
                    callback(data)
                    return data;
                }
            }
        }
    }
}

使用示例:

// 同步模式:
let ajax = new Ajax({header:{cookie:document.cookie}})
let b = ajax.post("url",{id: "2c9280838bd782c2018bf6394acf1720"})
// 异步模式
let ajax = new Ajax({header:{cookie:document.cookie}})
ajax.post("url",{id: "2c9280838bd782c2018bf6394acf1720"},true,(data)=>{
console.log(data)
})

声明:一代明君的小屋|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 原生前端基于XMLHttpRequest实现ajax方案


欢迎来到我的小屋