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

Question

如何在使用<f:ajax>进行请求时显示一些加载信息？

- anfy2002us

Answer 1

如果您尚未使用第三方组件库，该库可能已经有一个现成的组件，例如PrimeFaces与<p:ajaxStatus>，那么您可以使用JSF提供的JavaScript faces.ajax.addOnEvent()函数（以及最终也可以使用faces.ajax.addOnError()）来挂接一个函数到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;" />

请参阅Jakarta Faces 4.0规范的13.3.5.2部分：

13.3.5.2 监控所有Ajax请求的事件

JavaScript API提供了faces.ajax.addOnEvent函数，可用于注册JavaScript函数，该函数将在发生任何Ajax请求/响应事件时通知。有关更多详细信息，请参见第14.4节“注册回调函数”。faces.ajax.addOnEvent函数接受一个JavaScript函数参数，该参数将在任何Ajax请求/响应事件周期中发生事件时得到通知。实现必须确保按照第TABLE 14-3“事件”中概述的事件调用注册的JavaScript函数。

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

- BalusC

---

@BalusC，你的回答很棒！但我想知道这个方法是否可以选择性地应用，也就是说是否可以只应用于某些Ajax组件，而忽略其他组件？ - akelec

这是一个基本的启动示例：确实。这完美地运作！ - alexander

Answer 2

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

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

- Milo van der Zee