原型框架的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上嘗試過，並且正在使用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回調，請檢查手冊以確保每當ajax調用結束時，運行都會設置為false。

Answer 2

好的，我想通過“解決方法”課程解決了我的問題。 它同步呼叫並使它們順序：

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類有兩個主要方法：

execute-可以傳遞必須在匿名函數內執行的函數的位置setTerminated-一種setter方法，用於設置異步操作已終止（即，在onComplete方法中設置使用ajax完成的異步調用）。

在我的復選框的onclick事件中，顯然會調用checkboxClick函數。

希望這會有用。

再見

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