Ajax (Asynchronous JavaScript and XML) ist ein Entwicklungsverfahren, das zum Erstellen von Webseiten verwendet werden kann, über die Informationen an einen und von einem Server nur für die Abschnitte von Seiten übertragen werden, die von Benutzern bearbeitet werden, während der Rest der Seite weiterhin angezeigt wird. Mithilfe dieses Verfahrens können Webanwendungen schneller und effizienter gemacht werden, als wenn die gesamte Seite nach jeder Benutzeraktion erneut geladen werden müsste. Sie können eine EGL-gesteuerte JSP-Datei zum Aufrufen von 'onPreRenderFunction' für den JSF-Handler konfigurieren und eingeschränkte Aktualisierungen für die Seite bereitstellen.
Wenn für den JSF-Handler Informationen von der Seite benötigt werden, damit die Aktualisierungsanforderung durchgeführt werden kann, können Sie der Anforderung mehrere Parameter hinzufügen. Der JSF-Handler empfängt diese Parameter zusammen mit der Anforderung. Wie vorher werden die Variablen jedoch nicht im JSF-Handler auf die neuen Werte der Steuerelemente aktualisiert, an die die Variablen gebunden sind. Weitere Informationen finden Sie im Kapitel Eine Seite mit einer Aktualisierungsanforderung aktualisieren.
Mit der Systemfunktion 'J2EELib.getQueryParameter()' werden die Parameter von der Ajax-Anforderung abgerufen, sofern vorhanden. Sie können diese Funktion auch zum Ermitteln, ob die Funktion 'onPreRenderFunction' infolge einer Ajax-Aktualisierungs- oder Ajax-Übergabeanforderung aufgerufen wurde, verwenden, indem Sie den Wert des Parameters '$$ajaxmode' prüfen. Wenn der Wert nicht NULL ist, bedeutet dies, dass die Funktion infolge einer Ajax-Aktualisierungs- oder Ajax-Übergabeanforderung aufgerufen wurde:
if (J2EELib.getQueryParmeter("$$ajaxmode") == null)
//Not the result of an AJAX refresh or submit request
//May be the result of an AJAX external request or
else
//The result of an AJAX request.
end
In diesem Beispiel wird eine Ajax-Aktualisierungsanforderung verwendet, um einfache mathematische Operationen wie eine Berechnungsfunktion durchzuführen. Auf der Seite werden zwei Eingabesteuerelemente und ein Kombinationsfeld mit mathematischen Operationen angezeigt. Durch die Ajax-Anforderung, ausgelöst vom Kombinationsfeld, werden die ausgewählte Operation und die zwei Eingabesteuerelemente an 'onPreRenderFunction' für den JSF-Handler übergeben, wodurch die mathematische Operation durchgeführt und ein Ausgabesteuerelement aktualisiert wird, mit dem die Antwort angezeigt wird.
Die Seite könnte wie im folgenden Beispiel aussehen:

Im Folgenden ist der Code der JSP-Datei aufgeführt:
<html>
<head>
<title>calculatorPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="theme/stylesheet.css"
title="Style">
</head>
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{calculatorPage._preRender}"
postRender="#{calculatorPage._postRender}">
<h:form id="form1" styleClass="form">
<TABLE>
<TBODY>
<tr>
<td align="left">Field1:</td>
<td style="width:5px"></td>
<td>
<h:inputText id="input1" value="#{calculatorPage.field1}"
binding="#{calculatorPage.field1_Ref}" styleClass="inputText">
</h:inputText>
</td>
</tr>
<tr>
<td align="left">Field2:</td>
<td style="width:5px"></td>
<td>
<h:inputText id="input2" value="#{calculatorPage.field2}"
binding="#{calculatorPage.field2_Ref}" styleClass="inputText">
</h:inputText>
</td>
</tr>
<tr>
<td align="left">Operation:</td>
<td style="width:5px"></td>
<td>
<h:selectOneMenu id="operationComboBox"
styleClass="selectOneMenu" value="#{calculatorPage.operation}">
<f:selectItem itemValue="add" itemLabel="add" />
<f:selectItem itemValue="subtract" itemLabel="subtract" />
<f:selectItem itemValue="multiply" itemLabel="multiply" />
<f:selectItem itemValue="divide" itemLabel="divide" />
</h:selectOneMenu>
<hx:behavior event="onblur"
target="operationComboBox" behaviorAction="get"
targetAction="updatablePanel"></hx:behavior></td>
</tr>
<tr>
<td align="left">Output:</td>
<td style="width:5px"></td>
<td>
<h:panelGroup id="updatablePanel" styleClass="panelGroup">
<h:outputText id="output" value="#{calculatorPage.output}"
binding="#{calculatorPage.output_Ref}" styleClass="outputText">
</h:outputText>
</h:panelGroup>
<hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
target="updatablePanel" params="input1;input2;operationComboBox">
</hx:ajaxRefreshRequest>
</td>
</tr>
</TBODY>
</TABLE>
</h:form>
</hx:scriptCollector>
</body>
</f:view>
</html>
Im Folgenden ist der Code des JSF-Handlers aufgeführt, der zu dieser Seite gehört:
package jsfhandlers;
handler calculatorPage type JSFHandler
{onPreRenderFunction = onPreRender,
view = "calculatorPage.jsp"}
field1 float;
field2 float;
operation string;
output string;
function onPreRender()
if (J2EELib.getQueryParameter("$$ajaxmode") == null)
output = "Enter values and an operation.";
else
calculateAnswer();
end
end
function calculateAnswer()
param1 float = J2EELib.getQueryParameter("input1");
param2 float = J2EELib.getQueryParameter("input2");
case (J2EELib.getQueryParameter("operationComboBox"))
when ("add")
output = param1 + param2;
when ("subtract")
output = param1 - param2;
when ("multiply")
output = param1 * param2;
when ("divide")
output = param1 / param2;
end
end
end