Ajax Integration

Eine Webanwendung ohne Ajax-Funktionalität ist heute kaum noch vorstellbar. Galt JavaScript vor wenigen Jahren noch als "böse", so hat sich jetzt ein Hype ergeben, um JavaScript in Form von Ajax doch in Anwendungen aufnehmen zu können. Und die Ergebnisse sind durchaus sehenswert.
In der Vergangenheit gab es schon zahlreiche Ergänzungen zu JSF, um Ajax auch innerhalb des JSF-Frameworks nutzen zu können. Jetzt wurde Ajax auch innerhalb des JSF-Standards geregelt - und zugleich wurde etwas anderes damit auch erreicht: Es ist der erste JSR, der ein Stück JavaScript standardisiert.

Doch genug der Theorie, schauen wir uns ein konkretes Beispiel an.

    <h:panelGrid columns="2">
        <h:outputText value="Vorname: " />
        <h:inputText value="#{personBean.firstname}" id="first">
         <f:ajax render="full" />
        </h:inputText>

        <h:outputText value="Nachname: " />
        <h:inputText value="#{personBean.lastname}" id="last" />
    </h:panelGrid>

    Name komplett: <h:outputText value="#{personBean.fullname}" id="full" />

In den beiden Eingabefeldern wird sowohl der Vorname, wie auch der Nachname einer Person abgefragt. Weiter unten wird der komplette Name, also Vor- und Nachname, ausgegeben. Jetzt könnte man natürlich das Formular abschicken und einen FPR (Full Page Reload) machen, oder man nutzt Ajax. Mit dem Tag <f:ajax> wird erreicht, dass das Eingabefeld ein Ajax-Behaviour bekommt. Es reagiert mit seinem Default-Ajax verhalten onchange. Danach wird partiell der komplette Lifecycle durchlaufen, bis auf Render Response. Welcher Teil einer Seite neu gerendert wird, wird über der render-Attribut festgelegt.
Noch ein anderes Beispiel:

   <h:commandButton value="Drueck mich" action="success">
      <f:ajax execute="middle" render="full" />
   </h:commandButton>

Hier sieht man, wie einem Commandbutton das Ajax-Verhalten hinzugefügt wird. Beim Drücken des Button erfolgt nun kein FPR mehr, sondern es wird ein Ajax-Request ausgelöst. Der Lifecycle wird für die Komponente "middle" durchlaufen und danach auch wieder ein Teil der Gesamtseite neu gerendert.
Ajax geht jedoch nicht nur auf einzelne Komponenten, sondern auch auf Regionen. Es ist möglich, das f:ajax-Tag über mehrere Komponenten zu spannen und somit einen ganzen Bereich zu "ajax-ifizieren".

Doch nicht nur mit Tags kann eine Ajax-ifizierung erreicht werden. JSF 2.0 liefert im Standard eine JavaScript API mit aus, die auch explizit angesprochen werden kann.

Zurück zur Übersichtsseite