Nun gibts wieder ein kleines Update meiner Ajax Klasse. Das "Problem" an der alten Version war, dass die Ausgabe einfach in ein HTML-Element geschrieben wurde. Dies ist natürlich eine Einschränkung, auch wenn es bei meinen Scripten zu 95% korrekt ist. Bei den anderen 5% muss die Ausgabe der Daten aber anders aussehen. Bisher war die folgende Zeile für die Ausgabe verantwortlich:
Die Lösung ist nun die Folgende: Man kann der Klasse wenn nötig eine Funktion mit dem Namen "response" hinzufügen und wenn die existiert wird sie mit den Daten als Parameter aufgerufen, sonst werden die Daten wie bisher einfach ins HTML-Element geschrieben. Aus der Zeile oben wird nun der folgende Codeschnippsel:
Und die Benutzerdefinierte "Callback-Funktion" erstellt man so:
Das wars auch schon. Recht simpel aber es Funktioniert tadellos und ist in meiner Meinung auch sehr einfach zu handhaben. Die komplette Klasse sieht nun so aus:
document.getElementById(obj.dst).innerHTML=http.responseText;
Die Lösung ist nun die Folgende: Man kann der Klasse wenn nötig eine Funktion mit dem Namen "response" hinzufügen und wenn die existiert wird sie mit den Daten als Parameter aufgerufen, sonst werden die Daten wie bisher einfach ins HTML-Element geschrieben. Aus der Zeile oben wird nun der folgende Codeschnippsel:
// wenn obj.response eine funktion ist, diese aufrufen
if(typeof(obj.response)=="function")
{
obj.response(http.responseText);
}
else
{
// antwort ins html element schreiben
document.getElementById(obj.dst).innerHTML=http.responseText;
}Und die Benutzerdefinierte "Callback-Funktion" erstellt man so:
ajax=new XMLHttp;
// benutzerdefinierte funktion
ajax.response=function(response)
{
// inhalt ins html element schreiben
document.getElementById(ajax.dst).innerHTML=response;
// element mit einem scriptaculous effekt anzeigen
Effect.BlindDown(ajax.dst);
}
// ajax request starten
ajax.start("rpc.php?id="+id,"element");Das wars auch schon. Recht simpel aber es Funktioniert tadellos und ist in meiner Meinung auch sehr einfach zu handhaben. Die komplette Klasse sieht nun so aus:
// Objekt XMLHttp
// Param url: Url der aufzurufenden Datei
// Param dst: ID des HTML-Elements
XMLHttp=function()
{
// Den Browsertyp auslesen
var browser=navigator.appName;
var obj=this;
if(browser=="Microsoft Internet Explorer") // IE
{
var http=new ActiveXObject("Microsoft.XMLHTTP");
}
else // Mozilla, Safari, Opera, usw.
{
var http=new XMLHttpRequest();
}
obj.start=function(url,dst,load)
{
http.abort();
obj.dst=dst;
// 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)
{
// wenn obj.response eine funktion ist, diese aufrufen
if(typeof(obj.response)=="function")
{
obj.response(http.responseText);
}
else
{
// antwort ins html element schreiben
document.getElementById(obj.dst).innerHTML=http.responseText;
}
}
else if(http.status!=0)
{
// HTTP Fehlercode zurückgeben
document.getElementById(obj.dst).innerHTML="Fehler:\nHTTP-Status: "+http.status+"\nHTTP-Statustext: "+http.statusText;
}
}
}
http.send(null);
}
}