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，可傳可不傳，用於區分請求的類型，從而設置請求頭的參數。