CODEWITHSUNDEEP
javascriptajax
Gaurav
Gaurav

Reputation: 367

How to asynchronize multiple Ajax Post call to the same URL

I've an array of items in javascript, and for each item, I've to make an ajax post to a URL to get corresponding info and display the info in a container. The code broadly looks like this:

var data = some_data;
array.forEach(item, idx)=> {
    callAjaxAndUpdate(data, item, $('div#container'+i);
});

and the Ajax method is simply

var standardUrl = 'https://example.com/post.php';
function callAjaxAndUpdate(data, item, container) {
    $.ajax({
        url: standardUrl
        data: data,
        type: 'POST',
    }).done(function(res) {
       container.append(res.data);
    }).fail(function(res) {
       container.append(res.responseText);
    }).always(function() {
       container.append('DONE!');
    });
}

However, this thing whole thing seems to have become blocking. I did server-side logging of timestamps, and I could see that ajax request for each item is getting triggered only after that for the previous one has completed (always section executed).

Could someone help me out with why this setup is synchronous, and how to make it async? Please note that this script is executing in the browser, and not on nodeJS.

EDIT: Turns out, it's the PHP backend which is processing the requests in a blocking way. Perhaps the session is the culprit here. I would close the question now. Thanks for your help and suggestions.

Upvotes: 0

Views: 43

Answers (1)

Googlian
Googlian

Reputation: 6733

Try default Ajax async 

var standardUrl = 'https://example.com/post.php';
function callAjaxAndUpdate(data, item, container) {
$.ajax({
    url: standardUrl,
    async: true,
    data: data,
    type: 'POST',
}).done(function(res) {
   container.append(res.data);
}).fail(function(res) {
   container.append(res.responseText);
}).always(function() {
   container.append('DONE!');
});
}

Or you can call the method on .done method

Upvotes: 1

Related Questions