使得JSF Ajax请求的时候显示加载进度 [英] Show loading progress when making JSF Ajax request

问题描述

如何才能表现出一定的加载信息使用作出请求时，＆LT; F：？AJAX＆GT;

How can I show some loading message when making request using <f:ajax>?

推荐答案

如果你还没有使用一个第三方组件库，它可能已经有一个现成的组件的说明，如的PrimeFaces 与<一个href="http://www.primefaces.org/showcase/ui/ajax/status.xhtml"><$c$c><p:ajaxStatus>,那么你可以使用JSF提供的JavaScript <一href="http://javaserverfaces.java.net/nonav/docs/2.0/jsdocs/symbols/jsf.ajax.html#.addOnEvent"><$c$c>jsf.ajax.addOnEvent()功能（最终也<一href="http://javaserverfaces.java.net/nonav/docs/2.0/jsdocs/symbols/jsf.ajax.html#.addOnError"><$c$c>jsf.ajax.addOnError())挂钩函数的AJAX事件。

If you're not already using a 3rd party component library which could already have a ready-made component for that, such as PrimeFaces with <p:ajaxStatus>, then you can use the JSF-provided JavaScript jsf.ajax.addOnEvent() function (and eventually also jsf.ajax.addOnError()) to hook a function on ajax events.

下面是一个基本的开球例如：

Here's a basic kickoff example:

<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规范：

此外，JavaScript API提供了 jsf.ajax.addOnEvent 的功能，可用于注册一个JavaScript函数   当任何Ajax请求/响应事件发生时将得到通知。请参阅14.4节注册回调   功能的更多细节。该 jsf.ajax.addOnEvent 函数接受一个JavaScript函数的参数，这将是   通知时，在任何Ajax请求/响应事件循环发生的事件。实现必须   确保被注册，必须调用按照概述的事件JavaScript函数   第表14-3事件。

13.3.5.2 Monitoring Events For All Ajax Requests

The JavaScript API provides the jsf.ajax.addOnEvent function that can be used to register a JavaScript function that will be notified when any Ajax request/response event occurs. Refer to Section 14.4 "Registering Callback Functions" for more details. The jsf.ajax.addOnEvent function accepts a JavaScript function argument that will be notified when events occur during any Ajax request/response event cycle. The implementation must ensure the JavaScript function that is registered must be called in accordance with the events outlined in Section TABLE 14-3 "Events".

您可以抓住一些很酷的AJAX装载机的GIF免费从 http://www.ajaxload.info ，顺便说一句。

You can grab some cool ajax loader gifs for free from http://www.ajaxload.info, by the way.

这篇关于使得JSF Ajax请求的时候显示加载进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！