jQuery AJAX call + PHP: как это работает?

Question

Вот часть моего 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);
        }
    });  

Как вы можете видеть, я делаю три поста AJAX и затем каким-то образом получаю результат.это:

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')

или

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')

Если это происходит на первом, то это хорошо.Если это на втором, как я могу сделать это как первый?

Answer 1

A JAX равен Асинхронный .
Метод $.ajax возвращается немедленно;он не ожидает ответа от сервера.

Через некоторое время после завершения выполнения всего кода обратные вызовы будут выполняться в любом порядке, в котором отвечает сервер.

Answer 2

Я думаю, что вы могли бы использовать цепочку обратного вызова - это не мой код, но я сохранил его ранее из предыдущего вопроса stackoverflow.

$('#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, reportsCompleted, 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/