原生js模仿jQuery實(shí)現(xiàn)對(duì)Ajax的封裝
老铁们,还记得如何对原生ajax进行封装吗?注释较少,看看是否还能看的明白?
封装如下:
function ajax(obj){ //指定提交方式的默认值 obj.type = obj.type || "get"; //设置是否异步,默认为true(异步) obj.async = obj.async || true; //设置数据的默认值 obj.data = obj.data || null; var params=_params(obj.data); //在路径后面添加时间戳加随机数防止浏览器缓存。 obj.url+=(obj.url.indexOf("?")>-1?"&":"?")+"t="+((new Date()).getTime()+Math.random()); if(obj.type.toLowerCase()=="get" && params.length>0){//将转换后的data.与url进行拼接。 obj.url+="&"+params; } var xhr=new XMLHttpRequest(); xhr.open(obj.type,obj.url,obj.async); if(obj.type.toLowerCase()=="post"){ xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(params) }else xhr.send(null); if(obj.async){//异步调用 //监听响应状态。 xhr.onreadystatechange=function(){ if(xhr.readyState==4)//响应状态为4,数据加载完毕。 callback(); } }else//同步 callback(); function callback(){ if(xhr.status==200){ obj.success(xhr.responseText); }else{ obj.error(xhr.status); } } //将对象序列化,将对象拼接成url字符串 function _params(data){ if(obj==null) return obj; var arr=[]; for(var i in data){ arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); } return arr.join("&"); } }
调用如下:
ajax({ type:"get", data:{ name:"laoliu" }, url:"getUserByName.php", async:false, success:function(res){ //成功 }, error:function(error){ //失败 } })
作者:张培跃
链接:https://www.jianshu.com/p/4b024347ce26
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)