Ajax - Tutorial

Dieses Tutorial ist in 5 Abschnitte unterteilt, die jeweils aufeinander aufbauen.
Ich empfehle deshalb, jeden Abschnitt Schritt für Schritt durchzugehen, die Unklarheiten verschwinden auf diese Weise von selbst.
Sollte die eine oder andere Frage dennoch unbeantwortet bleiben, kann ich folgende Quellen zum Nachlesen empfehlen:
Javascript / HTML PHP

AJAX steht für Asynchronous JavaScript and XML.
Mit Ajax ist es möglich 2.0 Web-Anwendungen zu erstellen die (im Optimalfall) kaum noch von normalen Desktop-Anwendungen zu unterscheiden sind.

Warum? Ganz einfach: Bei "normalen" Web-Anwendungen muss bei jedem Klick auf einen Link (oder beim Absenden eines Formulars die ganze Seite neu geladen werden. Dies erzeugt viel Traffic und somit lange Ladezeiten. Manche Webseiten sind deshalb mit Frames (teilweise sichtbar, teilweise unsichtbar) um die Ladezeiten bei größeren Webseiten halbwegs im erträglichen Maß zu halten.
Und genau hier setzt Ajax an: Es werden nur noch die benötigten Daten geladen (asynchron), was sich sehr positiv auf den Traffic und somit die Ladezeiten auswirkt.

Kurz zusammengefasst:
Mit Ajax ist es uns möglich HTTP-Request an den Server zu schicken ohne gleich die ganze Seite neu zu laden.

Was brauche ich um Ajax nutzen zu können?
Als Webmaster einer Ajax-Website (und um die nachfolgenden Beispiele nachvollziehen zu können) benötigst du Kenntnisse in Javascript, HTML und PHP (diese Techniken werden wir in den Beispielen verwenden).

Was brauchen meine User um Ajax nutzen zu können?
Die Grundlagen für Web 2.0 Technologien wird vom Webbrowser geschaffen, das heißt, die User benötigen Internet Explorer ab Version 5 oder Mozilla Firefox ab Version 1.0.

Die Requestmethoden die uns interessieren sind GET und POST, der größte Unterschied zwischen den beiden Methoden ist, dass GET auf 1024 Byte begrenzt ist, bei größeren Datenmengen kann man also nur POST verwenden. Wir verwenden in diesem Tutorial nur POST.

Beispiel:

var request = new XMLHttpRequest();
request.open('post', 'meinPhpScript.php', true);
request.send(null);

Zeile 1:
Wir erzeugen einen neuen Request.

Zeile 2:
Wir öffnen den Request.
Der erste Parammeter (post), gibt die Requestmethode an.
Der zweite Parameter ist das Ziel, also die Adresse an die wir unseren Request verschicken wollen.
Der dritte Parameter ist optional und der Wert true ist Standard. Wenn wir hier false eintragen bedeutet das, dass die Anfragen nicht asynchron laufen und der User so lange warten muss, bis der aktive Request abgeschlossen ist, um z.B. einen neuen Request zu starten.

Zeile 3:
Wir senden den Request ab - hier ohne Paramater, also einen leere Request -> null.

Der Internet Explorer kennt das XMLHttpRequest Objekt bis Version 7 nicht sondern nur ActivX Objekte.

Die Lösung wird daher so aussehen:

// Request senden
function setRequest() {
	// Request erzeugen
	if (window.XMLHttpRequest) {
		request = new XMLHttpRequest(); // Mozilla, Safari, Opera
	} else if (window.ActiveXObject) {
		try {
			request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
		} catch (e) {
			try {
				request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
			} catch (e) {}
		}
	}

	// überprüfen, ob Request erzeugt wurde
	if (!request) {
		alert("Kann keine XMLHTTP-Instanz erzeugen");
		return false;
	} else {
		var url = "meinPhpScript.php";
		// Request öffnen
		request.open('post', url, true);
		// Request senden
		request.send(null);
		// Request auswerten
		request.onreadystatechange = interpretRequest;
	}
}

Erklärung:
In der Browserweiche müssen wir mit dem try-catch-Statement arbeiten denn es kann ja sein das der User seinem Internet Explorer so konfiguriert hat das er keine ActivX Objecte akzeptiert und das würde zu einem Fehler führen! Ebenfalls möglich ist, dass der User den IE 6 verwendet, daher kann kein ActivX Object im IE 5 erzeugt werden und das Script würde auch abgebrochen werden, das bedeutet, dass das Script den Browser nicht mehr auf die Version IE 6 hin überprüfen könnte! Um das zu verhindern benutzen wir diese Fehlerbehandlung.
In der letzten if Abfrage wird überprüft ob der Request erzeugt werden konnte. Ist das nicht der Fall bedeutet das, dass der User einen veralterten Browser hat oder das sein Internet Explorer keine ActivX Objekte akzeptiert.

• onreadystatechange
• responseText
• responseXML
• status

Der Event-Handler onreadystatechange wird bei jeder Status Änderung aufgerufen und kann folgende Werte enthalten:

• 0 = uninitiElized
• 1 = loading
• 2 = loaded
• 3 = interactiv
• 4 = complete

Der Event-Handler responseText enthält die rohen Textdaten aus dem Antwortpaket.
Der Event-Handler responseXML: Antwortet der Server mit einem XML-Dokument enthält diese Eigenschaft ein DOM Objekt.
Der Event-Handler status enthält den numerischer Statuscode des Antwortpakets: 404 = Not Found oder 200 = OK.

Beispiel für die Anwendung der event-handler:

// Request auswerten
function interpretRequest() {
	switch (request.readyState) {
		// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
		case 4:
			if (request.status != 200) {
				alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
			} else {
				var content = request.responseText;
				// den Inhalt des Requests in das <div> schreiben
				document.getElementById('content').innerHTML = content;
			}
			break;
		default:
			break;
	}
}

1. Als erstes machen wir - wie könnte es denn auch anders sein - das berühmte "Hallo Welt" Einführungsbeispiel zum Aufwärmen.
2. Nun wollen wir asynchron Daten senden, via PHP bearbeiten und das Ergebnis davon empfangen.
3. Als nächstes senden wir mehrere Daten auf einmal.
4. Nun empfangen wir mehrere Daten auf einmal, dazu erzeugen wir einen XML-Request werten ihn aus.
5. Wir benutzen eine parametisierte Request-Auswertungs-Funktion und bekommen einen kleinen Einblick wie wir unsere AJAX-Scripte ausreizen können.