多個aSync ajax調用jquery

我正在使用ajax加載頁面內的組件的PHP應用程序。更重要的是，這些模塊/組件假設按照這樣的順序加載，如果之前的加載失敗，那麼後面的加載也會失敗。多個aSync ajax調用jquery

換句話說，頁面加載，使ajax調用，並收到一個json編碼的響應。如果響應是「SUCCESS」，它會進行第二次調用並接收另一個json響應。再次，如果第二個響應是「SUCCESS」，它會進行第三個呼叫等等。假設發生約8次，此時頁面被認爲完全加載。

如果在此負載中，假設第三個請求收到「FAIL」響應，則放棄來自4-8的請求，並拋出錯誤消息。

我現在正在實現這一目標的方式是，通過進行第一個呼叫，等待響應並在第一個呼叫中進行第二個呼叫。

爲了把這個參考，這裏是代碼的一部分：

$.get(WEB_ROOT+'/process/createKeywords', {}, function(keywordsResponse) { 
    $('#createKeywords').parent().children(0).children(0).hide(); 
    if (keywordsResponse.RESPONSE == "SUCCESS") { 
     $('#createKeywords').html(img); 
     $('#getTraffic').parent().children(0).children(0).show(); 

     $.get(WEB_ROOT+'/process/getTraffic', {}, function(trafficResponse) { 
      $('#getTraffic').parent().children(0).children(0).hide(); 
      if (trafficResponse.RESPONSE == "SUCCESS") { 
       $('#getTraffic').html(img); 
       $('#getGoogleResults').parent().children(0).children(0).show(); 

       $.get(WEB_ROOT+'/process/getGoogleResults', {}, function(googleScrapeResponse) { 
        $('#getGoogleResults').parent().children(0).children(0).hide(); 
        if (googleScrapeResponse.RESPONSE == "SUCCESS") { 
         $('#getGoogleResults').html(img); 
         $('#resortResults').parent().children(0).children(0).show();

正如你能想象這會變得複雜和醜陋的非常快。有沒有人對我如何實現這樣的東西有任何建議？

來源

2012-03-01 Rohit Chopra

你能把所有的邏輯合併成一個AJAX調用嗎？ – Matthew 2012-03-01 20:52:05

不幸的是沒有。每個邏輯都依賴於上一步的完成。換句話說，getTraffic不能在沒有createKeywords的情況下運行，getGoogleResults不能得到GoogleResults等。 – 2012-03-01 20:53:11

對我來說，它看起來並不像你在隨後的請求中使用JavaScript中的任何數據（空的'{}'對象和靜態url），這使我相信所需的數據存儲在會話中。 – Matthew 2012-03-01 20:56:32

//setup an object to store the necessary info for each AJAX call 
var setup = [ 
    { 
     url  : WEB_ROOT + '/process/createKeywords', 

     //the callback will be run before the next AJAX request is made 
     callback : function (keywordsResponse) { 
      $('#createKeywords').parent().children(0).children(0).hide(); 
      if (keywordsResponse.RESPONSE == "SUCCESS") { 
       $('#createKeywords').html(img); 
       $('#getTraffic').parent().children(0).children(0).show(); 
      } 
     } 
    }, 
    { 
     url  : WEB_ROOT + '/process/getTraffic', 
     callback : function() { 
      $('#getTraffic').parent().children(0).children(0).hide(); 
      if (trafficResponse.RESPONSE == "SUCCESS") { 
       $('#getTraffic').html(img); 
       $('#getGoogleResults').parent().children(0).children(0).show(); 
      } 
     } 
    } 
]; 

//setup a function that recursively calls itself when the current AJAX request comes back successfully 
function doAJAX(index) { 
    var val = setup[index]; 
    $.getJSON(val.url, function (serverResponse) { 

     //run the specified callback for this AJAX request 
     val.callback(serverResponse); 

     //now check if the response is "SUCCESS" and make sure that another AJAX request exists in the `setup` object 
     if (serverResponse.RESPONSE == 'SUCCESS' && typeof setup[(index + 1)] != 'undefined') { 

      //since the last AJAX request was a success and there is another one set, run it now 
      doAJAX(index + 1); 
     } 
    }); 
} 

//run the first AJAX request by passing in zero (index) 
doAJAX(0);

這只是允許您爲連續的AJAX請求設置必要的變量。與url相關聯的callback將在下一個AJAX請求運行之前運行。

來源

2012-03-01 20:58:45 Jasper

這太棒了。感謝您花時間寫出實際的功能。欣賞它。 – 2012-03-01 21:45:54

歡迎你。 – Jasper 2012-03-01 21:51:01

您可能想要考慮將其設置爲操作對象的集合。每個對象都有一個URL，一個前置操作，一個後置操作和一個成功操作。設計一個彈出第一個動作的函數，執行它的預先動作，然後執行AJAX調用。在AJAX調用返回時，它執行後續操作，檢查是否成功，如果成功，則執行成功操作並調用其餘任務。這樣的系統非常靈活，可以適應任何數量的任務。

來源

2012-03-01 21:04:43 tvanfosson

多個aSync ajax調用jquery

回答

相關問題