jquery中的ajax模块化处理

我们在编写前端jquery脚本时，经常会需要异步获取服务器数据达到局部刷新效果，最方便的实现方式就是使用ajax并在回调函数中进行数据处理。ajax即异步javascript和xml，实现如下：

$.ajax({
    url: "http://xxx.com/xxx",      //异步请求链接
    type:"GET",             //请求方式，一般是GET、POST
    data: "{'xxx':'xxx'}",          //异步请求数据
    dataType:"json",            //数据类型，json表示返回json数据，需要跨域请求时jsonp
    scriptCharset:"utf-8",      //数据编码格式
    async:false,                //异步返回，默认false
    cache:true,             //数据缓存，默认true
    success:function(result) {      //异步调用成功
        /* 回调数据处理 */
    },
    error:function() {          //异步调用失败
        /* 错误展示 */
    }
});    

单个ajax函数非常简单高效，但往往一个脚本中可能会多次异步请求后台服务器，那就需要实现多次ajax及回调函数的编写，如下代码所示：

var service = {
    init: function() {
        this.loadX();
        this.loadY();
        this.loadZ();
    },
    loadX: function() {
        $.ajax({
            url: "http://xxx.com/X",    
            type:"GET",
            data: "{'a':'x'}",
            dataType:"json",
            scriptCharset:"utf-8",
            success:function(result) {  
                /* X回调数据处理 */
            },
            error:function() {
                /* 错误展示 */
            }
        });
    },
    loadY: function() {
        $.ajax({
            url: "http://xxx.com/Y",    
            type:"GET",
            data: "{'a':'y'}",
            dataType:"json",
            scriptCharset:"utf-8",
            success:function(result) {  
                /* Y回调数据处理 */
            },
            error:function() {
                /* 错误展示 */
            }
        });
    },
    loadZ: function() {
        $.ajax({
            url: "http://xxx.com/Z",    
            type:"GET",
            data: "{'a':'z'}",
            dataType:"json",
            scriptCharset:"utf-8",
            success:function(result) {  
                /* Z回调数据处理 */
            },
            error:function() {
                /* 错误展示 */
            }
        });
    }
};

$(function() {
    service.init();
});

大量的ajax及回调处理导致了js代码的大量重复，不仅不美观，也增加了维护的工作量，在大量js脚本的维护中，于是就想到了对ajax做模块化处理，因为ajax的调用方式可以做参数化配置，那就可以直接把ajax的调用逻辑独立出来，通过实现不同的回调函数来达到模块化的目的，如下所示：

var service = {
    init: function() {
        this.loadX();
        this.loadY();
        this.loadZ();
    },
    loadX: function() {
        var url = "http://xxx.com/X", data = "{'a':'x'}";
        this.ajax(url, data, this.callback.loadXCallback);
    },
    loadY: function() {
        var url = "http://xxx.com/Y", data = "{'a':'y'}";
        this.ajax(url, data, this.callback.loadYCallback);
    },
    loadZ: function() {
        var url = "http://xxx.com/Z", data = "{'a':'z'}";
        this.ajax(url, data, this.callback.loadZCallback);
    },
    ajax: function(url, data, callback) {
        $.ajax({
            url: url,   
            type:"GET",
            data: data,
            dataType:"json",
            scriptCharset:"utf-8",
            success:function(result) {  
                callback(result);
            },
            error:function() {
                /* 错误展示 */
            }
        });
    },
    callback: {
        loadXCallback: function(result) {
            /* X回调数据处理 */
        },
        loadYCallback: function(result) {
            /* Y回调数据处理 */
        },
        loadZCallback: function(result) {
            /* Z回调数据处理 */
        }
    }
};
$(function() {
service.init();
});

这样的处理，既利用了ajax函数调用，也让脚本显得更清晰简洁，实现脚本的模块化。