AJAX Total #1: Was ist AJAX eigentlich?

Dieser Artikel stellt die Einleitung zu meiner neuen (und ersten) Artikelserie auf torbenleuschner.de/blog dar. Wie ihr der Überschrift wahrscheinlich schon entnommen habt, soll es um AJAX gehen. Im ersten Teil möchte ich mein Vorgehen im Bezug zur Serie erläutern und damit auch klären, für wen sich die Artikel eignen. Zum anderen verzichten wir heute auf einen praktischen Teil und müssen zuerst Theorie pauken. Die Frage „Was ist AJAX eigentlich?“ sollte man vor dem Einstieg in den Quellcode geklärt haben.

Teile der Serie:

Die Artikelserie richtet sich in erster Linie an Hobby-Webdesigner & -entwickler, die fit in Sachen HTML sind und zumindest schon mal etwas von Javascript gehört haben. Alle, die bereits AJAX-Anwendungen schreiben oder hoffen, dass ich im Artikel auf besondere Performance-Angelegenheiten oder dergleichen eingehe, werden womöglich enttäuscht sein. Hier geht es um die absoluten Basics – so, dass hoffentlich jeder sie versteht!

Außerdem werden wir auch noch etwas schummeln. Wir werden größtenteils kein natives Javascript und somit keine „echten“ AJAX-Requests schreiben, sondern auf das jQuery-Framework zurückgreifen. Dies hat vor allem zwei Gründe: Regelmäßige Leser meines Blogs (sofern ich schon welche habe) werden wissen, dass ich ein riesengroßer jQuery-Fan bin und dieses Javascript-Framework sehr schätze – Das CMS fokus ist übrigens auch komplett mit jQuery programmiert. Der andere Grund ist, dass die Syntax von jQuery so herrlich einfach und weitaus verständlicher als natives Javascript ist. Ein einfaches Zahlenbeispiel: Für einen sehr simplen AJAX-Request benötigt man mit jQuery 5 Zeilen Quellcode; würde man die native Javascript-Schreibweise nutzen, käme man auf über 30 Zeilen.

AJAX? Kann man das essen?

Wenn ich gefragt würde, was AJAX in erster Linie ist, dann würde ich antworten „Ein Modewort„. Viele glauben, hinter dieser Technologie stecke eine ganz eigene Programmiersprache, welche nur von Browsern der neuesten Generation verstanden würde. Dem ist aber absolut nicht so.

Schauen wir uns dazu doch einfach mal an, was hinter den mystischen vier Buchstaben, die das Web veränderten, eigentlich steckt: „Asynchronous JavaScript and XML„, zu deutsch asynchrones Javascript und XML. Moment mal – das sind ja alles Begriffe die uns bekannt vorkommen?

Richtig, denn AJAX ist kein Hokospokus und auch keine neue Programmiertechnologie, sondern in der Basis stinknormales Javascript. Woher der Begriff AJAX stammt, konnte nie ganz geklärt werden. Fest steht, dass das Wort bzw. die Marke ungefähr im Jahre 2005 seinen Ursprung fand. Vorher war die Technologie dahinter jedoch keine unbekannte, wurde nur meistens unter dem Begriff XMLHttpRequest geführt. Ein XMLHttpRequest ist übrigens die Javascript-Anweisung, um einen AJAX-Request zu starten.

Asynchron wird die ganze Geschichte, da ein AJAX-Aufruf in keinem festen Zeitschema ausgeführt wird, sondern unmittelbar, wenn der JS-Befehl erfolgt. Das heißt, man muss mit der HTTP-Anfrage nicht warten, bis die gesamte Seite neu geladen wird, sondern kann zwischendurch mit dem Webserver kommunizieren.

Doch warum XML? Nun, als die AJAX-Technologie ihren Ursprung fand war es häufig so, dass man per Javascript-Befehl eine XML-Datei vom Server lud. In dieser Datei waren dann strukturiert bestimmte Informationen zu finden. Zum Beispiel konnte man per XML-Syntax getrennt einen Vornamen, Nachnamen und eine Adresse zurückliefern. Diese Informationen wurden dann per Javascript und DOM-Manipulation in das HTML-Dokument eingesetzt.

Heute kann man zwar immer noch XML-Dokumente anfordern, tut dies aber in den seltensten Fällen. Meistens ist es einfacher gleich ein HTML-Dokument zurückzuliefern, welches man dann direkt im DOM platziert. Und wenn man doch mal ein Dateiformat zur besseren Informationsstrukturierung benötigt, so kommt heutzutage meistens JSON statt XML zum Einsatz.

Ein AJAX-Request in der Theorie

Zum Ende dieses Artikels möchte ich gerne den Ablauf eines AJAX-Requests in der Theorie abbilden. Wer diesen Vorgang verstanden hat, wird es im nächsten Artikel leichter haben, wenn der Quellcode dazukommt.

Per Javascript- bzw. per jQuery-Befehl starten wir einen AJAX-Abruf. Beispielsweise könnte dieser Vorgang gestartet werden, wenn der Nutzer auf einen Button oder Link klickt. Dieser Request greift in unserem Fall auf die lokale Datei ajax.html zu.
In der Datei ajax.html befindet sich lediglich der Inhalt „Hallo Welt“. Achtung: Ein HTML-Grundgerüst mit html, head und body benötigen wir hier nicht, dieses gibt es ja bereits!
Konnte der Javascript-Abruf die Datei finden, haben wir dessen Inhalt in einer Variablen zur Verfügung. In diesem Fall ist es ein simpler (HTML-)String, der in der Variablen steckt.
Per DOM-Manipulation fügen wir die Variable in ein bestehendes Element auf unserer Webseite ein.

Genug Theorie für heute – im nächsten Artikel wird es praktisch, versprochen! Trotzdem ist es wichtig, die Basics zu verstehen, bevor man sich an den Quellcode begibt. Ich hoffe, ich konnte den Sachverhalt einigermaßen verständlich rüberbringen und der ein oder andere freut sich auf den nächsten Beitrag der Artikelserie AJAX Total!