• Was ist AJAX?
• Technik hinter AJAX
• Server-Anfrage absenden
• Server-Antwort verarbeiten
• GET vs. POST

Was ist AJAX?

AJAX steht für “Asynchronous JavaScript and XML” und ist eine JavaScript-Technik, mit der JavaScript im Hintergrund Daten mit einem Server austauschen kann. Dabei werden – ohne das es der Nutzer merkt – HTTP-Requests erzeugt. Kleine Datenpakete werden im Hintergrund mit dem Server ausgetauscht, damit sie der Browser nachladen kann. Ohne AJAX müsste jedes Dokument neu angefragt und vom Browser neu geladen werden.

Dadurch lädt das Dokument schneller und es wird schneller auf Nutzer-Eingaben reagiert. Auf der anderen Seite fehlen eindeutige URLs, die man später direkt ansteuern kann.

Großer Nachteil von AJAX ist zudem, dass die meiste Arbeit vom Server auf den Browser verschoben wird. Nutzer, die ohne JavaScript im Web unterwegs sind, könnten AJAX-Seiten dadurch kaum bis gar nicht erfassen. Man kann zwar AJAX auch für solche Nutzer “besuchsfähig” machen, was aber mit einem Aufwand verbunden ist.

Dennoch gibt es viele sinnvolle Anwendungsfälle mit AJAX. Das trifft auf das Absenden von Formularen oder die Abgabe von Bewertungen zu. Hier können die Daten im Hintergrund an den Server geschickt werden. Der Nutzer bekommt dann eine kurze Bestätigung eingeblendet, dass alles erfolgreich war.

Technik hinter AJAX

Die Technik dahinter nennt sich XMLHttpRequest und wird über das JavaScript-XMLHttpRequest-Objekt umgesetzt. Dabei unterscheidet man zwischen asynchronen und synchronen XMLHttpRequest.

• Bei der asynchronen Variante wird eine Anfrage an den Server geschickt. Bis die Antwort da ist, kann das betreffende JavaScript weiter ausgeführt werden. Es findet also alles parallel statt.
• Bei der synchronen Variante wird eine Anfrage an der Server geschickt. Bis die Antwort da ist, wird die weitere Ausführung des betreffenden JavaScripts angehalten.

Server-Anfrage absenden

Möchte man eine Anfrage mit XMLHttpRequest absenden, so geht man in 4 Schritten vor:

1. XMLHttpRequest-Objekt erzeugen
2. Event-Handler registrieren (bei asynchronen Anfragen)
3. Einsatz der open-Methode
4. Anfrage starten

XMLHttpRequest-Objekt erzeugen
Dazu wird der Konstruktur XMLHttpRequest erzeugt und in einer Variable gespeichert:

var xhr = new XMLHttpRequest();

Event-Handler registrieren (bei asynchronen Anfragen)
Die asynchronen Anfragen basieren auf Events. Wenn sich der Status der Server-Anfrage ändert (onreadystatechange) muss daher eine Funktion aufgerufen werden.

xhr.onreadystatechange = xhrHandler;

Einsatz der open-Methode
Mit der open-Methode werden HTTP-Anfragemethode, URL und die Festlegung einer synchronen oder asynchronen Übertragung festgelegt:

xhr.open("GET", "seite1.html", true);

Zur Erklärung:

• Der erste Parameter definiert, welche HTTP-Anfragemethode zum Einsatz kommt. GET, POST oder HEAD werden meistens angewendet.
• Der zweite Parameter definiert, an welche URL die Anfrage gesendet werden soll.
• Der dritte Parameter definiert, ob die Anfrage synchron (mit false) oder asynchron (mit true) durchgeführt werden soll.

Anfrage starten
Mit der send-Methode wird die Anfrage gestartet. Das geschieht mit:

xhr.send();

Eine GET-Anfrage enthält keine Parameter (man könnte aber auch “null” in den Klammern schreiben). Bei der POST-Methode muss der POST body mitgegeben werden.

Server-Antwort verarbeiten

Nach dem Senden der Anfrage, kommt die Antwort des Servers zurück, die man nun verarbeiten muss. Wir erinnern uns, dass wir anfangs eine Funktion aufgerufen haben:

