Question

如何使用<f:ajax>发送请求时显示一些加载消息？

Answer 1

如果您尚未使用已经有现成组件的第三方组件库，例如PrimeFaces和<p:ajaxStatus>，那么您可以使用JSF提供的JavaScript jsf.ajax.addOnEvent()函数（最终还是jsf.ajax.addOnError()）将一个函数挂钩到ajax事件上。

这是一个基本的启动示例：

<script>
    jsf.ajax.addOnEvent(function(data) {
        var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
        var ajaxloader = document.getElementById("ajaxloader");

        switch (ajaxstatus) {
            case "begin": // This is called right before ajax request is been sent.
                ajaxloader.style.display = 'block';
                break;

            case "complete": // This is called right after ajax response is received.
                ajaxloader.style.display = 'none';
                break;

            case "success": // This is called when ajax response is successfully processed.
                // NOOP.
                break;
        }
    });
</script>

<img id="ajaxloader" src="ajaxloader.gif" style="display: none;" />

另见JSF 2.0 specification的第13.3.5.2节：

13.3.5.2监视所有Ajax请求的事件

JavaScript API提供了jsf.ajax.addOnEvent函数，可用于注册JavaScript函数   当任何Ajax请求/响应事件发生时将通知。请参见第14.4节“注册回叫”   功能“了解更多详情。 jsf.ajax.addOnEvent函数接受一个JavaScript函数参数   在任何Ajax请求/响应事件周期期间发生事件时通知。实施必须   确保必须根据中列出的事件调用已注册的JavaScript函数   表14-3“事件”。

顺便说一句，您可以免费从http://www.ajaxload.info获取一些很酷的ajax加载器GIF。

Answer 2

richfaces有一个非常容易使用的组件，我这样使用：

<a4j:status startText="" stopText="" onstart="showAjaxActive();" onstop="hideAjaxActive();"/>

在进行JSF Ajax请求时显示加载进度

2 个答案:

13.3.5.2监视所有Ajax请求的事件