Ajax.jspページへの複数の呼び出しでプロトタイプフレームワークのリクエストがハングアップする

Question

prototype.jsバージョン1.7を使用して複数の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は、2つの異なる環境間でのデータベーステーブルの比較を行い、Javaサーブレットである：ここで

私はAJAX呼び出しを行うために書いた関数です。 マイページには、選択するテーブルとチェックボックスのリストが表示されます。 この関数は、チェックボックスのonclickイベントによって起動されます。 1回の呼び出しですべてうまく動作しますが、最初の呼び出しの終了を待たずにいくつかのチェックボックスをチェックしようとするとハングアップします。 私はchrome 8とIE6で試しましたが、私はApache Tomcat 6で作業しています。

助けが必要です。

Answer 1

ユーザーがすぐに2回クリックすると、ajaxリクエストが2回送信されます。

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; } 
    }); 

} 

NB：いつでも実行がfalseに設定されます確認するためにマニュアルをチェックし、onCompleteのコールバックわから注意して、いくつかの変数およびAJAX呼び出しのhasntが終了した場合は、2番目の実行を停止します。その上にテストを置きますajax呼び出しが終了します。

Answer 2

私はこの「回避策」クラスで私の問題を解決したと思います。 これは、呼び出しをsyncronizesし​​、それらがシーケンシャルます

実行 - あなたはsetTerminated匿名関数 内で実行しなければならない関数を渡すことができる場所 - に便利なsetterメソッド：

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(); 
      } 
     } 
    } 
); 

シンクロクラスは、主に2つの方法があります非同期操作が終了したことを設定します（つまり、aComを使って非同期呼び出しをonCompleteメソッドに設定します）。

checkboxClick関数は、私のチェックボックスのonclickイベントで明示的に呼び出されます。

これは役に立ちそうです。

Bye。

コンストラクタでの進化。 初期のパラメータ（コンストラクタで渡される）は配列内に定義されます。 new Syncro（{[delay：1000] [、allowDuplicates：true | false] [、order： 'lifo' | 'fifo']}）;