xhr.onreadystatechange = xhrHandler;

Diese wird nun mit der Logik befüllt, um die Antwort zu verarbeiten:

function xhrHandler() {
// Hier kommt die Anweisung rein
}

Dazu werden folgende Eigenschaften eingesetzt:

• readyState
• responseCode
• responseText und responseXML

readyState
Mit readyState wird der Anfrage-Status abgefragt. Hier stehen 5 Phasen zur Verfügung, auf die man in der Funktion reagieren kann.

Diese sind:

In den meisten Fälle ist der Status 4 interessant, da hier alle Informationen zur Weiterverarbeitung verfügbar sind. Deshalb kann man in der Funktion sofort definieren, dass wenn der Status 4 noch nicht erreicht ist, die Funktion abgebrochen werden kann:

function xhrHandler() {
if (xhr.readyState != 4) {
return;
}
}

responseCode
Im nächsten Schritt ist es wichtig abzufragen, ob der Server mit dem richtigen Status Code geantwortet hat. Bei Status Codes der Kategorie 5xx oder 4xx müssen wir damit rechnen, das Anfrage und/oder Antwort nicht erfolgreich waren. Die Antwort enthält somit voraussichtlich nicht die notwendigen Informationen.

Deshalb sollte unsere Funktion nur auf den Status Code 200 reagieren. Das kann man über die Eigenschaft responseCode des XMLHttpRequest-Objekts abfragen. Im Code heißt das:

function xhrHandler() {
if (xhr.readyState != 4) {
return;
}
if (xhr.responseCode === 200) {
// Hier kommt die Anweisung
} else {
console.log("Es ist ein Fehler beim Laden aufgetreten");
}
}

Mit dem else findet eine Ausgabe statt, wenn der Status Code nicht 200 war.

responseText und responseXML
Mit responseText und responseXML kann nun auf die Antwortdaten zugegriffen werden. responseXML wird eingesetzt, wenn die Server-Antwort ein XML-Dokument ist. Ansonsten wird responseText eingesetzt.

Mit folgendem Code wird dann responseText als String ausgegeben:

function xhrHandler() {
if (xhr.readyState != 4) {
return;
}
if (xhr.responseCode === 200) {
console.log(xhr.responseText);
} else {
console.log("Es ist ein Fehler beim Laden aufgetreten");
}
}

GET vs. POST

Mit AJAX haben wir kennengelernt, wie man im Hintergrund Daten vom Server laden kann. Auf der anderen Seite kann man aber auch Daten aus JavaScript an den Server senden. Das sieht man oft bei Website-Suchen. Während der Nutzer einen Suchbegriff eingibt werden im Hintergrund die Daten an den Server gesendet, der daraufhin die Suchergebnisse ausliefert.

Dabei gibt es 2 Möglichkeiten wie die Übertragung der Daten stattfinden kann: GET und POST.

Bei GET werden die Daten, die an den Server übermittelt werden sollen, in die URL gepackt. Diese sind dann als Query String in der URL sichtbar. Das ist der Teil, der nach dem Fragezeichen folgt (?). Der Query String setzt sich aus Name-Werten-Paaren zusammen. Mehr zu Query-String-URLs findest du in meinem Beitrag “Uniform Resource Locator (URL) und SEO”.

Wichtig ist, dass die Query-String-URL bei der open-Methode (also wenn die Anfrage gestartet wird) mitgegeben wird. Beispiel:

xhr.open("GET", "seite1.html?farbe=schwarz&material=leder", true);

Der aufwendige Teil ist die Erzeugung dieser URL mit einer JS-Funktion. Grob gesagt müssen dabei folgende Schritte durchgeführt werden:

1. Die abzufragenden Daten über das DOM holen
2. Den Query String zusammensetzen
3. XMLHttpRequest mit der zusammengesetzten URL starten
4. Die Standardaktion des Ereignisses unterdrücken

Bei POST funktioniert das Ganze ähnlich. Auch hier werden die Daten zusammengesetzt mit dem Unterschied, dass sie nicht mit der URL weggeschickt werden, sondern über den HTTP-Header.