Was ist AJAX?

AJAX ermöglich dynamisches Nachladen von Inhalten mit asynchronen Requests

Definition

Ajax ermöglicht es, einzelne Komponenten einer Webseite dynamisch zu laden, sodass ein Neuladen der kompletten Webseite nicht nötig ist. Es ist ein Akronym für “Asynchronous JavaScript and XML”. Inhalte lassen sich so gezielt manipulieren, wodurch das Nutzererlebnis und die Usability der Webpräsenz verbessert wird.

Moderne Webpräsenzen bieten ein hohes Maß an Interaktivität und müssen dynamisch auf Eingabe der Nutzer reagieren können. Beim Anlegen eines E-Mail-Kontos könnte beispielsweise noch vor der Übermittlung der Daten geprüft werden, ob die gewünschte E-Mail-Adresse verfügbar ist oder ob das Passwort das minimale Maß an Sicherheit erfüllt. Solche und ähnliche Szenarien lassen sich nur dann realisieren, wenn einzelne Komponenten der Webseite unabhängig von dem Moment manipuliert werden können, an dem die Webpräsenz geladen wird. Bei AJAX handelt es sich um eine Vorgehensweise, mit der sich diese asynchrone Datenübertragung zwischen Server und Client realisieren lässt.

Der größte Vorteil von AJAX ist, dass Webseiten nicht mehr vollständig neu geladen werden müssen, um auf Nutzereingaben zu reagieren. Statische Inhalte bleiben unverändert, während dynamische Informationen je nach Bedarf im DOM (Document Object Model) ergänzt werden können. Im obigen Beispiel mit dem Anlegen eines neuen E-Mail-Kontos muss ein Request an den zuständigen Webserver gesendet werden, damit dieser überprüfen kann, ob der gewünschte Nutzername verfügbar ist.

Ohne AJAX musste hierfür das Formular übermittelt und somit die gesamte Webseite neu geladen werden. Die innovative Webtechnologie ermöglicht, dass durch den Einsatz von JavaScript jederzeit ein Request an den Server gesendet werden kann. Das Ergebnis dieser Anfrage entscheidet darüber, ob nachträglich eine Meldung in das Document Object Model eingefügt werden soll oder nicht. Auch die dynamische Generierung von Webseiten-Elementen wie zum Beispiel Dropdown-Listen ist mit AJAX möglich. So können beispielsweise nur Auswahlmöglichkeiten passend zu den zuvor ausgewählten Optionen angezeigt werden.

Anstatt Nutzer also für jeden neuen Schritt auf eine neue Webseite führen zu müssen, werden nur bestimmte Teile der Seite mit den relevanten Inhalten verändert. Das spart nicht nur Zeit, sondern auch Bandwidth und bietet ein besseres Nutzererlebnis.

Wie funktioniert

Um Teile einer Webseite dynamisch verändern zu können, kommt die Skriptsprache JavaScript zum Einsatz. Die Skriptsprache wird auf dem Rechner des Besuchers innerhalb der Browserumgebung ausgeführt und funktioniert daher auch, nachdem die Seite bereits geladen wurde. Dadurch ist es möglich jederzeit eine Anfrage an den Webserver zu senden, um nachträglich bestimmte Daten anzufordern und diese dann auf der Webseite dynamisch anzuzeigen.

Von der technischen Seite betrachtet wird JavaScript mit XML (Extensible Markup Language) kombiniert, um asynchrone Aktualisierungen durch den Einsatz eines sogenannten ” XMLHttpRequest-Objekts” zu ermöglichen. Wenn ein Nutzer eine Webpräsenz aufruft, die für den Einsatz von AJAX vorgesehen ist, und ein vorgeschriebenes Ereignis ausgelöst wird, erstellt JavaScript automatisch ein XMLHttpRequest-Objekt, das für die asynchrone Datenübertragung zwischen Client und Server zuständig ist.

