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

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规范的第13.3.5.2节:

13.3.5.2监视所有Ajax请求的事件

JavaScript API提供了jsf.ajax.addOnEvent可用于注册JavaScript函数的函数,该函数将在发生任何Ajax请求/响应事件时得到通知.更多详细信息,请参见第14.4节"注册回调函数".该jsf.ajax.addOnEvent函数接受一个JavaScript函数参数,该参数将在任何Ajax请求/响应事件周期中发生事件时得到通知.实现必须确保必须根据表14-3"事件"中列出的事件调用已注册的JavaScript函数.

顺便说一句,您可以从http://www.ajaxload.info免费获取一些很酷的ajax loader GIF .