Multiple ‘Simultaneous’ Ajax Calls with jQuery

One major problem with ajax is that when sending two ajax calls – there is no guarantee which call will return first – resulting in data being ‘mixed’ up.

The first time I saw this it was very confusing!

ie.

Let’s say I have two parts of a page that need to be updated –

function UpdatePage(){
     UpdatePart1();
     UpdatePart2();
}

 

function UpdatePart1(){
     $.ajax(beforeSend…, success…);
}

function UpdatePart2(){
     $.ajax(beforeSend…, success…);
}

What can occur in this situation is that the UpdatePart2 can return before the UpdatePart1 – and the ‘success’ from UpdatePart2 will being getting the ‘success’ from UpdatePart1  -definitely not good!!!

So…one way, is to only call UpdatePart2 on the success of UpdatePart1…but… not really as efficient of course.

What to do?

UPDATE:  Danger Will Robinson!  Ok, this actually works fine in Google Chrome and Firefox, but dreadfully it caused issues in IE.

So… what to do?

Check out this one instead:

http://dev.jquery.com/view/trunk/plugins/ajaxQueue/jquery.ajaxQueue.js

‘ajaxQueue’

Now, the usage is off a tad in that link, that usage is from an earlier version.  The code listed there extends the $.ajax call, which is nice, by adding in one additional setting called ‘mode’

ie.

$.ajax({
     mode: ‘queue’,
     url: “test.php”,
      success: function(html){ jQuery(“ul”).append(html); }
});

modes available are ‘queue’, ‘sync’, and ‘abort’.   For the record I’ve only used ‘queue’ and it worked great on all 3 browsers (IE 7, Chrome, FF 3)

In my code I had to loop through a list, sending out a request for each item in succession (printer queue).  This worked well for my case, ensuring no overlapping or wierd results (and boy, in IE it was all over the place with the commented out code below…)

Well,  the “AJAX Queue/Synch/Abort/Block Manager” comes to the rescue  🙂

Helps you to manage AJAX requests and responses (i.e. abort requests, block requests, order responses). It is inspired by the AJAX Queue Plugin and the AjaxQueue document in the jQuery-Wiki.

This is very easy to implement and have some great features as well.

Let’s take our above sample and rewrite it using the AjaxManager:

function UpdatePage(){
    var ajaxManager1 = $.manageAjax({manageType: ‘normal’, maxReq: 0, blockSameRequest:true});
    ajaxManager1.add({
         beforeSend…success…url, etc…
    });

   ajaxManager1.add({
         beforeSend…success…url, etc…
    });
}

Easy as I said to implement – I’m taking the two calls from above, adding each .ajax call to the AjaxManager.

What really shines here are the options available: (From the link above)

  • normal jQuery-Ajax-Options
  • manageType: (string) the queue-type specifies the queue-behaviour (default: ‘normal’):
    • ‘sync’: synchronizes the incomming responses (callbacks) in the same order the requests were made
    • ‘queue’: queues your AJAX-requests (you have to set the maxReq-Option)
    • ‘abortOld’: aborts all “older” requests, if there is a response of a newer request
    • ‘normal’: normal behvaiour
  • maxReq: (number) limits the number of simultaneous request in the queue. If you don´t use ‘queue’ as your manageType, then older requests will be aborted. (default: 0 = unlimited requests)
  • blockSameRequest: (boolean) prevents same request, compares url, data and type in the same queue to determine, wether the same request is already in process. (default: false)

 

So in my sample, I’m using the normal behavior, with unlimited requests, however, I do set the blockSameRequest to ‘true’ – obviously you can configure this to meet your needs.

And…. it’s free and built with the wonderful jQuery library  🙂

Advertisements

7 thoughts on “Multiple ‘Simultaneous’ Ajax Calls with jQuery

  1. With jquery 1.5+ you can avoid using queues, semaphores and other boring things for multiple async queries with $.when(…).then(…) which uses Promise objects for synchronization and allows to add appropriate callbacks depending on results.

  2. Just wish to say your article is as amazing. The clarity in your post is just great and i can assume you’re an expert on this subject. Well with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the gratifying work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s