jQuery-实现简单的Ajax请求封装

封装的意义在于复用，在于减小重复的代码。

我在项目中作了简单的Ajax请求封装，实现方式以下：

 1 //封装Ajax请求
 2 $.extend({  3     ajaxDirect:function(url,type,data,success,error){  4         if(type.toLowerCase()=='post'){  5             data = pack(data)  6  }  7  $.ajax({  8  type: type,  9             url: base + url, 10             contentType:'application/json', 11  data:data, 12             beforeSend: function (XMLHttpRequest) { 13                 XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token) 14  }, 15             success: function(data){ 16  success(data) 17  }, 18             error: function(data){ 19  error(data) 20  }, 21             dataType: "json"
22  }) 23  } 24 })

其中的要点为：

1.使用jQ的$.extend函数，则调用时只需用$.ajaxDirect(url,type,data,function(){},function(){})便可，若data无值，则传空对象过来。

2.pack为JSON.stringify的封装，即

1 //对象序列化
2 function pack(data) { 3     return JSON.stringify(data) 4 } 5 
6 function unpack(data) { 7     return JSON.parse(data) 8 }

3.该项目在请求时须要传token，则我在请求时在请求头部统一加上了token，即

1 beforeSend: function (XMLHttpRequest) { 2       XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token) 3 }

4.base为请求的统一前缀，为公共变量，可自定义值。

 

调用示例：

GET请求

1 $.ajaxDirect("/user/info",'GET',{}, 2     function (data) { 3         //发送成功
4  }, 5     function (data) { 6         //发送失败
7  } 8 )

POST请求

1 var data = { 2 password:$('.newPwd').val() 3 } 4 5 $.ajaxDirect("/farmer/farmeruser/changePassword",'POST',data, 6 function(data){ 7 //发送成功 8  }, 9 function(data){ 10 //发送失败 11  } 12 )

在这个基础上，咱们能够进一步完善封装的Ajax。

//封装Ajax请求
$.extend({ ajaxDirect:function(url,type,data,success,error,requestType){ if(requestType!=='pic'&&type.toLowerCase()=='post'){ data = pack(data) } var request = { type: type, url: base + url, contentType:'application/json', data:data, beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token) }, success: function(data){ //token过时
                if(data.message==="token过时"){ $.ajax( { type: 'POST', url: base+'/refleshToken', contentType:'application/json', data:pack({ token:sessionStorage.token }), success: function(data){ console.log(data) sessionStorage.token = data.data.token location.reload() }, error: function(){ $.toast("发送失败", "text") }, dataType: "json" }) }else{ success(data) } }, error: function(data){ error(data) }, dataType: "json" } if(requestType==='pic'){ request.cache = false request.processData = false request.contentType = false } if(requestType==='login'){ request.beforeSend = false } $.ajax(request) } })

上面的代码相比第一段代码增长的功能有：

1.增长了POST的大小写适配

2.增长了token过时后统一请求新的token的接口

3.增长了参数requestType，可传可不传，用于区分请求的类型，从而设置请求头的参数。