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

Question

使用 发出请求时如何显示一些加载消息？

Answer 1

如果您尚未使用第三方组件库，该库可能已经有现成的组件，例如 PrimeFaces 与 ，那么您可以使用 JSF 提供的 JavaScript faces.ajax.addOnEvent() 函数（最终还有 faces.ajax.addOnError()< /a>) 挂钩 ajax 事件上的函数。

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

<script>
    faces.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;" />

另请参阅 13.3.5.2 rel="nofollow noreferrer">Jakarta Faces 4.0 规范：

13.3.5.2 监控所有 Ajax 请求的事件

JavaScript API 提供了faces.ajax.addOnEvent 函数，可用于注册 JavaScript 函数
当任何 Ajax 请求/响应事件发生时都会收到通知。请参阅第 14.4 节“注册回调
功能”了解更多详细信息。 faces.ajax.addOnEvent 函数接受 JavaScript 函数参数，该参数将
在任何 Ajax 请求/响应事件周期期间发生事件时收到通知。实施必须
确保注册的 JavaScript 函数必须根据中概述的事件进行调用
表 14-3 节“事件”。

注意：如果您仍在使用 JSF 3.0 或更早版本，请使用 jsf.ajax 命名空间，而不是 faces.ajax，如 jsf.ajax.addOnEvent( ...）。

Answer 2

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

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