Multiple ajax requests

Question

I'm making multiple ajax request by encapsulate in a for-loop:

for(var o = 1; o <= 2; o++)
                {
                    $.ajax({
                        type: 'GET',
                        url: 'lib/terrain.php',
                        dataType: 'html',
                        data: {o: o},
                        success: function(data) {
                            var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
                            angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
                            console.log(data);
                        },
                        error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    k=o;                
                }

This get's information about different objects from my backend:

if(isset($_GET['o']))
{
    $object_query = mysql_query("SELECT * FROM objects");
    $objects = array();
    while($object_row = mysql_fetch_row($object_query))
    {
        $objects[] = $object_row;   //Information about objects
    }

    $count_objects = count($objects);   //Count how many objects it is
    $slump_objects = rand(1, $count_objects);   //Sell of which objects that shoul be viewd at the map.

    var_dump($objects[$slump_objects]);
}

As you can see, I'm making the ajax-call to my backend twice. The problem I have is that sometimes it only get ONE value from my backend, instead of two. Sometimes it get's both the values, which is correct. BUt the problem is that sometimes it only get's one value, and the other value is NULL.

Why is that?

The key thing to remember about AJAX is that it is asynchronous. Your loop doesn't wait until one call is done before starting the next call. — Jay Blanchard, Aug 28 '14 at 12:38
@JayBlanchard: How can I make the loop to wait until the call is done? — user500468, Aug 28 '14 at 12:40
As always... stop using `mysql_*`. The extension is dated and, more importantly, ***deprecated***. Switch to `PDO` or `mysqli_*` instead (note the `i`, which stands for _improved_). — Elias Van Ootegem, Aug 28 '14 at 12:41
You cannot make the loop wait, at least not in a way that would be valuable here because the loop has no idea when the AJAX request responds. You should do your second AJAX request in the `done()` method of your first AJAX request. — Jay Blanchard, Aug 28 '14 at 12:42
#user500468 You can use jquery `Deferred` object to build queue of requests — hindmost, Aug 28 '14 at 12:42

score 2 · Answer 1 · edited May 11 '15 at 09:25

As ajax is asynchronous, your loop will complete immediately, instead you should make your ajax function recursive, calling its self from the done callback:

function doAjax(){
    var total = 2;
    var counter = 0;

    function recursiveAjax(){

        $.ajax({
            //...
            done:function(){
                counter++;
                //call again
                if(counter < total) recursiveAjax();
            }
        });
    }

    //call the first time
    recursiveAjax();
}

Rimas · Accepted Answer · 2014-08-28T13:11:00.567

The error is in your PHP code:

$slump_objects = rand(1, $count_objects);   //Sell of which objects that shoul be viewd at the map.

var_dump($objects[$slump_objects]);

If $slump_objects gets value equal to $count_objects (array size) then var_dump($objects[$slump_objects]) returns NULL.

PHP Array starts at index 0, and last index is ($count_objects-1), so change one of statements to:

 $slump_objects = rand(0, $count_objects-1);

or

 var_dump($objects[$slump_objects-1]);

score 0 · Answer 3 · answered Aug 28 '14 at 12:52

Here is an example of using done() to make the second call - http://api.jquery.com/jquery.ajax/

$.ajax({
    type: 'GET',
    url: 'lib/terrain.php',
    dataType: 'html',
    data: {o: 1},
}).done(function(data) {
    var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
    angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
    console.log(data);
    $.ajax({
        type: 'GET',
        url: 'lib/terrain.php',
        dataType: 'html',
        data: {o: 2},
    }).done(function(data) {
        var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
        angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
        console.log(data);
    }).fail(function() {
        function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
    })
}).fail(function() {
    function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
});

Of course this could be done a lot more neatly, this is just to give you an idea of the technique.

I get this error with this code: SyntaxError: function statement requires a name — user500468, Aug 28 '14 at 13:02
As I said, this is an example just to show the technique. I don't have a way to test this with your AJAX. — Jay Blanchard, Aug 28 '14 at 13:14

score 0 · Answer 4 · answered Aug 28 '14 at 13:08

Here you are making asynchronous calls means your loop does wait for the first call to be complete before doing the second. And some browsers ignores parallel Ajax call to the exact same url. So you can try changing the url by just appending the value of your loop count.

for(var o = 1; o <= 2; o++)
{
    $.ajax({
        type: 'GET',
        url: 'lib/terrain.php?count='+o,
        dataType: 'html',
        data: {o: 1},
    }).done(function(data) {
        var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
        angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
        console.log(data);    
    }).fail(function() {
        function(xhr, ajaxOptions, thrownError) { alert('Error:'+thrownError); }
    });
}

Multiple ajax requests

4 Answers4