AJAX? Was ist das? Wie mache ich das? Ein Tutorial mit Minimalbeispielen und ohne JavaScript-Framewo

[rellek]

Die ganze Welt redet von AJAX und viele Anwender empfinden den Einsatz selbiger Technologie als recht angenehm. Doch was ist das?

AJAX steht für Asychronous JavaScript And XML, wobei XML so recht nicht in den Namen passt. Für das, wofür man AJAX zum großen Teil einsetzt, kommt XML nämlich gar nicht zum Zuge.

Wieso ist es bei Anwendern so beliebt?
Mit AJAX können Abfragen zu HTTP-Servern abgesendet werden, ohne, dass die Seite neu geladen werden muss. Damit kann man eine erhöhte Performance vortäuschen (etwa wenn eine Box, deren Generierung 1-2 Sekunden dauert, erst nach dem Laden der Seite erscheint, anstatt den Benutzer warten zu lassen, bis die komplette Seite generiert ist). Doch manchmal ist es je nach Anwendungszweck nicht sinnvoll, für eine Abfrage die komplette Seite neu laden zu lassen. Ein Beispiel sei eine Session in einer Administrationsoberfläche. Ist sie abgelaufen, muss sich der Benutzer neu anmelden. Per AJAX ist es recht komfortabel möglich, sowohl das Verlängern der Session, als auch ein neues Anmelden zu ermöglichen. Ohne, dass die Seite neu geladen werden muss.

Was kann ich mit AJAX machen?
Aus Entwickler-Sicht lässt sich mit AJAX all das realisieren, was man normalerweise mit normalen GET oder POST-Abfragen machen würde. Man könnte das Spiel sogar so weit treiben, dass eine Webseite nur noch in Form eines Grundgerüsts den Server verlässt und alles andere nachträglich nachgeladen wird.
Jedoch ist es bei AJAX wie in der Medizin: Die Dosis macht das Gift. Man sollte sich gut überlegen, ob AJAX wirklich für das sinnvoll ist, wofür man es einzusetzen plant. Denn bei der Verwendung ergeben sich einige Nachteile (für den Benutzer):
- Der Seitenaufbau ist nicht selten langsamer
- Für den Benutzer ist nicht ersichtlich, was als nächstes passieren könnte
- Ein JS-Fehler und die Scripte funktionieren im ungünstigsten Fall nicht mehr
- Man kann so gut wie gar nicht ordentlich den Zustand einer Seite verlinken

Was sind die Systemvoraussetzungen?
Wichtig zu wissen ist, dass AJAX zum sensibleren Teil auf dem Client stattfindet. Während man Server-Einstellungen notfalls soweit verbiegen kann, bis man seine gewünschten Eigenschaften dargestellt hat, kann man kaum einen Client dazu zwingen, sich an irgendwelche Umgebungsrichtlinien der Entwickler zu halten.
Gebraucht wird auf dem Server nichts anderes als normale Anfragen auch benötigen würden. Dies läuft im Wesentlichen auf eine Script-Sprache hinaus, die die Anfragen bearbeitet. Der Client hingegen braucht einen AJAX-fähigen Browser. Dies sind so gut wie alle halbwegs aktuellen Browser; selbst der Internet Explorer unterstützt AJAX schon seit geraumen Zeiten (IE 5.0, also seit 1999). Da AJAX per JavaScript aktiviert wird, wärs noch günstig, wenn der Client JS zulässt

Im Folgenden möchte ich euch nun je ein GET- und ein POST-Beispiel zeigen, wie man AJAX einsetzen kann, und zwar OHNE die Verwendung eines JavaScript-Frameworks. Dies hat den Sinn, dass für viele Aufgaben ein solches Framework keinen Sinn macht und sich nur negativ in der Download-Zeit niederschlägt. Denn so kompliziert ist AJAX eigentlich gar nicht.

 

[rellek]

AJAX mit der HTTP-Methode GET

Fangen wir mit der einfacheren der beiden Methoden an: GET.
Zuerst benötigen wir ein AJAX-Objekt. Da wir nicht ausschließen können, dass der IE6 noch unterwegs ist, brauchen wir eine kleine Browser-Weiche im Quellcode.

