ajax異步解決方案

我一次發送幾個ajax請求。但是，如您所知，結果到達時間與您發送請求的時間無關。現在，這給我一個問題。ajax異步解決方案

這是我現在面對的。

當我點擊使用HTMLElement製作的TAB按鈕時，它會發送ajax調用。

如果我點擊其他標籤後點擊標籤。兩個請求一起，我不知道哪一個可以先回應我。但不幸的是最後一次比第一次ajax請求更早到達。

然後，它出現我的html標記凌亂，所以我的問題是有沒有辦法讓Ajax調用以正常順序到達。

initialize : function() { //<!-- this function call AJAX request 
    this.getActivatedDeviceList(); 
    this.getDeActivatedDeviceList(); 
    this.getLostOrStolenDeviceList(); 
    this.getWaitingDeviceList(); 
},

getActivatedDeviceList : function() { 
    var url = "/monitor/device/getActivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/"; 
    this.loadTemplateAndFillUp(url, "#activatedDeviceTemplate", "#activatedDevice"); 
}, 

getDeActivatedDeviceList : function() { 
    var url = "/monitor/device/getDeactivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/"; 
    this.loadTemplateAndFillUp(url, "#deactivatedDeviceTemplate", "#deactivatedDevice"); 
}, 

getLostOrStolenDeviceList : function() { 
    var url = "/monitor/device/getLostOrStolenDeviceJson/" + TopMenu.CURRENT_TAB + "/"; 
    this.loadTemplateAndFillUp(url, "#lostOrStolenDeviceTemplate", "#lostOrStolenDevice"); 
}, 

getWaitingDeviceList : function() { 
    var url = "/monitor/device/getWaitingDeviceJson/" + TopMenu.CURRENT_TAB + "/"; 
    this.loadTemplateAndFillUp(url, "#waitingDeviceTemplate", "#waitingDevice"); 
}, 

loadTemplateAndFillUp : function(url, templateElement, appendElement) { 
    $.ajax({ //<!--This ajax call fires upon initialize function 
      url : url, 
      dataType : 'json', 
      beforeSend : function(xhr) { 
       $(appendElement).children(".zoom").attr("src", "/monitor/img/icon/loading.gif"); 
      }, 
      complete : function(xhr) { 
       setTimeout(
        function() { 
         $(appendElement).children(".zoom").attr("src", "/monitor/img/btn/btn_zoom.png") 
        }, 
        500 
      ); 

       $(appendElement).find("table.dataBoxTable").tableScroll({height:DeviceManager.TABLE_HEIGHT}); 
       DeviceManager.columnAutoFit(appendElement); 
       DeviceManager.addListenerAndHandler(); 
      }, 
      success : function(data) { 
       $(templateElement).tmpl(data).appendTo(appendElement); //<!--This jquery template get messed up by ajax arrival order. 
      }, 
      async: true 
    }); 
},

我希望你能理解我的英語。非常感謝你。

來源

2012-05-17 Patrick Jeon

我不想使用async：false，因爲我看不到加載圖像.. –

您可以試試這個http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-使用-jquery殺死最後一個請求並再次調用ajax – sathish

客戶端： 在客戶端有一個計數器，即說ajaxCounter = 0; 和ajax調用增加計數器，然後將計數器作爲參數發送到調用。

現在因爲有做了兩個電話，然後ajaxCounter是2

服務器端： 總是返回收到ajaxCounter作爲參數。所以對於第一次Ajax調用返回的將是1 因此，對於第二個Ajax調用返回的將是2

客戶端： 在客戶端檢查是否ajaxCounter == counterReturnedFromClient。如果相等，則執行完整的方法，否則忽略。

來源

2012-05-17 13:25:34 dhinesh

謝謝！而是使用計數器我使用ID生成來識別最後的ajax調用。 –

ajax異步解決方案

回答

相關問題