jQuery : Execute/Run multiple Ajax request simultaneously

Yesterday for one of my requirement, I needed to execute/run multiple ajax request simultaneously or in parallel. Instead of waiting for first ajax request to complete and then issue the second request is time consuming. The better approach to speed up things would be to execute multiple ajax request simultaneously.

Related Post:

• Avoid jQuery.post(), use jQuery.ajax()


• jQuery does not work properly after ajax partial postback


• Call jQuery from ASP.NET server side

To do this, we can use jQuery .when(). The $.when() provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

To show how it works, will send multiple ajax request to Flickr API to fetch some photos. The first request will fetch photos which are tagged with "moon" and the second request will fetch photos tagged with "bird". And then we display the results in a div of both the requests.

The basic syntax is,

$.when(request1, request2, request3.....)

So here is 2 ajax request to flickr API. To iterate through the response, there is a callback function attached to it. This callback function gets executed once both the ajax request are finished.

In the case where multiple Deferred objects are passed to $.when(), it takes the response returned by both calls, and constructs a new promise object. The res1 and res2 arguments of the callback are arrays, where res1 has response of first request and res2 has response from second request.

$(document).ready(function () {
   $.when($.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "moon",
        tagmode: "any",
        format: "json"
   }),
   $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "bird",
        tagmode: "any",
        format: "json"
   })).then(function (res1, res2) {
       $.each(res1[0].items, function (i, item) {
          var img = $("<img/>");
          img.attr('width', '200px');
          img.attr('height', '150px');
          img.attr("src", item.media.m).appendTo("#dvImages");
          if (i == 3) return false;
      })
      $.each(res2[0].items, function (i, item) {
          var img = $("<img/>");
          img.attr('width', '200px');
          img.attr('height', '150px');
          img.attr("src", item.media.m).appendTo("#dvImages");
          if (i == 3) return false;
      })
  });
});

See Complete Code

You can also declare what to do in case of success and failure of ajax request. Below jQuery code execute the function myFunc when both ajax requests are successful, or myFailure if either one has an error.

$.when($.ajax("/page1.php"), $.ajax("/page2.php"))
  .then(myFunc, myFailure);

Read more about $.when.

Feel free to contact me for any help related to jQuery, I will gladly help you.

CodeProject