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：它是如何工作的？

回答

相關問題