原生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){ //失败 }})
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 原生js模仿jQuery实现对Ajax的封装
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 原生js模仿jQuery实现对Ajax的封装