AJAX-Grundlagen: Das neue Web

Asynchron laden - nichts blockieren

Zusätzlich zum asynchronen Download von Teilen des Inhalts wird unter Ajax auch häufig eine stark interaktive HTML-Seite verstanden, die Interaktion aber mit klassischen Mitteln wie CSS und Javascript erreicht: Dabei erhält der Anwender bessere Hinweise auf die Funktionsweise der Seite zum Beispiel durch überlagernde Effekte.

Für die Verwendung von Ajax auf Webseiten gibt es eine ganze Reihe an Frameworks, auf all diese einzugehen, würde aber den Rahmen des Beitrags sprengen. Stattdessen erklärt der Beitrag im Folgenden die grundlegende Funktionsweise von Ajax anhand eines Workshops.

Das Beispiel implementiert einen Teil der Client-Site eines typischen Webforums. Das Forum hat eine Thread-Seite, auf der die Beiträge untereinander angezeigt werden. Unter jeder Thread-Überschrift werden dabei die Überschriften der Antworten angezeigt. Für das Beispiel wurde Ajax dann verwendet, um die eigentlichen Nachrichten sichtbar zu machen: Der Benutzer des Forums kann eine Überschrift anklicken, und der Text der Nachricht wird daraufhin unterhalb der Überschrift aber oberhalb der nächsten Antwort eingeblendet.

Grundsätzlich ließe sich das auch so lösen, dass einfach die Inhalte aller Nachrichten in unsichtbaren DIV-Elementen vollständig geladen werden. Der Klick auf die Überschrift würde dann ein Javascript ausführen, das den entsprechenden Textkörper sichtbar macht. Der Nachteil dabei ist natürlich der, dass der komplette Text aller Nachrichten immer mit heruntergeladen werden muss.