How to Run Multiple AJAX Requests in jQuery

By: Rajesh P.S.

The jQuery .when() method allows you to coordinate and execute callback functions based on one or more asynchronous operations, typically represented by Deferred objects. It's particularly useful for handling multiple asynchronous tasks and executing code when all of them are successfully completed or when any of them encounters an error.

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

Deferred objects indeed enable the creation of chainable and asynchronous constructions, and functions like .done() and .fail() make it convenient to handle the results of asynchronous operations. Additionally, when using $.when() with multiple Deferred objects, it returns a new "master" Deferred object that tracks the collective state of all the Deferred objects provided, allowing you to manage the resolution values effectively, whether they are single values or arrays of values from multiple Deferred objects.

var data1 = $.Deferred(); var data2 = $.Deferred(); var data3 = $.Deferred();

$.when( data1, data2, data3 ).done(function ( var1, var2, var3 ) { console.log( var1 ); // var1 is undefined console.log( var2 ); // var2 is "xyz" console.log( var3 ); // var3 is an array [ 1, 2, 3, 4, 5 ] });

data1.resolve(); data2.resolve( "xyz" ); data3.resolve( 1, 2, 3, 4, 5 );

Continue Reading...

example

The following jQuery Ajax() example shows 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.

Browser View

Full Source

<!DOCTYPE html> <html lang="en"> <head> <title>jQuery multiple AJAX requests</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $('.loader').click(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 (picArray1, picArray2) { $.each(picArray1[0].items, function (i, item) { var img = $("<img/>"); img.attr('width', '200px'); img.attr('height', '150px'); img.attr("src", item.media.m).appendTo("#myImages"); if (i == 1) return false; }) $.each(picArray2[0].items, function (i, item) { var img = $("<img/>"); img.attr('width', '200px'); img.attr('height', '150px'); img.attr("src", item.media.m).appendTo("#myImages"); if (i == 1) return false; }) }); }); }); </script> <style> img { padding : 10px; } </style> </head> <body> <input type = "button" class = "loader" value = "Load Data" /> <div id="myImages"></div> </body> </html>

Conclusion

To run multiple AJAX requests in jQuery, you can use the $.when() method to coordinate and manage them concurrently. It allows you to specify multiple Deferred objects representing asynchronous operations and execute code once all of them are successfully completed or when any of them encounters an error, making it an efficient way to handle parallel AJAX requests.

Next > Can we call C# code behind using jQuery?

Related Topics

More Related Topics.....