原生js模仿jQuery实现对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
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