HTML5 Zone is brought to you in partnership with:

I'm software developer and microISV, with a lot of passion to technologies.. having a fun writing code, writing blog posts and giving public speeches. For about 10 years of total experince I've been working in many branches of software development, including management and QA. I try to follow and adopt agile practices and signed up for software craftsmenship manifesto. Alexander is a DZone MVB and is not an employee of DZone and has posted 64 posts at DZone. You can read more from them at their website. View Full User Profile

How to Run Multiple AJAX Requests

11.05.2012
| 4641 views |
  • submit to reddit

 

Suppose you have a list of resources that you would like to retrieve by means of AJAX. `$.ajax()` (or it's short variants like `$.get()` or `$.post`) is usual way of making AJAX calls, it works great than you need to fetch one.

var url = '/api/resource/1';
$.get(url, function (r) {
    // use response
});

Even in case of several it might be still usable,

var url1 = '/api/resource/1';
var url2 = '/api/resource/2'
$.get(url1, function (r) {
    // use response from url1
 
    $.get(url1, function (r) {
        // use response from url2
    });
});

You can easily see, if you have more than 3 you are trapping into "callback hell". Furthermore, if you have a list of url's to fetch and the size of that list is dynamic, it's not even possible to build structure like that.

Not long time a ago, I've been exactly into this situation. So, I have a list of resources to fetch, I need to issue them one-by-one and I want to have only one callback, that would pass all fetched resources in one object. Initially I thought it's not even possible, at least with-out creation of some ugly code. But with great help of my colleagues the problem been solved.

jQuery Deferred Object is something I've head about, but never got a change to play with. It turn's out to be very nice and simple idea. Deferred allows you to build chainable constructions. Actually, `$.ajax()` always returns deferred object, so you can apply `.done()`, `.fail()` functions on it.

Here is the code, that you could be re-usable in the same situation;

var pipedAjaxRequests = function (urls, callback) {
 var responses = {};
 
 var promise = $.Deferred().resolve();
 _.each(urls, function (url) {
  promise = promise.pipe(function () {
   return $.get(url);
  }).done(function (response) {
   responses[url] = response;
  });
 });
 
 promise.done(function () {
  callback(responses);
 }).fail(function (err) {
  callback(responses, err);
 });
};

It does create the pipe of `$.get()` calls and place the responses in one response object. At the time then all resources are fetched, the callback is called. In case of errors, second parameter of callback will have error info.

Thanks a lot to @antsamar and @alex_gonchar for helping me out.


Published at DZone with permission of Alexander Beletsky, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)