如何在每次 a4j AJAX 响应后调用 JavaScript 函数？

Question

我正在使用 JSF w/Seam 开发一个 Web 应用程序。我希望能够在每次 ajax 响应后调用 JavaScript 函数。我正在寻找一种方法来做到这一点，而不需要在每个页面上的每个 commandLink/commandButton 上放置 oncomplete 属性。

我认为有一种方法可以设置 servlet 过滤器（拦截器？我对术语感到困惑）以将 JS 调用注入到每个响应中。我要调查一下。与此同时，如果有人有任何其他建议，我会洗耳恭听。

编辑：我认为 jQuery ajaxSuccess 方法可能是这里的方法，但我不确定如何实际使用它。我无法注册任何东西。我基本上想添加代码来获取来自任何来源的所有 ajax 请求，以便在成功时调用我的 JavaScript 方法。谁能告诉我正确的方法来做到这一点？我尝试了多种方法来执行此操作，包括将 jQuery("*").ajaxSuccess(function(){myFunction();}); 添加到我的模板 xhtml 文件的底部。

Answer 1

重写的答案：在修订历史记录中查看原始答案

您可以覆盖默认的send< XMLHttpRequest 的 /code> 方法，其中一个劫持 readystatechange 处理程序：

(function () 
{ 
    var xhrSend = XMLHttpRequest.prototype.send; 
    XMLHttpRequest.prototype.send = function  () 
     { 
        var handler = this.onreadystatechange; 
        this.onreadystatechange = function () 
        { 
            if (handler) {
                if (handler.handleEvent) handler.handleEvent.apply(xhr, arguments);
                else handler.apply(xhr, arguments);
            }
            if (this.readyState == 4) 
            { 
                // your oncomplete function here 
                this.onreadystatechange = handler; 
             } 
         }; 
        xhrSend.apply(this, arguments); 
    }; 
})(); 

编辑： 上述函数不适用于 jQuery 请求，因此其他库可能会失败以及。下面的修订通过 setTimeout hack 解决了这个问题，以延迟覆盖处理程序的代码。当然，对于 jQuery，您可以只使用 .ajaxSuccess() 全局处理程序，但对于具有类似行为的其他库，这将很有用。

(function() {
    function globalHandler() {
        if (this.readyState == 4) {
            // your oncomplete code here
        }
    }
    var xhrSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function() {
        var xhr = this;
        if (xhr.addEventListener) {
            xhr.removeEventListener("readystatechange", globalHandler);
            xhr.addEventListener("readystatechange", globalHandler, false);
        }
        else {
            function readyStateChange() {
                if (handler) {
                    if (handler.handleEvent)
                        handler.handleEvent.apply(xhr, arguments);
                    else
                        handler.apply(xhr, arguments);
                }
                globalHandler.apply(xhr, arguments);
                setReadyStateChange();
            }
            function setReadyStateChange() {
                setTimeout(function() {
                    if (xhr.onreadystatechange != readyStateChange) {
                        handler = xhr.onreadystatechange;
                        xhr.onreadystatechange = readyStateChange;
                    }
                }, 1);
            }
            var handler;
            setReadyStateChange();
        }
        xhrSend.apply(xhr, arguments);
    };
})();

http://jsfiddle.net/gilly3/FuacA/5/
我在IE7-9以及最新版本的Chrome和FF中测试了这一点

Answer 2

由于您使用的是 RichFaces，因此您可以简单地使用：

<a:status id="globalStatus" onstart="onRequestStart()" onstop="onRequestEnd()" />

Answer 3

使用 a4j:status 应该可以，但它必须位于 h:form 标记内：

<h:form id="randomForm" styleClass="edit">
        <a:status id="stateStatus"
         onstart="Richfaces.showModalPanel('waitBx'),document.getElementById('randomForm:search').disabled=true;"
         onstop="Richfaces.hideModalPanel('waitBx'),document.getElementById('randomForm:search').disabled=false;"
        styleClass="message" >
</a:status>

...... way more code  
</form> 

每次 ajax 调用后都会弹出一个等待图片并禁用搜索按钮。

有趣的是，至少在我们的代码中，这对于嵌套 a4j:region 中的任何内容都不起作用。

Answer 4

我认为这就是您正在寻找的： 在 jQuery 中使用全局 Ajax 处理程序