原型框架的Ajax.Request掛起多個調用jsp頁面

Question

我有一個關於使用prototype.js 1.7版多個ajax請求的問題。

這裏是我寫的，使Ajax調用該函數：

function checkClonability(element) { 

var strUrl = "/dssweb/js/ajaxdbdispatcher"; 

var rowIndex = element.id.split('_')[1]; 
var tabschema = $('tabschema_' + rowIndex).innerHTML.trim(); 
var tabname = $('tabname_' + rowIndex).innerHTML.trim(); 
var op = <%=AjaxDbDispatcher.CLONE_TABLE_COMPARE%>; 

workLevel(rowIndex, 'run'); 

var qb = new QueryStringBuilder(); 
qb.addParameter('op', op); 
qb.addParameter('dbsource', 'UAT'); 
qb.addParameter('dbtarget', 'PROD'); 
qb.addParameter('tabschema', tabschema); 
qb.addParameter('tabname', tabname); 

new Ajax.Request(strUrl, { 
    method:'post', 
    asynchronous: true, 
    parameters: qb.toString(), 
    onSuccess: function(transport){ 
     var json = transport.responseText.evalJSON(); 

     if(json.equals) { 
      workLevel(rowIndex, 'ok'); 
      element.onclick = ''; 
     } else { 
      element.checked = false; 
      element.disabled = true; 
      workLevel(rowIndex, 'ko', 'La tabella ha un tracciato diverso in produzione!'); 
     } 
    }, 
    onFailure: function(err){ 
     workLevel(rowIndex, 'none', 'Si è verificato un errore durante la verifica.'); 
    } 
}); 

}

的strUrl是一個Java servlet，使一個數據庫表的兩種不同的環境之間的比較。 我的頁面顯示了選擇它們的表格和複選框列表。 該功能由複選框上的onclick事件觸發。一切工作都可以正常進行，但如果我嘗試檢查多個複選框而無需等待第一個呼叫的結束，它就會掛起。 我在Chrome 8和IE6上試過了，我正在使用Apache Tomcat 6.

任何幫助都會被認可。

Answer 1

當用戶快速點擊兩次時，發送兩次ajax請求。把一些變量並在其上測試，如果Ajax調用處理不當結束，將停止第二次執行：

var running = true; 
function clickHandler() { 
    if (running) return; 
    running = true; 

    /** Some stuff here ***/ 

    new Ajax.Request(strUrl, { 
     method:'post', 
     asynchronous: true, 
     parameters: qb.toString(), 
     onSuccess: function(transport){ 
      var json = transport.responseText.evalJSON(); 

      if(json.equals) { 
       workLevel(rowIndex, 'ok'); 
       element.onclick = ''; 
      } else { 
       element.checked = false; 
       element.disabled = true; 
       workLevel(rowIndex, 'ko', 'La tabella ha un tracciato diverso in produzione!'); 
      } 
     }, 
     onFailure: function(err){ 
      workLevel(rowIndex, 'none', 'Si è verificato un errore durante la verifica.'); 
     }, 
     onComplete: function() { running = false; } 
    }); 

} 

注意：注意確保有關的onComplete回調，檢查手冊，以確保運行將被設置爲false每當ajax通話結束。

Answer 2

好吧，我想我解決了我的問題，這個'解決方法'類。 它syncronizes電話，讓他​​們的順序：

var Syncro = Class.create(
    { 
     initialize: function(params) { 
      // Check for Prototype class 
      if(typeof Prototype=='undefined') { 
       throw("JSSyncro requires the Prototype JavaScript framework to run."); 
      } 

      //handle input parameters 
      this.delay = (typeof params.delay == 'undefined' ? 1000 : params.delay); 

      this.allowDuplicates = (
        typeof params.allowDuplicates=='undefined' || typeof params.allowDuplicates!='boolean' 
         ? true : params.allowDuplicates); 

      this.order = (
        typeof params.order=='undefined' || ['fifo','lifo'].indexOf(params.order)==-1 
         ? 'fifo' : params.order); 

      this.operations = []; 
      this.terminated = true; 

      // private - check for duplicate operations in the stack 
      this.alreadyExists = function(operation) { 
       var exists = false; 

       this.operations.each(
         function(element) { 
          if(element.toString()==operation.toString()) { 
           exists = true; 
           return; 
          } 
         } 
       ); 

       return exists; 
      }; 

      //private - run operations sequentially 
      this.runSyncronized = function() { 
       function nextTimeout(instance) { 
        setTimeout(
          function(){ 
           instance.runSyncronized(); 
          }, 
          this.delay); 
       } 

       if(this.operations.length>0) { 
        if(this.terminated) { 
         this.terminated = false; 

         var cmd = (this.order=='fifo' 
          ? this.operations.shift() : this.operations.pop()); 

         cmd(); 
        } else { 
         nextTimeout(this); 
        } 
       } else { 
        this.terminated = true; 
       } 
      }; 
     }, 

     // public - wakeup the executor and run the following operation if the previous is terminated 
     setTerminated: function(boolValue) { 
      this.terminated = boolValue; 
     }, 
     // public - set the operation to execute sequentially 
     execute: function(operation) { 
      if(this.allowDuplicates || !this.alreadyExists(operation)) { 
       this.operations.push(operation); 

       this.runSyncronized(); 
      } 
     } 
    } 
); 

Syncro的類主要有兩個方法：

執行 - 在那裏你可以傳給你必須匿名函數 setTerminated內執行該功能 - setter方法有用設置異步操作已終止（即在onComplete方法中設置使用ajax完成的異步調用）。

checkboxClick函數顯然是在我的複選框的onclick事件中調用的。

希望這可能會有用。

再見。

只是在構造函數的進化。 初始參數（在構造函數中傳遞）在數組中定義： new Syncro（{[delay：1000] [，allowDuplicates：true | false] [，order：'lifo'|'fifo']}）;