Featured

Synchrone und asynchrone HTTP-Requests in JavaScript

Von Sebastian Henke ⋅ 28.08.08 ⋅  Beitrag per Mail verschicken ⋅  Beitrag drucken ⋅ Kommentieren ⋅ 3,184 mal betrachtet

In JavaScript gibt es zwei Möglichkeiten HTTP-Requests zu verarbeiten. Sie können entweder synchron oder asynchron durchgeführt werden. Synchron bedeutet hier, dass die weitere Programmausführung so lange unterbrochen wird, bis der Request durchgeführt wurde und eine Anwort vorliegt. Diese Programmierung ist zwar einfacher verständlich, birgt jedoch einige Schwierigkeiten. JavaScript ist nicht multithreadingfähig. Somit können keine anderen Operationen durchgeführt werden, solange auf einen synchronen HTTP-Request gewartet wird. Insbesondere, wenn z. B. auf einer Homepage mehrere Inhalte per HTTP-Requests nachgeladen werden sollen, kann somit das "Ausfallen" eines einzigen Requests zum Nichtladen weiterer Inhalte führen. Zudem wird wertvolle Rechenzeit (z. B. für die Vorbereitung weiterer Requests) verschwendet!

Um diesem Problem zu entgehen, werden besonders zu diesem Zweck in der Regel asynchrone Requests verwendet. Dies bedeutet, dass JavaScript direkt nach dem Absenden des Requests (siehe unten) nicht auf eine Antwort wartet, sondern mit der Ausführung in der nächsten Zeile fortfährt. Um das Ergebnis der Anfrage dennoch verarbeiten zu können, wird dem Request-Objekt zusätzlich eine Funktion mitgegeben, die bei einer Statusänderung des Requests ausgeführt wird. Diese asynchrone Form wird AJAX (Asynchronous JavaScript and XML) genannt und wird vermutlich dem einen oder anderen schon als "Buzzword" bekannt sein.

Die folgenden zwei Beispiele - einmal synchron, einmal asynchron - führen jeweils einen Request aus und geben nach erfolgreicher Abfrage mittels alert eine Meldung aus.

Synchron:

 
// In den ersten Zeilen wird ein HTTP-Requestobjekt erzeugt. Dieses geschieht mittels Browserweiche.
// Der interessante Teil geschieht ab dem nächsten Kommentar.
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;
		}
	}
}
 
// Vorbereiten des Requests:
xmlHttpObject.open('get', getUrl, false);  // HIER WICHTIG: das "false " sorgt für den synchronen Request!
xmlHttpObject.send(null);                      // Request absenden. Hier wird gewartet, bis der Request erfolgreich war.
 
if (xmlHttpObject.readyState == 4)         //  Status 4 bedeutet, dass die Abfrage erfolgreich war und das Ergebnis vorliegt
{
	alert("HTTP-Request erfolgreich!");  // Das Ergebnis des Requests findet sich in xmlHttpObject.responseText
} else {
	alert("Request fehlgeschlagen!");
}
 

Asynchron:

 
var xmlHttpObject = false;
// In den ersten Zeilen wird ein HTTP-Requestobjekt erzeugt. Dieses geschieht mittels Browserweiche.
// Der Interessante Teil geschieht ab dem nächsten Kommentar.
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;
		}
	}
}
 
xmlHttpObject.open('get', getUrl); // Hier kein false wie oben -> Request läuft asynchron
xmlHttpObject.onreadystatechange = setstate;            // HIER WICHTIG: Funktion wird gesetzt, die bei Statusänderung ausgeführt wird.
xmlHttpObject.send(null);
 
function setstate()	{
	if (xmlHttpObject.readyState == 4)
	{
		alert("Request wurde erfolgreich verarbeitet.");
	}
}	
 
alert("Request wurde soeben abgesendet!");   // Kaum zu glauben, aber dieses Alert wird vor dem oben in der Funktion aufgerufen!
 

Ähnliche Beiträge

Keine gefunden.