if (window.XMLHttpRequest) {

	// IE ab 7; Mozilla ab 1.4; Opera ab 8.0; Webkit
	var ajax = new XMLHttpRequest();

} else {

	// IE 5 und 6
	var ajax = new ActiveXObject("Microsoft.XMLHTTP");

}

Nun haben wir unser AJAX-Objekt und es kann schon los gehen:

ajax.open("GET", "index.php?foo=bar", false);
ajax.send(null);

Was heißt das nun?
ajax.open steht dafür, dass eine Verbindung zu einem Host aufgebaut wird. Der erste Parameter steht für die Methode, also in der Praxis GET oder POST. Der zweite ist das Script, mit dem kommuniziert werden soll inkl. aller Parameter, die über GET gesendet werden! Alle anderen Parameter sind optional; das false in unserem Fall steht dafür, ob die Übertragung synchron oder asynchron laufen soll. Asynchron (true) heißt, dass nicht darauf gewartet wird, dass der Server antwortet. In dem Fall muss eine zusätzliche Funktion erstellt werden, die die Antwort des Servers abwartet und dann erst reagiert. Mehr dazu im POST-Beispiel. Es können noch zwei weitere Parameter folgen, nämlich Benutzername und Passwort. Diese sind nützlich, wenn das Script eine Anmeldung benötigt.

Falls nur irgendein Vorgang angestoßen werden soll, war es das schon. Doch in der Praxis wird man noch eine Antwort vom Server haben wollen, die sagt, ob die Aktion erfolgreich war, oder irgendein Element noch nachlädt. Dafür gibt es die Methode responseText:

if(ajax.responseText == 'success') {

	document.getElementById("mydiv").innerHTML = "AJAX-Request war erfolgreich!";

} else {

	document.getElementById("mydiv").innerHTML = "Es gibt einen Fehler! Das Script meldet: "+ajax.responseText;

}

Die passende HTML-Seite könnte so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="ajaxtest.js"></script>
</head>
<body>

<input type="button" onclick="ajaxrequest()" value="klick mich" />

<div id="mydiv">
</div>
</body>
</html>

...und der Vollständigkeit halber noch die ajaxtest.js:

function ajaxrequest() {
	if (window.XMLHttpRequest) {

		// IE ab 7; Mozilla ab 1.4; Opera ab 8.0; Webkit
		var ajax = new XMLHttpRequest();

	} else {

		// IE 5 und 6
		var ajax = new ActiveXObject("Microsoft.XMLHTTP");

	}

	ajax.open("GET", "index.php?foo=bar", false);
	ajax.send(null);

	if(ajax.responseText == 'success') {

		document.getElementById("mydiv").innerHTML = "AJAX-Request war erfolgreich!";

	} else {

		document.getElementById("mydiv").innerHTML = "Es gibt einen Fehler! Das Script meldet: "+ajax.responseText;

	}
}

Die index.php sah in dem Fall so aus:

<?php

if(isset($_GET['foo']) && $_GET['foo'] == 'bar') {

	try {

		// Irgendwas.
		echo 'success';
		exit;

	} catch(Exception $e) {

		echo nl2br($e->toString());
		exit;

	}

}

echo 'Ung&uuml;ltiger Aufruf!';
exit;

?>

Wie ihr seht, ist das eigentlich genau das, was man auch machen würde, wenn es sich um einen normalen Aufruf handeln würde, außer natürlich die Ausgabe, bei ihr würde man sich evtl. eines Template-Systems bedienen.

 

[rellek]

AJAX mit der HTTP-Methode POST

Für POST sind einige Änderungen notwendig. Das AJAX-Objekt bleibt jedoch erst einmal dasselbe:

if (window.XMLHttpRequest) {

	// IE ab 7; Mozilla ab 1.4; Opera ab 8.0; Webkit
	var ajax = new XMLHttpRequest();

} else {

	// IE 5 und 6
	var ajax = new ActiveXObject("Microsoft.XMLHTTP");

}

