Crashkurs: Ajax

Foto: Stock.XCHNG

Mit diesem Ajax-Tutorial bekommen Sie einen Schnelleinstieg in das neue Trendthema.

Das Grundprinzip von Ajax ist einfach: Eine bereits fertig im Browser angezeigte Seite lädt Daten vom Server nach. In diesem Beispiel handelt es sich dabei um die Zeiteinstellung des Servers, die auf der Seite angezeigt wird und jederzeit aktualisiert werden kann. Der Unterschied zu einer herkömmlichen Anwendung liegt nun darin, dass dank Ajax nicht bei jedem Aktualisierungsvorgang die komplette Seite neu geladen werden muss, sondern lediglich der gewünschte Teil: die Serverzeit.

Bevor wir nun den dazu notwendigen Code Schritt für Schritt durchgehen, können Sie sich hier zunächst die fertige Ajax-Anwendung in Aktion anschauen:

Beim nun folgenden Code handelt es sich um das PHP-Skript, auf das die Ajax-Anwendung später zugreifen wird, um die jeweils aktuelle Serverzeit zu erhalten.

<?php

	// -----------------------
	// --- Datei: time.php ---
	// -----------------------

	// Seite soll nicht aus dem Cache geladen werden.
	header('Cache-Control: no-cache');

	// Unix-Zeitstempel ausgeben.
	echo time();

?>

Der Zugriff per JavaScript funktioniert nun folgendermaßen:

<script type="text/javascript">
//<![CDATA[

// -----------------------
// --- Datei: ajax.php ---
// -----------------------

// Wir wollen mit JavaScript eine Anfrage an den Server tätigen.
// Dafür steht eine vordefinierte Klasse zur Verfügung.

// Eine Instanz dieser Klasse soll in dieser Variablen gespeichert werden.
var ajax=false;

// Beim Firefox nennt sich die Klasse XMLHttpRequest.
if (window.XMLHttpRequest)
{
	ajax=new XMLHttpRequest;
}

// Beim Internet Explorer handelt es sich um ein ActiveX-Objekt.
else if (window.ActiveXObject)
{
	ajax=new ActiveXObject('Microsoft.XMLHTTP');
}

// Wir brauchen nun eine Funktion für den Abruf der Daten.
function load()
{
	// Die Anfrage soll mittels GET stattfinden.
	// Die angegebene URL muss vom selben Server stammen.
	ajax.open('GET', 'time.php');

	// Wir müssen festlegen, wie Antworten des Servers verarbeitet werden.
	// Dazu behalten wir stets den aktuellen Status der Anfrage im Auge.
	// Das Ereignis onreadystatechange tritt ein, wenn sich dieser ändert.
	ajax.onreadystatechange=function()
	{
		// Diese Eigenschaft enthält einen Code für den aktuellen Status.
		// Der Wert 4 steht dabei für complete.
		if (ajax.readyState==4)
		{
			// Die Eigenschaft responseText enthält die Antwort.
			window.document.getElementById('time').innerHTML=
				ajax.responseText;
		}
	}

	// Die Anfrage wird gesendet.
	ajax.send(null);
}

// Konnte zu Beginn kein Objekt erzeugt werden, wird das Skript nicht gestartet.
if (ajax)
{
	window.document.writeln('<p>');
	window.document.writeln('Serverzeit');
	window.document.writeln('[<a href="#" id="refresh">aktualisieren</a>]:');
	window.document.writeln('<span id="time">...</span>');
	window.document.writeln('</p>');

	// Beim Klicken auf den Link wird über eine neue Anfrage aktualisiert.
	window.document.getElementById('refresh').onclick=load;

	// Die erste Serveranfrage findet gleich nach dem Laden der Seite statt.
	window.onload=load;
}

//]]>
</script>