如何在每次a4j AJAX响应后调用JavaScript函数？ [英] How can I call a JavaScript function after every a4j AJAX response?

问题描述

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

I am working on a web app using JSF w/Seam. I want to be able to call a JavaScript function after every ajax response. I'm looking for a way to do this without putting an oncomplete attribute on every commandLink/commandButton on every page.

我认为有一种设置servlet过滤器的方法（拦截器？我得到的术语很混乱）将JS调用注入每个响应。我要调查一下。在此期间，如果有人有任何其他建议，我会全力以赴。

I think there's a way to set up a servlet filter (interceptor? I get the terms confused) to inject the JS call into each response. I'm going to look into that. In the meantime, if anyone has any other suggestions, I'm all ears.

编辑：我认为jQuery ajaxSuccess方法可能是去这里的方式，但我我不确定如何实际使用它。我无法注册任何东西。我基本上想要添加代码来从任何来源获取任何和所有ajax请求，以便成功调用我的JavaScript方法。有人能告诉我这样做的正确方法吗？我已经尝试了很多方法来做到这一点，包括添加 jQuery（*）。ajaxSuccess（function（）{myFunction（）;}）; 到底部我的模板xhtml文件。

I think the jQuery ajaxSuccess method might be the way to go here, but I'm not sure how to actually use it. I can't get anything to register. I basically want to add code to get any and all ajax requests from any source to call my JavaScript method on success. Can anyone show me the proper way to do this? I've tried a number of ways to do this, including adding jQuery("*").ajaxSuccess(function(){myFunction();}); to the bottom of my template xhtml file.

推荐答案

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

您可以覆盖默认发送 XMLHttpRequest 的方法，其中一个劫持 readystatechange 处理程序：

You could override the default send method of XMLHttpRequest with one that hijacks the readystatechange handler:

(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（）全局处理程序，但是对于具有类似行为的其他库，这将是有用的。

The above function doesn't work with jQuery requests, and so potentially it could fail with other libraries as well. The revision below addresses the issue with a setTimeout hack to delay the code that overrides the handler. Of course, with jQuery, you can just use the .ajaxSuccess() global handler, but for other libraries with similar behavior, this would be useful.

(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

http://jsfiddle.net/gilly3/FuacA/5/
I tested this in IE7-9, and the latest versions of Chrome and FF

这篇关于如何在每次a4j AJAX响应后调用JavaScript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！