Javascript - AJAX request inside loops

Question

I'm using jQuery to send an AJAX request, retrieving data from a server.

That data is then appended to an element. This should happen 5 times, but it will always happen randomly either 3, 4, or 5 times. Basically, sometimes the loop will skip the AJAX request, but the majority of the time it catches it. How do I make sure it completes the request five times every time? and what is the reason behind this random behavior of skipping AJAX request?(side note. I've checked the request errors, but it never alerted of a request failure)

Here's my JS:

while (counter < 6) {
    $.ajax({
        url:'http://whisperingforest.org/js/getQuote.php',
        async: false,
        dataType: 'jsonp',
        success:function(data){
            $('.quoteList').append('<li>' + data +'</li>');
            totalQuotes++;
        }
    });
    counter++;
}

P.s. this happens on a button press.

Why are you making 6 requests instead of getting all the data you need in one request and then splitting it out into 6 list items? — jball, Mar 24 '14 at 22:16
Just checked the network tab (didn't know this exists :P)... it makes all the requests, but 30% of the time or so it gets a '500 internal server error'... && I'm making 6 separate requests because.. it's my first time using AJAX and I couldn't figure out how to extract information from multiple rows rather than an echoed string of a single row. — pashOCONNOR, Mar 24 '14 at 22:53
On the multiple rows thing, assuming you're calling `json_encode` on the server side, just pass in a non-associative array and it will return the JSON for a JS array, e.g. `json_encode(array(1,2,3))` will return `[1,2,3]` which you can then iterate on the client side. — jball, Mar 25 '14 at 16:43
I see the comment all over saying why don't you combine your ajax request into one call. If the ajax request is small enough to put into one call then it should be made into one call. However, an ajax call has a maximum default size for a call and if you cannot modify your server to allow for more text to be sent in one call, then multiple ajax calls is an option. — CodeGuyRoss, May 13 '15 at 16:13

score 33 · Accepted Answer · edited May 23 '17 at 12:02

Don't do it synchronously. Use the callback. Here is a demo for you: http://jsfiddle.net/y45Lfupw/4/

<ul class="quoteList"></ul>
<input type="button" onclick="getData();" value="Go Get It!">

<script>
var counter = 0;

window.getData=function()
{
    /* This IF block has nothing to do with the OP. It just resets everything so the demo can be ran more than once. */
    if (counter===5) {
        $('.quoteList').empty();
        counter = 0;
    }

    $.ajax({
        /* The whisperingforest.org URL is not longer valid, I found a new one that is similar... */
        url:'http://quotes.stormconsultancy.co.uk/random.json',
        async: true,
        dataType: 'jsonp',
        success:function(data){
            $('.quoteList').append('<li>' + data.quote +'</li>');
            counter++;
            if (counter < 5) getData();
        }
    });
}
</script>

Setting async to false blocks the main thread (responsible for executing JavaScript, rendering the screen, etc) and waits for the XHR to complete.

This is almost always a terrible idea. Users don't like unresponsive UIs. (https://stackoverflow.com/a/20209180/3112803)

Just search stackoverflow for ajax async: false and you will find MANY good explanations on this. Everyone will discourage you from using async:false. Here's is a great explanation: https://stackoverflow.com/a/14220323/3112803

I gave the exact code a try but unfortunately it didn't do anything at all for me, not even display one quote.. Which I don't understand why? I tried putting an alert('works') before and after the ajax call, both fired off... but nothing appended? — pashOCONNOR, Mar 24 '14 at 22:47
OOPS! Sorry I copied your code word for word before your edits and missed adding the datatype myself >_<; works flawlessly now! — pashOCONNOR, Mar 24 '14 at 23:00

Haresh Vidja · Answer 2 · 2016-11-25T05:34:21.587

Very interesting methods provided by jQuery when you are executing loops of asyncroniouse request and detect all ajax request completed or not. It is possible by using

var users=["a","b","c","d","e","f","g","h"];

var async_request=[];
var responses=[];
for(i in users)
{
    // you can push  any aysnc method handler
    async_request.push($.ajax({
        url:'', // your url
        method:'post', // method GET or POST
        data:{user_name: users[i]},
        success: function(data){
            console.log('success of ajax response')
            responses.push(data);
        }
    }));
}


$.when.apply(null, async_request).done( function(){
    // all done
    console.log('all request completed')
    console.log(responses);
});

Here $.when provides a way to execute callback functions based on zero or more objects, usually Deferred objects that represent asynchronous events.

apply() converts array elements as different arguments in function

$.done is call function after all async. request are completed.

Take noteice: the .done() is also called when one of the ajax calls fails. This is not always what you would like to happen. — Koen van der Linden, Feb 14 '17 at 12:53

score 0 · Answer 3 · answered Mar 04 '19 at 18:06

You can use ES6 async/await Promises like this

function fromServer(){
  return new Promise((resolve, reject) => {
     $.ajax({
        url:'http://whisperingforest.org/js/getQuote.php',
        async: false,
        dataType: 'jsonp',
        success:function(data){
             resolve(data)
        }
    });
  })
}
var totalQuotes = 0;
async function domManipulation(){
    while (counter < 6) {
        var data = await fromServer();
        $('.quoteList').append('<li>' + data +'</li>');
        totalQuotes++;
    }
}

domManipulation()

JSFIDDLE

Javascript - AJAX request inside loops

3 Answers3

Linked