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