jQuery AJAX call + PHP: How does it work?

Question

Here's a piece of my Javascript:

    // TWITTER
    var twitter = 
    {
        uid: '<?php echo $user['uid']; ?>',
        twitter: '<?php echo $user['twitter']; ?>'
    };

    $.ajax({  
        type: "POST",                    // Using the POST method  
        url: "/ajax/social/pull/twitter",      // The file to call  
        data: twitter,                  // Our data to pass  
        beforeSend: function(){
            $('#ajax-pull-twitter').html('<a rel="nofollow" target="_blank" href="#"><img style="position: relative; top: 4px; left: 50%;" src="/www-static/assets/images/ajax-loader.gif"></a>');
        },
        success: function(data) {           
            $('#ajax-pull-twitter').hide().fadeIn(3000).html(data);
        }
    });  

    // YAHOO
    var twitter = 
    {
        uid: '<?php echo $user['uid']; ?>',
        yahoo: '<?php echo $user['yahoo']; ?>'
    };

    $.ajax({  
        type: "POST",                    // Using the POST method  
        url: "/ajax/social/pull/yahoo",      // The file to call  
        data: twitter,                  // Our data to pass  
        beforeSend: function(){
            $('#ajax-pull-twitter').html('<a rel="nofollow" target="_blank" href="#"><img style="position: relative; top: 4px; left: 50%;" src="/www-static/assets/images/ajax-loader.gif"></a>');
        },
        success: function(data) {           
            $('#ajax-pull-yahoo').hide().fadeIn(3000).html(data);
        }
    });  

    // FACEBOOK
    var facebook = 
    {
        uid: '<?php echo $user['uid']; ?>',
        facebook: '<?php echo $user['facebook']; ?>'
    };

    $.ajax({  
        type: "POST",                    // Using the POST method  
        url: "/ajax/social/pull/facebook",      // The file to call  
        data: facebook,                  // Our data to pass  
        beforeSend: function(){
            $('#ajax-pull-twitter').html('<a rel="nofollow" target="_blank" href="#"><img style="position: relative; top: 4px; left: 50%;" src="/www-static/assets/images/ajax-loader.gif"></a>');              
        },
        success: function(data) {           
            $('#ajax-pull-facebook').hide().fadeIn(3000).html(data);
        }
    });  

As you can see, I'm doing three AJAX posts and then I somehow get the result.

I assume it works like this:

it calls ajax twitter
it calls ajax yahoo
it calls ajax facebook
* loading *
lets say yahoo load first
it loads result yahoo on $('#ajax-pull-yahoo')
twitter load second
it loads result twitter on $('#ajax-pull-twitter')
then facebook last.
it loads result twitter on $('#ajax-pull-twitter')

or

it calls ajax twitter
*loading and wait*
it loads result twitter on $('#ajax-pull-twitter')

it calls ajax yahoo
*loading and wait*
it loads result yahoo on $('#ajax-pull-yahoo')

it calls ajax facebook
*loading and wait*        
it loads result facebook on $('#ajax-pull-facebook')

If it does on the first then its good. If its on the second, how can I make it like the first?

Answer 1

I think you could utilize a callback chain - this is not my code, but I had it saved earlier from a previous stackoverflow question.

$('#button').click(function() {
var requestCallback = new MyRequestsCompleted({
    numRequest: 3
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the first callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the second callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the third callback');
        });
    }
});

});

var MyRequestsCompleted = (function() { var numRequestToComplete, requestsCompleted, callBacks, singleCallBack;

return function(options) {
    if (!options) options = {};

    numRequestToComplete = options.numRequest || 0;
    requestsCompleted = options.requestsCompleted || 0;
    callBacks = [];
    var fireCallbacks = function () {
        alert("we're all complete");
        for (var i = 0; i < callBacks.length; i++) callBacks[i]();
    };
    if (options.singleCallback) callBacks.push(options.singleCallback);



    this.addCallbackToQueue = function(isComplete, callback) {
        if (isComplete) requestsCompleted++;
        if (callback) callBacks.push(callback);
        if (requestsCompleted == numRequestToComplete) fireCallbacks();
    };
    this.requestComplete = function(isComplete) {
        if (isComplete) requestsCompleted++;
        if (requestsCompleted == numRequestToComplete) fireCallbacks();
    };
    this.setCallback = function(callback) {
        callBacks.push(callBack);
    };
};
})();

http://jsfiddle.net/subhaze/EN8nc/5/

Answer 2

AJAX is Asynchronous.
The $.ajax method returns immediately; it does not wait for the server to reply.

Some time after all of your code finishes executing, the callbacks will run, in whatever order the server replies.