zl程序教程

您现在的位置是:首页 >  前端

当前栏目

原生Javascript封装的一个AJAX函数分享

JavaScript封装AJAX 函数 一个 分享 原生
2023-06-13 09:15:28 时间

最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法.

所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequest.

复制代码代码如下:


/*
*Name:xhr,AJAX封装函数
*Description:一个ajax调用封装类,仿jquery的ajax调用方式
*Author:十年灯
*/
varxhr=function(){
   var
   ajax=function (){
       return("XMLHttpRequest"inwindow)?function (){
               returnnewXMLHttpRequest();
           }:function (){
           returnnewActiveXObject("Microsoft.XMLHTTP");
       }
   }(),
   formatData=function(fd){
       varres="";
       for(varfinfd){
           res+=f+"="+fd[f]+"&";
       }
       returnres.slice(0,-1);
   },
   AJAX=function(ops){
       var    
       root=this,
       req=ajax();

       root.url=ops.url;
       root.type=ops.type||"responseText";
       root.method=ops.method||"GET";
       root.async=ops.async||true;    
       root.data=ops.data||{};
       root.complete=ops.complete||function (){};
       root.success=ops.success||function(){};
       root.error= ops.error||function(s){alert(root.url+"->status:"+s+"error!")};
       root.abort=req.abort;
       root.setData=function (data){
           for(vardindata){
               root.data[d]=data[d];
           }
       }
       root.send=function (){
           vardatastring=formatData(root.data),
           sendstring,get=false,
           async=root.async,
           complete=root.complete,
           method=root.method,
           type=root.type;
           if(method==="GET"){
               root.url+="?"+datastring;
               get=true;
           }
           req.open(method,root.url,async);
           if(!get){
               req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
               sendstring=datastring;
           }      

           //在send之前重置onreadystatechange方法,否则会出现新的同步请求会执行两次成功回调(chrome等在同步请求时也会执行onreadystatechange)
           req.onreadystatechange=async?function (){
               //console.log("asynctrue");
               if(req.readyState==4){
                   complete();
                   if(req.status==200){
                       root.success(req[type]);
                   }else{
                       root.error(req.status);
                   }                  
               }
           }:null;
           req.send(sendstring);
           if(!async){
               //console.log("asyncfalse");
               complete();
               root.success(req[type]);
           }
       }
       root.url&&root.send();       
   };
   returnfunction(ops){returnnewAJAX(ops);}   
}();

参数说明:

1.url:请求地址.可以不填,请求就不会发起,但如果不填又强行send,出了错不怪我
2.method:‘GET"或"POST",全大写,默认GET
3.data:要附带发送的数据,格式是一个object
4.async:是否异步,默认true
5.type:返回的数据类型,只有responseText或responseXML,默认responseText
6.complete:请求完成时执行的函数
7.success:请求成功时执行的函数
8.error:请求失败时执行的函数

注:其中的type参数,并没有jquery的dataType那么丰富,只有原生AJAX有的responseText或responseXML.要是返回的是json数据,你需要在success函数中自己处理一下把text转成json.

函数说明:

一个实例化的xhr对象有两个函数可使用,一个是send,调用方法是:xhr.send(),无参数,其作用是发起请求过程.如果初始化时没有url,则不会执行send方法,这样你就可以在后面再加入url,并手动发起send—-如果send的时候没有url,那么请求会失败并且我没有处理这个错误,出了错只有你自己找了.

另一个方法是setData,调用方法是xhr.setData(data_obj),其参数是一个object.setData方法的作用是局部替换xhr的data属性里的值,比如xhr.data中已有一个page:1,你可以用xhr.setData({page:2})来更新他的值,而不影响data中已存在的其他属性值.

调用方法:

复制代码代码如下:

vara1=xhr({
       url:"2.php",
       data:{
           "username":"lix",
           "password":"123456",
           "gender":"male",
           "interset":"play"
       },
       async:false,
       method:"GET",
       success:function (data){
           varobj=JSON.parse(data);
           //....
       }
   });

注:不用写new

特色介绍:

经过这段时间的项目经验,我发现一个ajax类应该具有一个很常见的特色:便于重复发起请求.比如项目中我写分页ajax的时候,每次翻页都要发送请求,但发送的数据中除了当前页码和每页条数,其他的都是不会改变的.如果多次这样的请求,都要重复定义那些不变的参数,无疑是种资源浪费.

所以这个xhr函数,就已经考虑了这个功能.还是拿分页的例子来说,我们可以在页面加载完成的时候就初始化一个xhr对象,保存为变量a1,当发起翻页请求时,其他的什么参数都没变,但pageNumber变了,此时就可以调用xhr的setData方法,把pageNumber改掉.

复制代码代码如下:
a1.setData({pageNumber:2});

注:setData的参数也是一个object.

当然,你也可以把data全盘替换:

a1.data={…};

不只是data,你可以对a1这个已经实例化的xhr对象进行更多的更改,比如换掉url,换掉success函数,GET换成POST,同步换成异步…换完之后,再调用a1.send()方法,他就会按你的设置再次发起请求了.

当然,如果是完全不相关的另一个ajax请求,就没有必要硬要用这个现成的a1了.我们可以再实例化一个xhr,叫a2什么的.

如果你对xhr这个名字不满意,那就只有自己改掉了.

另外提供压缩加密版.未压缩版去掉注释大概2kb,压缩版1.00kb.

复制代码代码如下:
varxhr=function(){vare=function(){return"XMLHttpRequest"inwindow?function(){returnnewXMLHttpRequest}:function(){returnnewActiveXObject("Microsoft.XMLHTTP")}}(),t=function(e){vart="";for(varnine){t+=n+"="+e[n]+"&"}returnt.slice(0,-1)},n=function(n){varr=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r.async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){};r.error=n.error||function(e){alert(r.url+"->status:"+e+"error!")};r.abort=i.abort;r.setData=function(e){for(vartine){r.data[t]=e[t]}};r.send=function(){vare=t(r.data),n,s=false,o=r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url+="?"+e;s=true}i.open(a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function(){if(i.readyState==4){u();if(i.status==200){r.success(i[f])}else{r.error(i.status)}}}:null;i.send(n);if(!o){u();r.success(i[f])}};r.url&&r.send()};returnfunction(e){returnnewn(e)}}()

xhr肯定有不完善的地方,以后使用中如果发现了,我会及时修正的.如果你用得不爽或发现不足,也请不吝提出改进意见.