Das XMLHttpRequest-Objekt sendet eine Request an den zuständigen Webserver für eine Aktualisierung bestimmter Daten auf der Webseite. Der Server verarbeitet die Anfrage, erstellt eine Antwort und sendet diese dann an den Client zurück. Auf der Clientseite wird dann JavaScript verwendet, um die Antwort zu verarbeiten und Inhalte dynamisch zu verändern und auf dem Bildschirm anzuzeigen. Viele Webentwickler benutzen spezielle Frameworks wie jQuery oder Axios, die auf JavaScript basieren und speziell für die komfortable und browserunabhängige Manipulation von DOM-Elementen im World Wide Web entwickelt wurden. Solche Frameworks erleichtern die Entwicklung von AJAX-Anwendungen und bieten im Vergleich zu JavaScript eine kurze und präzise Ausdrucksweise.

Eigenschaften und Besonderheiten

Wie wir im obigen Absatz bereits erwähnt haben, kann die Funktionsweise traditioneller Websites und Webanwendungen mit dem Grundsatz “Stop and Go” beschrieben werden: Der Besucher löst eine Aktion auf einer Webseite aus und wartet darauf, dass der zuständige Server diese Aktion verarbeitet und die Webseite anschließend aktualisiert.

Bei AJAX-Anwendungen werden Serveranfragen im Hintergrund gestartet, ohne dass ein HTML-Dokument ausgewechselt werden muss. Damit fällt das Warten auf die Antwort des zuständigen Webservers entweder ganz weg, oder der Server muss nur ein kleines Datenpaket zurückschicken. Der wesentliche Vorteil ajaxbasierter Webanwendungen ist daher, dass sie viel schneller auf Benutzeraktionen reagieren und somit dem flüssigen Verhalten von nativen Apps und Desktop-Anwendungen näherkommen. Dies wirkt sich äußerst positiv auf das Nutzererlebnis und die Usability aus.

Die AJAX-Technologie bricht absichtlich mit den traditionellen Funktionsweisen und Regeln des World Wide Web. Genau daraus zieht es seine Vorteile, aber auch einige Nachteile. Der wesentliche Nachteil spiegelt sich in der Tatsache wider, dass es im Rahmen ajaxbasierter Anwendungen keine vollständig adressierbaren HTML-Dokumente mehr gibt, sodass die Zurück-Funktion in vielen Fällen nicht mehr wie gewohnt funktioniert. Dies ist darauf zurückzuführen, dass im Browser-Verlauf die Änderungen der Inhalte via JavaScript nicht registriert werden, da das HTML-Dokument nicht ausgetauscht worden ist und sich die URL nicht verändert hat. Eine Navigation, wie Du Dir es von statischen Webpräsenzen gewohnt bist, ist auf ajaxbasierten Webseiten nicht möglich.

Wie kann ich AJAX beim Entwickeln nutzen?

Wie wir bereits im obigen Absatz erwähnt haben, steht das “J” in AJAX für die Skriptsprache JavaScript, die im Kontext des Word Wide Web bei der Programmierung von Webseitenprozessen eingesetzt wird. JavaScript wird in erster Linie zum dynamischen Erstellen, Hinzufügen und Verwalten von Webinhalten verwendet. Nachdem mit den beiden Markup-Sprachen HTML und CSS statische Web-Features, wie beispielsweise Header, Schriften und Absätze, implementiert sind, wird danach JavaScript eingesetzt, um der Webpräsenz die nötige Funktionalität zu verleihen.

Das “X” in AJAX steht für “Extensible Markup Language”. Dabei handelt es sich um die Markup-Sprache XML. Während mit HTML und CSS Seiteninhalte definiert und gestaltet werden, wird XML zur asynchronen Datenübertragung eingesetzt.

Ajaxbasierte Webanwendungen werden in der Regel mithilfe moderner JavaScript-Frameworks entwickelt. Zu den beliebtesten JS-Framework, die clientseitig eingesetzt werden, gehören React, Angular und jQuery. Der Servercode einer AJAX-Webanwendung ist nicht zwingend an JavaScript gebunden und kann in verschiedenen Programmiersprachen wie zum Beispiel in den Programmiersprachen PHP, .NET Core oder Java realisiert sein.