AjaX

15min

mittel

• JavaScript

Ajax (Asynchronous JavaScript and Xml) ist ein Konzept, das es Webanwendungen ermöglicht, neue Daten vom Server zu erhalten und/oder dem Server für die weitere Verarbeitung zu senden, ohne dass die Seite als Ganzes neu geladen wird.

Daten können durch XMLHttpRequest oder die neue fetch-API abgefragt werden. Trotz des Namens ist die Verwendung von XML nicht verbindlich, stattdessen wird oft JSON verwendet. Es ist ebenfalls möglich mit anderen Protokollen als HTTP z. B. file und SFTP, oder ws bzw. wss bei WebSockets zu arbeiten.

Was ist anders an Ajax?

Gemeinsam ist den vielen der besagten Webanwendungen eine Schlüsseltechnik namens Ajax. Das bedeutet: JavaScript tauscht im Hintergrund Daten mit dem Webserver aus. Das funktioniert über selbst erzeugte HTTP-Anfragen, deren Server-Antwort dem Script zur Verfügung steht.

Was ist daran nun neu? Dazu muss man zuerst verstehen, wie Interaktion im Web ohne Ajax funktioniert: Herkömmliche Websites nutzen Links und Formulare, um mit dem Webserver zu interagieren. Der Anwender aktiviert einen Link oder sendet ein Formular ab, woraufhin der Browser eine entsprechende HTTP-Anfrage an den Webserver sendet. Der Webserver antwortet, indem er üblicherweise ein HTML-Dokument zurückliefert, das der Browser verarbeitet und anstelle des alten anzeigt. Ohne Ajax muss also immer ein neues, vollständiges HTML-Dokument vom Server geladen werden. Diese HTML-Dokumente werden oft in Webanwendungen oftmals von serverseitigen Programmen generiert.

Ajax durchbricht dieses Prinzip und kann damit die Bedienung von Webseiten und den Aufbau von Webanwendungen grundlegend ändern. Es werden nicht immer neue HTML-Dokumente heruntergeladen und ausgewechselt, sondern nur kleine Datenportionen mit dem Webserver ausgetauscht. Gerade benötigte Daten werden nachgeladen und ausgewählte Änderungen dem Server mitgeteilt.

Im Extremfall kommt eine sogenannte Single Page Application heraus, bei der es nur ein ursprüngliches HTML-Dokument gibt und der restliche Datenaustausch mit dem Webserver per JavaScript im Hintergrund abläuft. Über die DOM-Schnittstelle wird das Dokument nach Belieben umgestaltet. Es reagiert auf Benutzereingaben, übersendet diese gegebenenfalls an den Server, lädt im Hintergrund Inhalte vom Server nach und montiert diese ins bestehende Dokument ein.

Der Begriff »Ajax« und seine Schwächen

Der Begriff Ajax wurde ursprünglich im Jahr 2005 von dem richtungsweisenden Artikel A New Approach to Web Applications von Jesse James Garrett geprägt. Ajax steht darin als Abkürzung für Asynchronous JavaScript and XML (auf Deutsch: asynchrones JavaScript und XML).

Diese Abkürzung stiftet leider mehr Verwirrung, als sie zum Verständnis beiträgt. Weder sind Ajax-Anwendungen asynchron in dem Sinne, dass die Kommunikation mit dem Server völlig losgelöst von Benutzereingaben stattfindet. Noch ist XML zwangsläufig das Übertragungsformat für Daten zwischen Client und Server. Garretts Konzept taugt wenig zum Verständnis der gegenwärtigen Praxis, die unter dem Schlagwort Ajax zusammengefasst wird.

In den meisten Fällen bezeichnet »Ajax« lediglich den JavaScript-gestützten Datenaustausch mit dem Webserver. XML ist dabei nur ein mögliches, aber nicht das zentrale Übertragungsformat. Und asynchron bedeutet lediglich, dass die JavaScript-Ausführung beim Warten auf die Server-Antwort nicht den Browser blockiert, sondern dass JavaScript-Ereignisse gefeuert werden, wenn die Server-Antwort eingetroffen ist.

Siehe auch

• 

  Daten mit JS nachladen
  • AJaX
  • Fetch API
   
• 

  WebSockets
   
• 

  WAI-ARIA
  • ARIA Live Regions
   

Weblinks

Information

Bei diesem Text handelt es sich um eine überarbeitete Übernahme aus der Einführung in JavaScript von Mathias Schäfer.