jQuery AJAX call + PHP: Comment ça marche?

Question

est ici un morceau de mon 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); 
     } 
    }); 

Comme vous pouvez le voir, je fais trois postes AJAX, puis-je obtenir en quelque sorte le résultat.

Je suppose qu'il fonctionne comme ceci:

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

ou

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

Si elle le fait sur le premier puis son bien. Si c'est sur la seconde, comment puis-je le faire comme le premier?

Answer 1

A JAX est Asynchrone. La méthode $.ajax retourne immédiatement; il n'attend pas que le serveur réponde.

Quelque temps après la fin de l'exécution de votre code, les rappels seront exécutés, quel que soit l'ordre dans lequel le serveur répond.

Answer 2

Je pense que vous pourriez utiliser une chaîne de rappel - ce n'est pas mon code, mais je l'ai fait enregistrer plus tôt à partir d'une question précédente de 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, 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/