Eines der Hauptprobleme, das dem Endbenutzer Kopfschmerzen bereiten kann, wenn die Webanwendung Ajax unterstützt, ist die Anzeige, ob etwas läuft oder passiert. Die meisten Webanwendungen berücksichtigen diesen Indikator nicht, sodass der Endbenutzer das Formular möglicherweise mehrmals sendet oder abbricht oder einen Vorgang auf der Website auf unsachgemäße Weise ausführt. Ein solches Szenario kann dazu führen, dass die Anwendung falsch reagiert.
Innerhalb von JSF 2.0 können Sie Ihre Ajax-Anfrage überwachen, sobald Sie sie verwendet haben f:ajax’s onevent Attribut. Der Wert dieses Attributs muss eine JavaScript-Funktion sein. JSF ruft diese Funktion in jeder Phase einer Ajax-Anfrage auf: Beginn, Abschluss und Erfolg. Während die Anwendung einen bestimmten Prozess ausgeführt hat, zeigt die Anwendung eine animierte Fortschrittsform an. Wenn der Ajax-Aufruf zurückkehrt, blendet die Anwendung die Fortschrittsform aus.
Lesen Sie auch:
- JSF 2-Tutorials
- JSF-Tutorials
- Einführung in JSF
Die genannten Phasen haben folgende Bedeutung:
- beginnen: Kurz bevor JSF den Ajax-Aufruf an den Server sendet.
- Erfolg: Kurz nachdem die Ajax-Antwort gerendert wurde.
- vollständig: Für einen erfolgreichen Aufruf ruft JSF diese Methode direkt nach dem Ausführungsteil des Lebenszyklus auf, was per Definition direkt vor dem Renderteil bedeutet. Bei Fehlern ruft JSF diese Methode unmittelbar vor dem Aufruf des Fehlerhandlers auf. Normalerweise legen Sie den Fehlerhandler entweder mit fest ein Ereignis Attribut von f:ajax oder mit den JSF-JavaScript-APIs.
JSF besteht a Daten Objekt für jede JavaScript-Funktion, die bei einem Ajax-Aufruf über registriert ist f:ajax’s ein Ereignis Attribut. Die Attribute dieses Datenobjekts sind in den folgenden Zeilen aufgeführt:
- Status: Der Status des aktuellen Ajax-Aufrufs. Muss einer sein: beginnen, abgeschlossen oder Fehler.
- Typ: Entweder Ereignis oder Status.
- Quelle: Das DOM-Element, das die Quelle des Ereignisses ist.
- AntwortXML: Die Antwort auf die Ajax-Anfrage. Dieses Objekt ist in der Anfangsphase der Ajax-Anfrage undefiniert.
- Antworttext: Die XML-Antwort als Text. Dieses Objekt ist auch in der Anfangsphase der Ajax-Anfrage undefiniert.
- Antwortcode: Der numerische Antwortcode der Ajax-Anfrage. Wie AntwortXML Und Antworttextdieses Objekt ist in der Anfangsphase der Ajax-Anfrage undefiniert.
1. Die Aussicht
index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<script>
function monitor(data){
var loading = document.getElementById("image");
if(data.status == "begin"){
loading.style.display = "block";
}
else if(data.status == "success"){
loading.style.display = "none";
}
}
</script>
<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
<f:view>
<h1>JavaBeat JSF 2.2 Examples</h1>
<h2>JSF2 Ajax Monitoring Example</h2>
<h:form prependId="false">
<h:inputText id="input" value="#{indexBean.message}"/>
#{' '}
<h:commandButton value="Display Text" action="#{indexBean.action}">
<f:ajax execute="@this input" render="output" onevent="monitor"></f:ajax>
</h:commandButton>
#{' '}
<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
<h:graphicImage id="image" value="#{resource('images:ajax-loader.gif')}" style="display:none;"></h:graphicImage>
</h:form>
</f:view>
</h:body>
</html>
2. Verwaltete Bohne
IndexBean.java
package net.javabeat.jsf;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class IndexBean {
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String action() throws Exception{
Thread.sleep(6000);
System.out.println(message);
return "";
}
}
3. Der Bereitstellungsdeskriptor (web.xml)
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5" metadata-complete="true"> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2 </description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.faces.application.CONFIG_FILES</param-name> <param-value>/WEB-INF/faces-config.xml</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
4. JSF 2 Ajax-Fortschrittsbalken-Demo
Die folgenden Schnappschüsse zeigen Ihnen, wie Sie die Ajax-Anfrage/-Antwort überwachen können.
- Die Eingabe wurde vom Benutzer mit der gewünschten Nachricht gefüllt.
- Dennoch wurde noch keine Ajax-Anfrage initiiert.
- Der Benutzer hat die Aktion Text anzeigen aktiviert.
- Die Ajax-Anfrage wurde initiiert, sobald die Aktion aktiviert wurde.
- Die Aktion (Text anzeigen) bietet eine f:ajax onevent Attribut.
- Das JSF-Framework ruft die JavaScript-Funktion (Monitor) in jeder Phase (Anfang, Abschluss und Erfolg) auf.
- Die Meldung wurde angezeigt.
(wpdm_file id=32)
