1. Das obligatorische "Hallo Welt" Beispiel

Um den wahnsinnig intelligenten Satz "Hallo Welt" zum x-ten Mal auf den Bildschirm zu zaubern benötigen zuerst einmal eine einfache HTML Seite, die wir mit ein bisschen Ajax tunen.

Das Beispiel im Detail:

Unser Script enthält einen einfachen Link. Beim Klick auf den Link, wird der berühmte Satz "Hallo Welt" angezeigt.

Die Vorgehensweise des HTML-Scripts wurde vorher im theoretischen Teil des Tutorials genau erklärt. Wenn es also Unklarheiten gibt, bitte hier nachsehen.

Was noch nicht erklärt wurde, ist der Aufbau des PHP-Scripts, das holen wir aber jetzt nach!
Zuerst müssen wir für die korrekte Kodierung der Daten sorgen.

header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte Kodierung

Dann müssen wir noch sicherstellen, dass der Browser den Antwort-Request auch sicher annimmt.

header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE

Zuletzt senden wir den Antwort-Request ab. Das geht ganz einfach, indem wir die Daten per echo ausgeben.

$text = "Hallo Welt";
echo $text;

Der komplette Code (HTML-Script):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Ajax Beispiel 001</title>
  <script type="text/javascript">
  <!--
	var request = false;

	// 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 = "ajax_001.php";
			// Request öffnen
			request.open('post', url, true);
			// Request senden
			request.send(null);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// 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;
		}
	}
  //-->
  </script>
 </head>
 <body>
  <a href="javascript:setRequest()">klick mich an</a>
  <div id="content"></div>
 </body>
</html>

Der komplette Code (PHP-Script):

<?php
header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte Kodierung
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE

$text = "Hallo Welt";
echo $text;
?>

Das Script in Aktion:

klick mich an

hier wird gleich DER Satz stehen