您的当前位置:首页正文

js如何编写简单的ajax方法库

2020-11-27 来源:易榕旅网

本文实例为大家分享了js编写ajax方法库的具体代码,供大家参考,具体内容如下

具体代码

~function(){
 //ajax:实现ajax请求的公共方法;当一个方法传递的参数过多,而且还不固定,我们使用对象统一传值法(把需要传递的参数值都放在一个对象中,一起传递进去即可)
 function ajax(options){
 //把需要使用的参数值设定一个规则和初始值
 var _default = {
 url:"",//请求的地址
 type:"get",//请求的方式
 dataType:"json",//设置请求回来的内容格式
 async:true,//请求是同步还是异步
 data:null,//放在请求主体中的内容(POST)
 getHead:null,//当READY STATE===2的时候执行的回调方法
 success:null//当READY STATE===4的时候执行的回调方法
 };
 //使用用户自己传递进来的值覆盖我们的默认值
 for(var key in options){
 if(options.hasOwnProperty(key)){
 _default[key] = options[key];
 }
 }
 //如果当前的请求方式是get,我们需要在URL的末尾加随机数清楚缓存
 if(_default.type==="get"){
 _default.url.indexOf("?") >=0 ? _default.url += "&" : _default.url += "?";
 _default.url +="_="+Math.random();
 }
 //SEND AJAX
 var xhr = createXHR();
 xhr.open(_default.type,_default.url,_default.async);
 xhr.onreadystatechange = function(){
 if(/^2\d{2}/.test(xhr.status)){
 //想要在READY STATE等于2的时候做一些操作,需要保证AJAX是异步请求
 if(xhr.readyState === 2){
 if(typeof _default.getHead === "function"){
 _default.getHead.call(xhr);
 }
 }
 if(xhr.readyState === 4){
 var val = xhr.responseText;
 //如果传递的参数值是json,说明获取的内容应该是json格式的对象
 if(_default.dataType === "json"){
 val = "JSON" in window ? JSON.parse(val) : eval("("+val+")");
 }
 _default.success && _default.success.call(xhr,val)

 }
 }
 }
 xhr.send(_default.data);
 }
 window.ajax = ajax;
}()

ajax({
 url:"data.txt",
 type:"get",
 dataType:"json",
 async:false,
 getHead:function(){
 //this xhr当前AJAX对象
 },
 success:function(data){
 //this xhr当前AJAX对象
 //data:我们从服务器获取的主体内容
 }

})
显示全文