How to optimize (minimize) jQuery AJAX calls

Question

I have over 50 AJAX calls from different functions of my code. All these calls have a similar structure with different data/url/callback params:

var jqXHR = $.post('/dba/port.php', {
        mode: "del_wallfunds",
        pdata: cdata,
        wname: wName
    },
    function (data) {}, "json")
    .done(function (data) {
        var msg = data.msg;
        if (msg.indexOf("Error") == -1) {
            alertify.success(msg);
            delSelected(selGroup);
        } else {
            alertify.error(msg);
        }
    })
    .fail(function () {
        alertify.error("Error .....");
    });

I am thinking how to write a function that would return that var jqXHR to minimize the total size of the code. It is not a problem to pass all static variables like URL, error strings etc. But the problem is that all callback functions on ".done" are different and I don't know how to pass these callback functions as variables.

One way would be to call a single "universal" function on .done and pass a "switch" variable to that function, but it doesn't seem to be an elegant solution.

Any suggestions how to it in some elegant way?

Thanks

Anthony Grist · Accepted Answer · 2013-10-23T08:28:16.117

Either pass the done callback function as an argument when calling your function:

function ajaxCall(url, data, doneCallback) {
    return $.post(url, data, doneCallback, "json").fail(...);
    // or
    return $.post(url, data, function() {}, "json").done(doneCallback).fail(...);
}

var jqXhr = ajaxCall('yoururl.php', {key: 'value'}, function(data) {
    // do something
});

Or return the jqXhr object from the function, and assign the done callback then:

function ajaxCall(url, data) {
    return $.post(url, data, function() {}, "json").fail(...);
}

var jqXhr = ajaxCall('yoururl.php', {key: 'value'});
jqXhr.done(function(data) {
    // do something
});

Alternatively switch to using jQuery.ajax() instead, and pass the entire options object in:

function ajaxCall(options) {
    return $.ajax(options).fail(...);
}

var jqXhr = ajaxCall({
    url: 'yoururl.php',
    data: {key: 'value'},
    dataType: 'json'
});
jqXhr.done(function(data) {
    // do something
});

LeGEC · Answer 2 · 2013-10-23T22:43:16.770

You can try to :

turn "request successfully returned a treatment error" into a "rejected request",
put the "alertify" processing in a common callback

Here is a sketch of what this could give :

function myAjaxApi(url, data){
    var myAjaxCall = $.post(url, data, function (data) {}, "json")
    .then(function (data) {
    // using .then : change "request succesful with error state"
    //    to "rejected state"
        var msg = data.msg;
        if (msg !== undefined && msg.indexOf("Error") >= 0) {
            var dfd = $.Deferred();
        // try to match the same signature as the "error" option
            dfd.reject(this, msg);
            return dfd;
        } else {
            return data
        }
    });

    myAjaxCall.done(function(data){
        if (data.msg) {
            alertify.success(data.msg);
        }
    }).fail(function (jqxhr, msg) {
        if (!msg) {  msg = "Error .....";  }
        alertify.error(msg);
    });
    return myAjaxCall;
}

//usage
myAjaxApi('/dba/port.php', {mode: "del_wallfunds", pdata: cdata, wname: wName})
.done(function (data) {
// the ".done()" queue will not be executed if msg contains "Error" ...
    delSelected(selGroup);
});

Some parts should be written with more care ; the above example is meant to illustrate how you can wrap your repeated ajax calls inside a common api.

How to optimize (minimize) jQuery AJAX calls

2 Answers2

Linked