Abschnitte einer Webseite mit Ajax-Anforderungen aktualisieren

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.

Zum Einrichten einer JSP-Datei und eines JSF-Handlers für die Verwendung von Ajax-Anforderungen sind die folgenden allgemeinen Schritte erforderlich:
  1. Erstellen Sie die Seite und den JSF-Handler.
  2. Entwerfen Sie die Seite und befüllen Sie sie mit JSF-Steuerelementen, die an Variablen und Funktionen im JSF-Handler gebunden sind.
  3. Geben Sie den Bereich der Seite an, den Sie infolge der Ajax-Anforderung ändern möchten. Andere Abschnitte der Seite werden nicht betroffen sein.
  4. Geben Sie auf der Seite das Benutzerereignis an, durch das die Ajax-Anforderung ausgelöst werden soll, zum Beispiel das Auswählen eines bestimmten Textsteuerelements oder das Wegbewegen des Cursors davon.
  5. Definieren Sie die Anforderung, die von der Seite an den JSF-Handler gesendet werden soll, darunter den Anforderungstyp (aktualisieren, übergeben, extern) und die Parameter, die in die Anforderung aufgenommen werden sollen.
  6. Schreiben Sie den Code in den JSF-Handler, um die Anforderung zu verarbeiten.
Im Folgenden ist der Lebenszyklus einer Standard-Ajax-Seite in EGL aufgeführt:
  1. Mithilfe des Servlets wird die gesamte Seite dargestellt. Dabei werden bei Bedarf die von den JSF-Handlereigenschaften 'onConstructionFunction', 'onPreRenderFunction' und 'onPostRenderFunction' angegebenen Funktionen ausgeführt.
  2. Mit dem Servlet wird die Seite an den Browser geschickt.
  3. Der Benutzer beginnt mit dem Ausfüllen der Eingabefelder auf der Seite.
  4. Der Benutzer löst die Ajax-Anforderung aus.
  5. Über den Browser wird die Anforderung an das Servlet gesendet, einschließlich der in der Anforderung angegebenen Parameter.
  6. Durch das Servlet wird die Funktion im JSF-Handler aufgerufen, die von der Eigenschaft 'onPreRenderFunction' angegeben wird. Dabei wird diese Funktion mit den Parametern in der Anforderung bereitgestellt.
  7. Die Funktion 'onPreRenderFunction' wird ausgeführt und die Steuerelemente in dem Bereich auf der Seite, die von der Ajax-Anforderung angegeben wurde, werden dabei aktualisiert.
  8. Mit dem Servlet wird der von der Ajax-Anforderung angegebene Abschnitt der Seite dargestellt und dieser Abschnitt der Seite im Browser aktualisiert.
  9. Der Zyklus der Ajax-Anforderungen wird fortgesetzt, bis der Benutzer auf eine andere Seite wechselt, entweder durch Klicken auf einen Link oder durch Auslösen einer FORWARD-Anweisung im JSF-Handler.
In EGL sind drei Typen von Ajax-Anforderung für Webseiten verfügbar:
Aktualisieren
Mit diesem Anforderungstyp wird das Servlet aufgefordert, die Werte der Steuerelemente in einem angegebenen Bereich der Seite zu aktualisieren; es werden jedoch keine Informationen zum Status der Seite für den JSF-Handler bereitgestellt. Wenn also der Benutzer den Wert von Eingabesteuerelementen auf der Seite ändert, wird der JSF-Handler nicht über die Änderungen informiert. Die Variablen im JSF-Handler werden nicht aktualisiert, um mit den Seitensteuerelementen übereinzustimmen, an die die Variablen gebunden sind. Durch diese Einschränkung wird die Menge der in dieser Anforderung gesendeten Daten reduziert, wodurch die Anforderung modularer und effizienter wird.

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.

Übergeben
Mit diesem Anforderungstyp wird das Servlet aufgefordert, die Werte der Steuerelemente in einem bestimmten Bereich der Seite zu aktualisieren und die Werte der Variablen im JSF-Handler zu aktualisieren. Anders als bei der Aktualisierungsanforderung wird durch die Übergabeanforderung ausgelöst, dass alle Variablen im JSF-Handler auf die aktuellen Werte der Komponenten festgelegt werden, an die die Variablen gebunden sind. Daher ist es nicht notwendig, dass Parameter mithilfe einer Übergabeanforderung übergeben werden, da alle Variablen aktualisiert werden, um dem aktuellen Status der Seite zu entsprechen. Weitere Informationen finden Sie im Kapitel Eine Seite mit einer Übergabeanforderung aktualisieren.
Extern
Mit diesem Anforderungstyp wird das Servlet aufgefordert, den Inhalt in einem bestimmten Bereich der Seite mit dem Inhalt einer anderen Seite zu aktualisieren. Weitere Informationen finden Sie im Kapitel Eine Seite mit einem Abschnitt einer anderen Seite 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

Beispiel

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:

Abbildung der Seite und des Ajax-Verhaltens

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

Feedback