Multiple aSync ajax calls jquery

Question

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?

Unfortunately no. Each logic relies on the previous step being complete. In other words, getTraffic cant run without createKeywords, getGoogleResults cant without getGoogleResults, etc. — Rohit Chopra
– Rohit Chopra, Commented Mar 1, 2012 at 20:53
To me, it doesn't look like you are using any data from javascript in the subsequent requests (the empty {} object and static url), which leads me to believe the required data is stored in session. — Matthew
– Matthew, Commented Mar 1, 2012 at 20:56
If you're adament about implementing such a chaining mechanism, check out dustindiaz.com/async-method-queues — Matthew
– Matthew, Commented Mar 1, 2012 at 21:01

Jasper · Accepted Answer · 2012-03-01 20:58:45Z

//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.

This is awesome. Thanks for taking the time to write actual functions. Appreciate it.

tvanfosson · Accepted Answer · 2012-03-01 21:04:43Z

1

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.

answered Mar 1, 2012 at 21:04

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

Multiple aSync ajax calls jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related