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

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

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

 //封装Ajax请求
 $.extend({
     ajaxDirect:function(url,type,data,success,error){
         if(type.toLowerCase()=='post'){
             data = pack(data)
         }
         $.ajax({
             type: type,
             url: base + url,
             contentType:'application/json',
             data:data,
             beforeSend: function (XMLHttpRequest) {
                 XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
             },
             success: function(data){
                 success(data)
             },
             error: function(data){
                 error(data)
             },
             dataType: "json"
         })
     }
 })

其中的要点为：

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

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

 //对象序列化
 function pack(data) {
     return JSON.stringify(data)
 }

 function unpack(data) {
     return JSON.parse(data)
 }

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

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

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

调用示例：

GET请求

 $.ajaxDirect("/user/info",'GET',{},
     function (data) {
         //发送成功
     },
     function (data) {
         //发送失败
     }
 )

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，可传可不传，用于区分请求的类型，从而设置请求头的参数。