CODEWITHSUNDEEP
phpjqueryajax
Rohit Chopra
Rohit Chopra

Reputation: 2811

Multiple aSync ajax calls jquery

I am working on an PHP application that uses ajax to load components within a page. More importantly, these modules/components are suppose to load in a sequence such that if a previous load fails, the ones that follow will also fail.

In other words, the Page loads, makes an ajax call and receives a json encoded response. If the response was "SUCCESS", it makes the second call and receives another json response. Again, if the second response was "SUCCESS", it makes the 3rd call and so on. This is suppose to happen about 8 times at which point the page is considered completely loaded.

If during this load, say the 3rd request receives a response "FAIL", the requests from 4-8 are abandoned and an error message is thrown.

The way I am achieving this right now is by making the first call, wait for response and make the second call from within the first call.

To put this in reference, here is part of the code:

$.get(WEB_ROOT+'/process/createKeywords', {}, function(keywordsResponse) {
    $('#createKeywords').parent().children(0).children(0).hide();
    if (keywordsResponse.RESPONSE == "SUCCESS") {
        $('#createKeywords').html(img);
        $('#getTraffic').parent().children(0).children(0).show();

        $.get(WEB_ROOT+'/process/getTraffic', {}, function(trafficResponse) {
            $('#getTraffic').parent().children(0).children(0).hide();
            if (trafficResponse.RESPONSE == "SUCCESS") {
                $('#getTraffic').html(img);
                $('#getGoogleResults').parent().children(0).children(0).show();

                $.get(WEB_ROOT+'/process/getGoogleResults', {}, function(googleScrapeResponse) {
                    $('#getGoogleResults').parent().children(0).children(0).hide();
                    if (googleScrapeResponse.RESPONSE == "SUCCESS") {
                        $('#getGoogleResults').html(img);
                        $('#resortResults').parent().children(0).children(0).show();

As you can imagine this can get complicated and ugly pretty fast. Does anyone have any suggestions on how I can acomplish something like this?

Upvotes: 1

Views: 365

Answers (2)

tvanfosson
tvanfosson

Reputation: 532445

You might want to think about setting it up as a collection of action objects. Each object has a URL, a pre-action, a post-action, and a success action. Design a function which pops off the first action, performs it's pre-action, then does the AJAX call. Upon return of the AJAX call, it performs the post-action, checks for success and, if successful, performs the success action and calls itself with the remaining tasks. Such a system would be pretty flexible and could adapt to any number of tasks.

Upvotes: 1

Jasper
Jasper

Reputation: 75993

//setup an object to store the necessary info for each AJAX call
var setup = [
    {
        url      : WEB_ROOT + '/process/createKeywords',

        //the callback will be run before the next AJAX request is made
        callback : function (keywordsResponse) {
            $('#createKeywords').parent().children(0).children(0).hide();
            if (keywordsResponse.RESPONSE == "SUCCESS") {
                $('#createKeywords').html(img);
                $('#getTraffic').parent().children(0).children(0).show();
            }
        }
    },
    {
        url      : WEB_ROOT + '/process/getTraffic',
        callback : function () {
            $('#getTraffic').parent().children(0).children(0).hide();
            if (trafficResponse.RESPONSE == "SUCCESS") {
                $('#getTraffic').html(img);
                $('#getGoogleResults').parent().children(0).children(0).show();
            }
        }
    }
];

//setup a function that recursively calls itself when the current AJAX request comes back successfully
function doAJAX(index) {
    var val = setup[index];
    $.getJSON(val.url, function (serverResponse) {

        //run the specified callback for this AJAX request
        val.callback(serverResponse);

        //now check if the response is "SUCCESS" and make sure that another AJAX request exists in the `setup` object
        if (serverResponse.RESPONSE == 'SUCCESS' && typeof setup[(index + 1)] != 'undefined') {

            //since the last AJAX request was a success and there is another one set, run it now
            doAJAX(index + 1);
        }
    });
}

//run the first AJAX request by passing in zero (index)
doAJAX(0);

This just allows you to setup the necessary variables for your consecutive AJAX requests. The callback associated with each url will run before the next AJAX request is run.

Upvotes: 1

Related Questions