JSF 2.0 中如何处理 AJAX 请求？答案

【问题标题】：How is AJAX request handled in JSF 2.0?JSF 2.0 中如何处理 AJAX 请求？
【发布时间】：2012-05-18 16:29:45
【问题描述】：

我正在尝试类似下面的东西--

<h:commandButton id="btnOK">
     <f:ajax event="action" execute="@this" render="idHeader"       
listener="#{myBean.actionSubmit()}"/>
</h:commandButton>

我希望当 ajax 请求完成时，在 UI 中进行一些处理。我正在使用以下 jQuery 代码：

$(document).ajaxComplete(function() {
    $.modal.close();
});

但我的问题是 jQuery 方法根本没有被触发。我想知道 JSF ajax 提交是否会触发 ajaxComplete 事件？？

【问题讨论】：

我的 onevent javascript 函数中的这种“成功”状态存在一些问题。似乎除了IE之外的所有浏览器都没有问题，并且在它返回成功状态后重新渲染组件。 IE 虽然在返回成功状态后重新渲染。如果您试图从您的 javascript 操作重新渲染的组件中的某些内容，这绝对是一个问题。虽然其他所有浏览器都运行良好...我还没有看到解决这个 IE 问题的方法。

标签： jquery jsf-2

【解决方案1】：

标准的 JSF impl 不使用 jQuery API 来发送 ajax 请求。 JSF 使用它自己的内部 API，您可以在自动包含的 jsf.js 文件中找到它。所以 jQuery jQuery.ajaxComplete() 永远不会被调用。只有在使用 jQuery 的 $.ajax()（及其快捷方式 $.get()、$.post() 等）时才会调用它。只有基于 jQuery 的组件库才使用它们，例如带有 <p:commandXxx> 和 <p:ajax> 的 PrimeFaces。对于标准的 JSF <f:ajax>，您需要使用 JSF 自己的 jsf.ajax.addOnEvent() 处理程序，或 <f:ajax> 的 onevent 属性。

在你的特殊情况我认为onevent 属性很简单：

<f:ajax ... onevent="btnOKhandler" />

与

function btnOKhandler(data) {
    if (data.status == 'success') {
        $.modal.close();
    }
}

data.status 可以有 3 个值：begin、complete 和 success。另见JSF specification 的表 14-4 和 14-3。

另见：

Javascript on (before and after) every Ajax-call

【讨论】：

【解决方案2】：

这对我有用 $(document).ajaxComplete();

RichFaces.jQuery(document).on( 'ajaxcomplete', function(event, xhr, settings){   
     console.log(event, xhr, settings);
      // event, undefined, undefined
})

【讨论】：

这是针对 RichFaces 的，而不是普通的 JSF！