Was ist eigentlich Ajax?

Ajax ist eines dieser Themen, das man am Anfang häufig hört, aber selten wirklich versteht. Und das ist völlig normal. Wenn man frisch in der Java-Entwicklung mit JSF einsteigt, prasseln viele Konzepte gleichzeitig auf einen ein: Managed Beans, Scopes, XHTML, Komponenten, Navigation - und dann ruft plötzlich jemand: "Mach das doch einfach per Ajax!"

In diesem Beitrag zeige ich dir ganz einfach und praxisnah, wie Ajax in JSF und PrimeFaces funktioniert, warum es so hilfreich ist und wie du es selbst einsetzen kannst. Du brauchst dafür keine Vorkenntnisse über komplexe Webtechnologien. Alles, was du brauchst, ist etwas Neugier und die Bereitschaft, ein paar Zeilen Code auszuprobieren.

Was Ajax eigentlich macht

Bei einem klassischen Request lädt der Browser die komplette Seite neu. Das ist extrem ineffizient, besonders wenn man nur ein kleines Textfeld aktualisieren möchte. Ajax macht genau das Gegenteil: Es schickt nur die minimal nötigen Informationen an den Server und aktualisiert gezielt einzelne Bereiche der Seite - ohne kompletten Reload.

Für JSF-Entwickler bedeutet das: Komponenten neu rendern, Werte neu berechnen, Status updaten - und das alles fast unsichtbar für den Nutzer.

Das einfachste Ajax-Beispiel in JSF

Wir starten mit einem ganz kleinen Beispiel. Ein Eingabefeld, ein Ajax-Event, eine Ausgabe. So simpel wie möglich.

<!-- Datei: ajaxSimple.xhtml -->
<h:form>
    <h:inputText value="#{ajaxBean.text}">
        <f:ajax event="keyup" render="output"/>
    </h:inputText>

    <h:outputText id="output" value="#{ajaxBean.text}"/>
</h:form>

Und der Bean dazu:

public class AjaxBean {

    private String text = "";

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}

Ausgabe (Beispiel):

Hallo Welt

Ajax mit PrimeFaces

PrimeFaces macht Ajax sogar noch leichter. Viele Komponenten haben Ajax bereits integriert oder lassen sich mit einem einfachen <p:ajax> erweitern. Ein klassisches Szenario ist z.B. eine Dropdown-Auswahl, die etwas anderes auf der Seite aktualisiert.

Beispiel: Ein Nutzer wählt eine Farbe aus, und der Name dieser Farbe wird sofort darunter angezeigt.

<!-- Datei: colors.xhtml -->
<h:form>
    <p:selectOneMenu value="#{colorBean.selected}">
        <f:selectItem itemLabel="Bitte waehlen" itemValue="" />
        <f:selectItem itemLabel="Rot" itemValue="Rot" />
        <f:selectItem itemLabel="Gruen" itemValue="Gruen" />
        <f:selectItem itemLabel="Blau" itemValue="Blau" />

        <p:ajax update="colorOutput"/>
    </p:selectOneMenu>

    <h:outputText id="colorOutput" value="#{colorBean.selected}"/>
</h:form>

Und der passende Bean:

public class ColorBean {

    private String selected = "";

    public String getSelected() {
        return selected;
    }

    public void setSelected(String selected) {
        this.selected = selected;
    }
}

Ausgabe (Beispiel):

Gruen

Ein kleines Live-Update-Beispiel mit Berechnung

Ein typischer Praxisfall in Einsteigerprojekten ist das Berechnen kleiner Werte direkt im Formular. Ajax eignet sich perfekt, um ohne Seitenreload Ergebnisse anzuzeigen.

Wir bauen ein einfaches Formular, das zwei Zahlen nimmt und deren Summe live anzeigt.

<!-- Datei: calculator.xhtml -->
<h:form>
    <p:inputText value="#{calcBean.a}">
        <p:ajax update="sumOutput"/>
    </p:inputText>

    <p:inputText value="#{calcBean.b}">
        <p:ajax update="sumOutput"/>
    </p:inputText>

    <h:outputText id="sumOutput" value="#{calcBean.sum}"/>
</h:form>

Die Bean:

public class CalcBean {

    private int a;
    private int b;

    public int getA() {
        return a;
    }

    public void setA(int a) {
        this.a = a;
    }

    public int getB() {
        return b;
    }

    public void setB(int b) {
        this.b = b;
    }

    public int getSum() {
        return a + b;
    }
}

Ausgabe (Beispiel):

42

Fehler vermeiden: Das wichtigste Ajax-Wissen

Wenn Ajax in JSF nicht funktioniert, liegt es fast immer an denselben Ursachen. Die wichtigsten davon:

Die Komponente, die aktualisiert werden soll, braucht eine eindeutige ID. Und diese ID muss exakt im render bzw. update Attribut stehen.

Das gesamte Ajax muss sich innerhalb eines <h:form> befinden. Ohne h:form gibt es keine Ajax-Requests.

Und ganz wichtig: Im Hintergrund baut JSF eine Baumstruktur aus Komponenten. Ajax aktualisiert nur die Teile, die du explizit angegeben hast - nicht mehr, nicht weniger.

Warum Ajax so wichtig ist

Für Einsteiger wirkt Ajax oft wie ein optionaler Zusatz. In der Praxis ist es aber ein Grundpfeiler angenehmer Benutzeroberflächen. Kein Nutzer möchte dauernd komplette Seitenreloads sehen. Jede moderne Webanwendung benutzt Ajax - oft ohne dass man es merkt.

Ajax sorgt dafür, dass Formulare dynamisch wirken, Listen sich aktualisieren, Tabellen filtern, Dialoge sich öffnen und Werte sich live ändern. In JSF und PrimeFaces bekommst du viel davon automatisch mitgeliefert, ohne selbst JavaScript programmieren zu müssen.

Fazit

Ajax ist kein Hexenwerk. Als Einsteiger brauchst du nur zu verstehen: Es aktualisiert gezielt Teile der Seite, ohne sie komplett neu zu laden. Mit JSF und PrimeFaces erreichst du das mit wenigen, klaren Tags. Sobald du das verstanden hast, öffnen sich plötzlich viele Möglichkeiten für moderne Oberflächen und nutzerfreundliche Anwendungen.

Wenn du das nächste Mal einen kleinen Wert live aktualisieren möchtest oder eine Auswahl direkt Auswirkungen auf andere Komponenten haben soll, probier es einfach aus. Ajax macht deinen Code nicht nur moderner, sondern auch angenehmer für deine Nutzer.