How to Run Multiple AJAX Requests in jQuery

jQuery .when() provides a way to execute callback functions based on zero or more Thenable objects , usually Deferred objects that represent asynchronous events .

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

jQuery Deferred Object turns 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. In the case where multiple Deferred objects are passed to jQuery.when() , the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferred it has been passed. If a Deferred resolved to a single value, the corresponding argument will hold that value. In the case where a Deferred resolved to multiple values, the corresponding argument will be an array of those values.

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 );

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>

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

Related Topics