原生前端基于XMLHttpRequest实现ajax方案 最后更新时间:2024年08月18日 ```javascript 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; } } } } } ``` 使用示例: ```javascript // 同步模式: 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) }) ```
Comments | NOTHING