Der Begriff „Asynchronous Javascript And XML“ (AJAX) klingt wie ein Bissen, beschreibt aber ein einfaches Konzept: Teile einer Webseite aktualisieren, ohne die gesamte Sache neu zu laden.
Wenn Sie zuvor neue Daten benötigen, müssen Sie warten. Sie haben auf einen Link geklickt. Der Bildschirm fror ein. Die Seite wurde weiß. Dann wurde alles wieder geladen.
AJAX hat das geändert. Dadurch konnten Browser im Hintergrund mit Servern kommunizieren. Sie können eine Suchanfrage eingeben und sehen, dass die Ergebnisse sofort angezeigt werden. Kein Nachladen. Kein weißer Bildschirm. Nur Daten.
Das war keine neue Erfindung. Es handelte sich um eine Kombination vorhandener Tools, die auf neue Weise genutzt wurden.
Die Kerntechnologien hinter asynchronem Webdesign
AJAX ist keine einzelne Technologie. Es ist ein Workflow. Es setzt auf die Koordination von Standard-Webtechnologien.
Das Herzstück davon ist das „XMLHttpRequest“-Objekt. Dies ist eine integrierte JavaScript-Funktion. Damit können clientseitige Skripte HTTP-Anfragen (wie GET oder POST) an einen Server initiieren. Der Browser sendet die Anfrage. Es wird nicht auf die Antwort gewartet, bevor mit dem Rendern der Seite fortgefahren wird. Dies ist der „asynchrone“ Teil.
Sobald der Server antwortet, übernimmt JavaScript die Daten. Es analysiert es. Es aktualisiert das Document Object Model (DOM). Der Benutzer sieht die Änderung, ohne die Seite jemals zu verlassen.
„AJAX zeichnet sich durch eine Architektur aus, bei der clientseitiger Code den Datenabruf, die Interpretation und die Anzeigeanpassung in Echtzeit orchestriert, ohne dass ein allgemeines Neuladen oder ein Verlust der Interaktivität erforderlich ist.“
Lange Zeit lagen diese Daten im XML-Format vor. Daher der Name. XML ist ausführlich. Es ist schwer.
Später übernahm JSON (JavaScript Object Notation). JSON ist leichter. Es ist für JavaScript einfacher zu verarbeiten. Moderne Frameworks wie jQuery und Fetch API haben die Verwaltung dieser Anfragen noch einfacher gemacht. Das Kernprinzip bleibt jedoch bestehen: Entkoppeln Sie die Benutzeroberfläche von der Serverkommunikation.
Warum Browserkompatibilität früher wichtig war
In der Anfangszeit war das schwierig.
Nicht alle Browser unterstützen „XMLHttpRequest“. Oder sie haben es anders umgesetzt.
Internet Explorer 5 und höher holten schließlich auf. Mozilla Firefox folgte diesem Beispiel. Safari und Chrome schlossen sich später der Party an. Heutzutage unterstützt jeder moderne Browser diese Funktionen nativ.
Diese Konvergenz ermöglichte es Entwicklern, komplexe Interaktionen aufzubauen, die überall funktionierten. Zuvor musste man Hackcode schreiben, damit alles in Firefox funktionierte, nicht jedoch im IE. Oder umgekehrt.
Jetzt liegt der Fokus auf Logik, nicht auf Kompatibilitäts-Hacks.
Reale Anwendungen, die das Erlebnis definieren
Sie haben AJAX tausendmal verwendet. Sie denken wahrscheinlich nicht darüber nach.
Denken Sie an Gmail. Wenn Sie einen Posteingang öffnen, laden Sie die Seite nicht neu, um eine neue E-Mail zu lesen. Der Client ruft die neuesten Nachrichten im Hintergrund ab. Sie können ziehen, löschen oder archivieren. Die Seite bleibt stehen. Die Daten werden aktualisiert.
Windows Live Hotmail hat schon früh etwas Ähnliches getan. Google Maps nutzt es ständig. Sie schwenken die Karte. Der Browser fordert neue Kartenkacheln an. Sie erscheinen sofort. Sie warten nicht darauf, dass die gesamte Seite geladen wird.
LiveSearch ist ein klassisches Beispiel. Während Sie Schlüsselwörter eingeben, fragt die Suchmaschine den Server ab. Ergebnisse werden angezeigt. Sie klicken auf eins. Die Seite springt zum Ergebnis. All dies geschieht über AJAX-Aufrufe.
Die Anwendungen sind endlos.
- Dynamische Kommentarbereiche
- Formulare automatisch speichern
- Börsenticker in Echtzeit
- Unendliche Scroll-Feeds
Diese Funktionen erzeugen das Gefühl einer „Einzelseitenanwendung“. Die Website verhält sich eher wie eine Desktop-App. Es fühlt sich bissig an. Es fühlt sich lebendig an.
Der Wandel hin zu Single Page Applications (SPAs)
AJAX ebnete den Weg für SPAs.
Auf einer herkömmlichen Website wird mit jedem Klick eine neue Seite geladen. Der Browser verwirft das alte DOM und erstellt ein neues.
In einem SPA wird die erste Seite geladen. JavaScript übernimmt die gesamte nachfolgende Navigation. Es tauscht Inhalte dynamisch aus. Die URL ändert sich möglicherweise, aber die Seite wird nicht neu geladen.
Dies erfordert komplexeren clientseitigen Code. Sie müssen den Staat verwalten. Sie müssen sich um das Routing kümmern. Aber die Benutzererfahrung ist überlegen.
Darauf setzen soziale Netzwerke. Wenn Sie eine Statusaktualisierung veröffentlichen, wird der Feed aktualisiert. Ihr Profilbild wird geladen. Benachrichtigungen werden angezeigt. Nichts davon erfordert ein vollständiges Neuladen.
Das Erbe des asynchronen Datenaustauschs
Das Akronym AJAX ist etwas veraltet. Entwickler verwenden den Begriff heute nur noch selten. Wir nennen es einfach „Webentwicklung“.
Aber die Technologie lebt weiter. „XMLHttpRequest“ wird weitgehend durch die „fetch“-API ersetzt. JSON ist das Standarddatenformat.
Die Auswirkungen sind unbestreitbar. Es hat die Erwartungen der Benutzer geweckt. Wir erwarten jetzt eine sofortige Rückmeldung. Wir erwarten reibungslose Übergänge. Wir erwarten, dass sich Web-Apps wie native Software anfühlen.
Wenn eine Website jedes Mal neu geladen wird, wenn Sie auf eine Schaltfläche klicken, wirkt sie kaputt. Es fühlt sich alt an.
AJAX hat bewiesen, dass das Web mehr als nur statische Dokumente sein kann. Es könnte eine Plattform für komplexe, interaktive Anwendungen sein.
Die Entwicklung hörte hier nicht auf. Frameworks wie React, Angular und Vue bauen auf diesen Grundlagen auf. Sie automatisieren die DOM-Updates. Sie verwalten den Staat.
Aber der Kerngedanke ist derselbe.
Sprechen Sie mit dem Server im Hintergrund. Aktualisieren Sie den Bildschirm. Halten Sie den Benutzer in Bewegung.
Wir sind noch dabei, dies zu verfeinern. Unendliche Schriftrollen. Zusammenarbeit in Echtzeit. Live-Vorschauen. Die Möglichkeiten bleiben weitgehend ungenutzt.
Was kommt als nächstes? Wahrscheinlich weniger Klicken. Mehr Streaming. Mehr Unmittelbarkeit.
Die Seite bleibt. Die Daten werden verschoben.
AJAX ist keine Zauberei. Es ist ein Kompromiss.
Du bekommst Geschwindigkeit. Sie erhalten reibungslose Benutzeroberflächen. Aber man bekommt auch Kopfschmerzen.
Der größte Reibungspunkt ist nicht der Code. Es ist Sicherheit. Insbesondere die Same Origin Policy (SOP). Standardmäßig sperren Browser AJAX-Anfragen. Sie kommunizieren nur mit der Domäne, in der sich der Benutzer gerade befindet. Dadurch wird verhindert, dass ein bösartiges Skript auf „evil.com“ Daten von der Website Ihrer Bank stiehlt. Es ist eine harte Wand.
Aber die Entwickler mussten diese Mauer durchbrechen.
Geben Sie CORS (Cross-Origin Resource Sharing) ein. Es ist der Mechanismus, der es verschiedenen Domänen ermöglicht, miteinander zu kommunizieren. Sie konfigurieren es auf dem Server. Wenn Sie es falsch machen, legen Sie Daten offen. Wenn Sie es richtig machen, ermöglichen Sie moderne, verteilte Apps. Die Messlatte liegt hoch. Die Konfiguration muss streng sein.
Dann gibt es noch den Browserverlauf.
Wenn Sie eine Seite aktualisieren, ohne sie neu zu laden, ändert sich die URL nicht. Oder es tut es, aber der Benutzer weiß es nicht. Drücken Sie „Zurück“. Es passiert nichts. Oder noch schlimmer: Die Seite wird neu geladen und verliert ihren gesamten Status. Dadurch wird das mentale Modell des Benutzers zerstört.
Du musst es reparieren.
Verwalten Sie den Verlaufsstapel explizit. Verwenden Sie die HTML5 History API. Push-Zustände. Hören Sie auf Popstates. Es ist langweilig. Es ist notwendig. Davor verwendeten die Leute Hashbangs („#!“). Es hat funktioniert. Aber es war chaotisch.
Barrierefreiheit ist eine weitere Falle.
Dynamische Inhalte melden sich bei Screenreadern nicht immer. Wenn Sie Text über AJAX austauschen, bemerkt die Hilfstechnologie dies möglicherweise nicht. Sie müssen die ARIA-Attribute aktualisieren. Sie müssen Ereignisse auslösen. Andernfalls erstellen Sie eine Website, die nur für Mausbenutzer funktioniert.
Die Landschaft verändert sich.
fetch übernimmt die Verarbeitung von Roh-XHR-Anfragen. Es verwendet Versprechen. Es ist sauberer. Es ist modern. WebSockets sorgen für bidirektionale Echtzeitkommunikation. Sie müssen nicht mehr abstimmen. Sie erhalten Push-Updates.
Aber AJAX ist immer noch die Grundlage.
Es führte das Muster ein. Asynchron. Modular. Nicht blockierend.
Die Wolke bewegte sich. Mobile übernahm. Progressive Web Apps (PWAs) erforderten Offline-Funktionen und Geschwindigkeit. Sie alle stützen sich auf diese Grundprinzipien.
Ist AJAX tot? Nein.
Es ist nur die Ebene unter den neueren Tools. Der Maschinenraum.
Entwickler optimieren immer noch dafür. Sie kümmern sich immer noch um die Staatsführung, zu deren Lösung wir gezwungen wurden. Die Innovation in der Schnittstellentechnik? Es ist auf diesem historischen Fundament gebaut.
Wir verfeinern das Erlebnis ständig. Das Ziel bleibt dasselbe.
Schnell. Reaktionsfreudig. Unaufdringlich.
Aber jetzt steht mehr auf dem Spiel. Die Sicherheit ist strenger. Benutzer erwarten natives Verhalten. Und der Code muss für jeden zugänglich sein.
Es ist ein ständiger Balanceakt. Eines, das man nie wirklich zu Ende bringt.
