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