Javascript: HTTP-Requests mit XMLHttpRequest

Veröffentlicht am

Achtung: Dieser Beitrag erschien ursprünglich auf meinem alten Blog und ist sehr alt. Manche Meinungen und Ansichten können, aber müssen sich nicht geändert haben.

Früher musste man um eine Webseite dynamisch zu aktualisieren den Besucher die komplette Seite neu laden lassen. Zum Glück gibt es mit den Web 2.0-Technologien wie Ajax die Möglichkeit, über Javascript eine HTTP-Anfrage an den Webserver zu senden, das Ergebnis zu bekommen, dieses weiter zu verarbeiten um dann die Inhalte der Seite aktualisieren zu können.

Das xmlHttpObject erzeugen

Zu allererst muss ein xmlHttpObject erzeugt werden das möglichst in 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, wo dann der Code zum Senden und Empfangen des HTTP-Request 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:

  1. der Dateiname der Datei, die eingebunden werden soll
  2. 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. Diemal 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>
Bild meiner Person

Über mich

Hi. Ich bin Thomas. Hier veröffentlichte ich in unregelmäßgen Abständen mehr oder weniger interessante Beiträge über Dies und Jenes, hauptsächlich über Computer und IT. Außerdem mochte ich die Linux-Kommandozeile, vor allem wenn ich mit (m)einer mechanischen Tastatur darauf herumhacken kann. 😀 Es wird hier aus persönlichen Gründen nicht mehr viel neues geben.