Manage multiple Ajax requests using jQuery when() method

With jQuery, we can use $.ajax() or the shorthand $.get() to make ajax calls.

When we have multiple such calls, we can nest them using jQuery callbacks as follows :


    // First ajax call
    $.get(url1, function (response1) {
        // On suceess of First
        // Second ajax call
        $.get(url2, function (response2) {
            // Both successful
            // Now do something with the responses
        });
    });

Here is an example of this where we make two google map api calls for two addresses and populate the response after both are successful.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var url1 = 'https://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false';
            var url2 = 'https://maps.googleapis.com/maps/api/geocode/xml?address=701+First+Avenue,+Sunnyvale,+CA&sensor=false';
            var address1, address2;
            $.get(url1, function (response1) {
                $.get(url2, function (response2) {
                    address1 = $(response1).find('formatted_address').text();
                    address2 = $(response2).find('formatted_address').text();
                    document.getElementById("address1").innerHTML = address1;
                    document.getElementById("address2").innerHTML = address2;
                });
            });
        });
    </script>
</head>

<body>
    <h3>Address1</h3>
    <p id="address1"></p>
    <h3>Address2</h3>
    <p id="address2"></p>
</body>

</html>

The ajax calls in the above example are sequential. The second call happens after the success of first call. If we had more service calls to be made before we show the response on screen, we can nest them similarly in sequence. This would increase the overall response time if the number of service calls is more.

However, jQuery provides a $.when() method that we can use to execute these calls in parallel.

The following example uses jQuery.when to fire two ajax requests and then call some function after the two requests have completed.


    $.when(
        // First ajax call
        $.get(url1, function (response) {
         address1 = $(response).find('formatted_address').text();
        }), 
        // Second ajax call
        $.get(url2, function (response) {
         address2 = $(response).find('formatted_address').text();
        })).
        then(function (response) {
            // Both successful
            // Now do something with the responses
        });

Here is the complete example :

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var url1 = 'https://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false';
            var url2 = 'https://maps.googleapis.com/maps/api/geocode/xml?address=701+First+Avenue,+Sunnyvale,+CA&sensor=false';
            var address1, address2;
            
            $.when($.get(url1, function (response) {
                address1 = $(response).find('formatted_address').text();
            }), $.get(url2, function (response) {
                address2 = $(response).find('formatted_address').text();
            })).then(function (response) {
                console.log("Both ajax calls are successful");
                document.getElementById("address1").innerHTML = address1;
                document.getElementById("address2").innerHTML = address2;
            });
        });
    </script>
</head>

<body>
    <h3>Address1</h3>
    <p id="address1"></p>
    <h3>Address2</h3>
    <p id="address2"></p>
</body>

</html>

Output:

multiple ajax calls in jquery

© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post

Leave a Reply.. code can be added in <code> </code> tags