Simple AJAX-Klasse
Ich habe vor ca zwei Jahren bereits einen kleinen Beitrag über Ajax geschrieben und muss das nun für ein Projekt im Geschäft neu aufrollen. Mit etwas OOP habe ich eine Ajax-Klasse geschrieben, die die Daten vom Server abholt und in ein beliebiges HTML-Element einfügt.
Mit dieser Klasse sind auch mehrere paralelle Anfragen möglich und das ganze funktioniert im Firefox, IE und Opera. Andere Browser habe ich (noch) nicht getestet. Die Klasse erwartet den Parameter Url (die Adresse die aufgerufen werden soll) und Dst (die ID des HTML-Elements für die Ausgabe). Mit einigen Veränderungen kann die Klasse die Daten vom Server auch anderst ausgeben und natürlich kann man das noch beliebig erweitert (Lade-Bilder usw.).
Das ganze wird nun folgendermassen aufgerufen. Hier wird die Adresse ajax.php?param=test angefragt und die Anwort vom Server wird in das HTML-Element (div/span/p/usw..) geschrieben.
Mit dieser Klasse sind auch mehrere paralelle Anfragen möglich und das ganze funktioniert im Firefox, IE und Opera. Andere Browser habe ich (noch) nicht getestet. Die Klasse erwartet den Parameter Url (die Adresse die aufgerufen werden soll) und Dst (die ID des HTML-Elements für die Ausgabe). Mit einigen Veränderungen kann die Klasse die Daten vom Server auch anderst ausgeben und natürlich kann man das noch beliebig erweitert (Lade-Bilder usw.).
// Objekt XMLHttp
// Param url: Url der aufzurufenden Datei
// Param dst: ID des HTML-Elements
XMLHttp=function(url,dst)
{
// Den Browsertyp auslesen
var browser=navigator.appName;
if(browser=="Microsoft Internet Explorer") // IE
{
var http=new ActiveXObject("Microsoft.XMLHTTP");
}
else // Mozilla, Safari, Opera, usw.
{
var http=new XMLHttpRequest();
}
// HTTP-Request senden
// Parameter url als Adresse
http.open("GET",url,true);
// Wenn Status geaendert wurde
http.onreadystatechange=function()
{
// ueberpruefen, ob daten gesendet wurden
// readystate 4 = complete
if(http.readyState==4)
{
// ueberpruefen, ob status vom server richtig ist
// status 200 = OK
if(http.status==200)
{
// Antwort vom Server in HTML-Element schreiben
// dst als ID
document.getElementById(dst).innerHTML=http.responseText;
}
else
{
// HTTP Fehlercode zurückgeben
alert("Fehler:\nHTTP-Status: "+http.status+"\nHTTP-Statustext: "+http.statusText);
}
}
}
http.send(null);
}Das ganze wird nun folgendermassen aufgerufen. Hier wird die Adresse ajax.php?param=test angefragt und die Anwort vom Server wird in das HTML-Element (div/span/p/usw..) geschrieben.
ajaxObj=new XMLHttp("ajax.php?param=test","feld");
Kommentare
Trackback von: t-error.ch
24.04.09 09:04
Nun habe ich doch noch einen "Fehler" in meiner Ajax-Klasse gefunden...