每次 Ajax 调用（之前和之后）的 Javascript

Posted 2023-02-22

【中文标题】每次 Ajax 调用（之前和之后）的 Javascript

【英文标题】：Javascript on (before and after) every Ajax-call

【发布时间】：2013-05-04 00:16:51

【问题描述】：

由于我正在使用TinyMCE（请不要进入“Primefaces 有编辑器”或类似内容），我需要在每次Ajax-call 之前和之后执行一小段javascript。我不想为此编辑每个Ajax-call，因为有很多（这样做对于任何未来的维护都是不好的做法）。

在页面上执行Javascript 之前和之后的任何Ajax-调用的最优雅的解决方案是什么？

注意：我正在为 TinyMCE-textarea 使用自定义 composite。这个对象的任何事件也足够了。但请记住，实际的 Ajax-trigger 可能由完全不同的对象调用（尽管仍然可以重新渲染 composite）。

【参考方案1】：

JSF 的<f:ajax> 标记有一个onevent 属性，用于在JSF 应用程序中执行AJAX 任务。基本上，它指定了一个被调用三次的 JavaScript 函数：在发送 AJAX 调用之前、接收到 AJAX 响应之后以及更新 html DOM 之后。正是出于这个目的，PrimeFaces 将这些回调分别拆分为 onstart、onsuccess、oncomplete 和 onerror。

为了不重复，你可以在How to re-execute javascript function after form reRender?的回答中找到用法示例。

【讨论】：

是的，我知道，但这意味着我需要编辑页面上的每个Ajax-call。正如我在问题中所说，我正在寻找一种避免这种情况的方法。例如：一个f:event，在页面上的每个Ajax-call 上触发。

在这种情况下，您可以研究 jsf.js 并构建几个 JS 辅助函数来发送 ajax 请求，而不是通过标签，而是通过 JavaScript。

嗯会考虑，没有默认的JSF-可以这么说？

我不知道。但出于您的原因，绝对值得研究编程 JS 方法。

【参考方案2】：

使用jsf.ajax.addOnEvent 处理程序。

jsf.ajax.addOnEvent(function(data) 
    switch(data.status) 
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is returned.
            break;

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.
            // In case you're interested in error handling, use jsf.ajax.addOnError handler.
            break;
    
);

只需将其放入所需页面的<h:body> 中的<h:outputScript target="head"> 包含的JS 文件中即可。这将确保它在 JSF 自己的包含 jsf 命名空间的 jsf.js 之后加载。

【讨论】：

我在使用 jsf.ajax.addOnEvent 时遇到了一个我无法解决的问题，你能看看它吗（更新问题）？

显然您没有使用 <f:ajax> 来触发 ajax 调用。

好吧，看来我误解了这个功能。认为它也会在actionListeners 上执行。将相应地更改我的代码，再次感谢。

这与你是否使用动作监听器无关。只需在命令组件中嵌套一个<f:ajax>。

我很惊讶，尽管您明确询问如何监听 ajax 请求，而您根本没有触发 ajax 请求。