Früher musste man zur Aktualisierung der Inhalte auf einer Webseite den Besucher die komplette Seite inkl. aller Ressourcen (sofern diese nicht gecached wurden) neu laden lassen. Zum Glück gibt es mit den neuen Web 2.0-Technologien wie Ajax die Möglichkeit, über Javascript eine HTTP-Anfrage asynchron an den Webserver zu senden, das Ergebnis zu bekommen und dieses dann weiterzuverarbeiten, um dann die Inhalte der Seite aktualisieren zu können.
Das xmlHttpObject erzeugen
Zuallererst muss ein xmlHttpObject erzeugt werden, das in möglichst allen modernen Webbrowsern funktioniert. Da der Internet Explorer immer wieder seine Problemchen hat, muss man hier ein paar Fallunterscheidungen schreiben. Die sind aber nicht allzu kompliziert.
Wir erstellen also nun unsere Javascript-Datei, in die der ganze Code reinkommt. Im folgenden Codebeispiel erzeugen wir das xmlHttpObject, mit dem wir dann asynchron Daten senden und empfangen können.
var xmlHttpObject = false;
if(typeof XMLHttpRequest != 'undefined') {
xmlHttpObject = new XMLHttpRequest();
}
if(!xmlHttpObject) {
try {
xmlHttpObject = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e) {
try {
xmlHttpObject = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e) {
xmlHttpObject = null;
}
}
}GET-Request auf Datei und Inhalt einbinden
Da nun das xmlHttpObject erzeugt wurde, ist der Code bereit zum Senden von HTTP-Requests. Als Beispiel laden wir jetzt mal per Klick auf einen Button eine Textdatei direkt in das HTML-Dokument rein – und das ohne Neuladen der Seite. Zuerst erstellen wir das HTML-Dokument, welches auch die Javascript-Datei im <head>-Bereich einbindet. Dann öffnen wir nochmal einen <script>-Tag, in das dann der Code zum Senden und Empfangen des HTTP-Requests rein kommt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Ajax HTTP-Request</title>
<script src="javascript.js"></script>
</head>
<body>
<!-- Bei Klick wird die loadContent()-Funktion aufgerufen -->
<button onclick="loadContent('beispiel.txt', 'ajaxcontent')">Lade Inhalt</button>
<!-- Hier wird der Inhalt des HTTP-Response reingeschrieben -->
<div id="ajaxcontent"></div>
</body>
</html>Nun ist das HTML-Dokument vorbereitet. Die Javascript-Funktion loadContent erwartet zwei Parameter:
- der Dateiname der Datei, die eingebunden werden soll
- die ID des DOM-Elements, in welches der Inhalt nach dem Laden geschrieben werden soll.
Die Funktion loadContent wird ausgeführt, sobald man auf den Button geklickt hat. Und diese Funktion befüllen wir nun im nächsten Codebeispiel mit den entsprechenden Zeilen. Der <script>-Block kommt dann direkt unter den ersten im HTML-Header.
<script>
function loadContent(file, outputdiv) {
xmlHttpObject.open('GET', file);
xmlHttpObject.send(null);
xmlHttpObject.onreadystatechange = function() {
if(xmlHttpObject.readyState == 4 && xmlHttpObject.status == 200) {
document.getElementById(outputdiv).innerHTML = xmlHttpObject.responseText;
}
}
}
</script>Zuerst wird das xmlHttpObject vorbereitet, indem man die Request-Methode und die URL angibt. Danach wird über die Methode send der Request abgeschickt. Das nächste ist nun onreadystatechange. Die Funktion dahinter wird immer ausgeführt, wenn sich am Status der Anfrage etwas ändert – also sie kann mehrmals ausgeführt werden. In diesem Block wird dann mit einer if-Abfrage überprüft, ob readyState == 4 (erfolgreich) und der HTTP-Statuscode 200 ist. Wenn das der Fall ist, dann wird das DOM-Element mit der ID ajaxcontent mit dem Inhalt der Datei befüllt.
Einen POST-Request senden
Zum Abschluss noch ein kleines Beispiel, wie man POST-Requests abschicken kann. Diesmal aber ohne Beispielausgabe, sondern nur der Javascript-Code zum Senden eines POST-Requests. Dieser ist eigentlich ganz einfach. Man nimmt anstatt GET einfach POST, setzt noch ein Header-Feld und schickt die Daten über die send-Methode ab.
<script>
function postRequest(url, data) {
xmlHttpObject.open('POST', url);
xmlHttpObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpObject.send(data);
xmlHttpObject.onreadystatechange = function() {
if(xmlHttpObject.readyState == 4 && xmlHttpObject.status == 200) {
alert('POST-Request successful.');
}
}
}
var link = 'http://example.org/';
var postdaten = 'field1=bla&field2=bla';
postRequest(link, postdaten);
</script>