发出 JSF Ajax 请求时显示加载进度

Posted 2023-02-22

【中文标题】发出 JSF Ajax 请求时显示加载进度

【英文标题】：Show loading progress when making JSF Ajax request

【发布时间】：2011-12-14 09:58:27

【问题描述】：

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

【参考方案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。

【讨论】：

@BalusC，你的回答很棒！但我想知道这是否可以选择性地应用，即。它是否可能仅适用于某些 ajax 组件，而应忽略其他组件？

这是一个基本的启动示例： 确实。这非常有效！

【参考方案2】：

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

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