jQuery AJAX调用+ PHP：它是如何工作的？

这里是我的一块的Javascript：jQuery AJAX调用+ PHP：它是如何工作的？

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

如果是第一个那么它的好。如果它在第二个，我怎么能使它像第一个？

来源

2011-05-15 Adam Ramadhan

这只是一个评论，不相关的问题，但你定义了'var twitter = ...'两次，一次在'// TWITTER'下并且在'// YAHOO'下再次定义＃ – 2011-05-15 15:08:55

@majid修复了我真正的代码谢谢！是的，我爱了stackoverflow – 2011-05-15 15:17:34

A JAX是异步。
$.ajax方法立即返回;它不会等待服务器回复。

在您的所有代码执行完一段时间后，回调将以服务器回复的任何顺序运行。

来源

2011-05-15 15:03:28 SLaks

asynchronous ca n被设置为false并且可以变成同步的。通过传递额外的参数'async：false;' – 2011-05-15 15:04:14

@Shatki：但它不应该。 – SLaks 2011-05-15 15:04:42

@shakti shigh我们该怎么做？不管怎样，谢谢！只是问问。 – 2011-05-15 15:04:54

我想你可以利用一个回调链 - 这不是我的代码，但我从之前的一个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 =（函数（）{ VAR numRequestToComplete， requestsCompleted，回调， 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/

来源

2013-05-30 16:12:50 0123456789

jQuery AJAX调用+ PHP：它是如何工作的？

回答

相关问题