Unser Aufruf ist aber ein anderer. Da wir die Länge aller Parameter (aka Formularwerte) benötigen, sollten diese erst einmal in einen String gepackt werden. Dieser String hat dann eine verblüffende Ähnlichkeit mit den Parametern aus GET. Der ein oder andere sieht schon, dass der Spaß vorbei ist, sobald ein Benutzer ein &-Zeichen in einem Formular benutzt. Deshalb müssen ALLE Werte escaped werden. Das entspricht so in etwa dem PHP-urlencode() in JavaScript.
Zudem müssen wir noch ein paar Header senden. Diese Header würden auch bei einem herkömmlichen Request gesendet werden, jedoch geschieht dies dort ohne Zutun des Entwicklers. Diesmal verwenden wir den asynchronen Ablauf. Dies ist nicht zwingend notwendig, aber ich wollte euch mal beide Varianten gezeigt haben.

var var1 = 'Wert1';
var var2 = 'Wert2';

ajax.open("POST", "index.php", true);

var params = "send=true&form=foo&v1="+escape(var1)+"&v2="+escape(var2);

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.setRequestHeader("Content-length", params.length);
ajax.setRequestHeader("Connection", "close");

ajax.send(params);

Während beim synchronen Aufruf das Script auf die Antwort des Servers wartete, müssen wir uns nun selbst etwas bauen, um sicher zu gehen, dass wir die Antwort erst dann aufgreifen, wenn sie existiert. Dafür müssen wir die Methode onreadystatechange implementieren:

ajax.onreadystatechange = function() {
	// Prüfen, ob Abfrage fertig ist (readyState = 4) und ob die Antwort den Header 200 (alles ok) und nicht etwa 403 oder 404 gesendet hat
	if(ajax.readyState == 4 && ajax.status == 200) {
		// Nun Auswertung s.o.
		if(ajax.responseText == 'success') {

			document.getElementById("mydiv").innerHTML = "AJAX-Request war erfolgreich!";

		} else {

			document.getElementById("mydiv").innerHTML = "Es gibt einen Fehler! Das Script meldet: "+ajax.responseText;

		}
	}
}

Die HTML-Seite dazu nehmen wir aus dem Beispiel s. GET, die JS-Datei in ihrer Gesamtheit sieht nun so aus:

function ajaxrequest() {
	if (window.XMLHttpRequest) {

		// IE ab 7; Mozilla ab 1.4; Opera ab 8.0; Webkit
		var ajax = new XMLHttpRequest();

	} else {

		// IE 5 und 6
		var ajax = new ActiveXObject("Microsoft.XMLHTTP");

	}

	var var1 = 'Wert1';
	var var2 = 'Wert2';

	ajax.open("POST", "index.php", true);

	var params = "send=true&form=foo&v1="+escape(var1)+"&v2="+escape(var2);

	ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajax.setRequestHeader("Content-length", params.length);
	ajax.setRequestHeader("Connection", "close");

	ajax.send(params);

	ajax.onreadystatechange = function() {

		// Prüfen, ob Abfrage fertig ist (readyState = 4) und ob die Antwort den Header 200 (alles ok) und nicht etwa 403 oder 404 gesendet hat
		if(ajax.readyState == 4 && ajax.status == 200) {
		
			// Nun Auswertung s.o.
			if(ajax.responseText == 'success') {

				document.getElementById("mydiv").innerHTML = "AJAX-Request war erfolgreich!";

			} else {

				document.getElementById("mydiv").innerHTML = "Es gibt einen Fehler! Das Script meldet: "+ajax.responseText;

			}
		}
	}
}

Die PHP-Datei können wir um den POST-Teil erweitern, sie sieht nun so aus:

<?php

if(isset($_POST['send']) && $_POST['send'] == 'true') {

	try {
	
		// tue irgendwas.
		echo 'success';
		exit;
	
	} catch(Exception $e) {
		
			echo nl2br($e->toString());
			exit;
	
	}

}

if(isset($_GET['foo']) && $_GET['foo'] == 'bar') {

	try {

		// Irgendwas.
		echo 'success';
		exit;

	} catch(Exception $e) {

		echo nl2br($e->toString());
		exit;

	}

}

echo 'Ung&uuml;ltiger Aufruf!';
exit;

?>

Das war mein kurzer Überblick über AJAX und wie man es mit GET und POST nutzen kann. Wenn ihr noch Fragen oder Anregungen habt, dann scheut euch nicht, sie hier zu posten. Vielleicht hilft das dem einen oder anderen.