使用< f:ajax>?提出请求时,如何显示一些加载消息?
如果您还没有使用第三方组件库,该库可能已经有了一个现成的组件,例如
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 Monitoring Events For All Ajax Requests
The JavaScript API provides the
jsf.ajax.addOnEventfunction 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. Thejsf.ajax.addOnEventfunction 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”.
您可以从http://www.ajaxload.info免费获取一些酷的ajax loader gifs.