Asynchron
Request Status 1-4
xmlHttp.readyState
Das XmlHttpRequestObject durchläuft 4 Stadien bis ein Response zurückgegeben wird. Diese vier Stadien können abgerufen und ausgegeben werden. Drei Dateien sind für dieses Ajax nötig, aber von Bedeutung ist nur das Javascript. Selbst das Lesen der Datei vom Server erledigt es selber (ohne php).
- ajax_async.php mit dem HTML Code stellt den Div für die Ausgabe zur Verfügung und lädt das Javascript.
Auch der Link zum Aufruf der Javascript Funktion process() ist hier. - ajax_async.js das eingebundene Javascript mit der Funktion, welche das Request Objekt erstellt.
- ajax_async.txt die Datei, welche vom Script auf dem Server gelesen wird.
Die Ausgabe
Hallo Server.Das Javascript
new XMLHttpRequest()
// speichert die Instanz von XMLHttpRequest welche unten kreiert wird
var xmlHttp = createXmlHttpRequestObject();
// kreiert eine Instanz von XMLHttpRequest
function createXmlHttpRequestObject()
{
// speichert die Referenz zum XMLHttpRequest Objekt
var xmlHttp;
// dies sollte für alle Browser ausser IE gehen
try
{
// versuche ein XMLHttpRequest Objekt zu erzeugen
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// dies sollte für IE gehen
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.7.0",
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
// try every prog id until one works
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
// try to create XMLHttpRequest object
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {}
}
}
// gibt das erzeugte Objekt oder eine Fehlermeldung zurück
if (!xmlHttp)
alert("Error - Kein XMLHttpRequest Objekt erzeugt.\nEs ist keine Ajax Funktionalitaet moeglich.");
else
return xmlHttp;
}
// wird aufgerufen, um eine Datei vom Server zu lesen
function process()
{
// nur weiter, wenn xmlHttp nicht leer ist
if (xmlHttp)
{
// versuche Serververbindung
try
{
// liest die datei ajax_async.txt vom Server mit Methode GET
xmlHttp.open("GET", "ajax_async.txt", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
// Fehlermeldung auffangen und ausgeben
catch (e)
{
alert("Error - Keine Verbindung zum Server:\n" + e.toString());
}
}
}
// Callback Funktion behandelt Serverantwort
function handleRequestStateChange()
{
// Beschafft eine Referenz zum <div> Element in der HTML Seite
myDiv = document.getElementById('myDivElement');
// Einfügen des Status der Anfrage
if (xmlHttp.readyState == 1)
{
myDiv.innerHTML += "Request Status: 1 (loading) ... <br />";
}
else if (xmlHttp.readyState == 2)
{
myDiv.innerHTML += "Request Status: 2 (loaded) ... <br/>";
}
else if (xmlHttp.readyState == 3)
{
myDiv.innerHTML += "Request Status: 3 (interactive) ... <br />";
}
// wenn readyState 4 ist, lesen der Server-Antwort
else if (xmlHttp.readyState == 4)
{
// weiter nur wenn HTTP Status "OK" also 200 ist
if (xmlHttp.status == 200)
{
try
{
// gibt Antwort als String zurück
response = xmlHttp.responseText;
// Meldung in myDiv einfügen zum anzeigen
myDiv.innerHTML += "Request Status: 4 (complete). <br/>Die Datei auf dem Server enthält folgenden Inhalt: <br />";
myDiv.innerHTML += response;
}
catch(e)
{
// Fehlermeldung
alert("Error: " + e.toString());
}
}
else
{
// Statusmeldung von XML anzeigen
alert("Error - Der Fehler beim Empfang der XML Daten ist:\n" +
xmlHttp.statusText);
}
}
}
Check den Code.