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.

<!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>
Related Topics
- jQuery Interview Questions (Part-2)
- jQuery Interview Questions (Part-3)
- Is jQuery a programming language?
- Why do we need to go for JQuery?
- How to check jQuery version?
- How to multiple version of jQuery?
- What is jQuery CDN?
- Advantages of minified version of JQuery
- How do I check if the DOM is ready?
- How to Use the jQuery load() Method
- Difference between document.ready() and body onload()?
- Is jQuery is a replacement of JavaScript?
- JQuery or JavaScript which is quicker in execution?
- What is the use of param() method?
- How to work with jQuery parent(), children() and siblings()?
- Difference between parent() and parents() in jQuery?
- What does jQuery data() function do?
- How do you check if an element exists or not in jQuery?
- How do I check if an HTML element is empty using jQuery?
- How to run an event handler only once in jQuery?
- How to disable/enable an element with jQuery
- Hide and show image on button click using jQuery
- Difference Between Prop and Attr in jQuery
- How do I check if an element is hidden in jQuery?
- What happen if you return false from a jQuery event handler?
- What is each() function in jQuery? How do you use it?
- Which one is more efficient, document.getElementbyId( "myId") or $("#myId)?
- What is the difference between $.map and $.grep in jQuery
- What is the use of serialize method in jQuery
- What is the use of clone method in jQuery?
- What is event.PreventDefault in jQuery?
- Difference between event.PreventDefault and event.stopPropagation?
- What are deferred and promise object in jQuery?
- What are source maps in jQuery?
- What does the jQuery migrate function do?
- Differences Between jQuery .bind() and .live()?
- How can you delay document.ready until a variable is set?
- How to disable cut,copy and paste in TextBox using jQuery?
- How to prevent Right Click option using jquery?
- How does the jQuery pushStack function work?
- Why use jQuery filter() Methods?
- Difference between find() and closest() in jquery?
- How To Use Ajax In Jquery?
- Can we call C# code behind using jQuery?
- How to include jQuery in ASP.Net project?
- Need to add jQuery file in both Master and Content page?
- Uncaught TypeError: $(…).modal is not a function jquery
- How to check whether a checkbox is checked in jQuery?
- Uncaught ReferenceError: $ is not defined
- How to Convert JSON Date to JavaScript/jQuery date