Maschinendenk

AHAH - Ajax Light ?

1 Kommentar

AHAH (“Asynchronous HTML and HTTP”) ist ein Subset der AJAX Methode, das sich auf die asynchrone Manipulation von HTML Seiten durch Rückgabedaten von Serverscripten beschränkt.

Es ist dafür sehr einfach zu verstehen und in bestehende Projekte zu integrieren.
Es werden lediglich 2 einfache Javascript Funktionen benötigt.

Das Tutorial eignet sich daher gut für Ajax-Einsteiger.

Das XMLHTTP Objekt ermöglicht es uns Daten entweder als XML oder als Text zurückgeben zu lassen.
Um Daten als XML zurückgeben zu lassen nutzen wir die responseXML Methode, für Text die ResponseText Methode.

Wenn wir lediglich HTML Seiten ohne Reload aktualisieren / verändern wollen, ist es eigentlich nicht nötig die komplizierte Variante mit XML (XML Parsing, XSLT Transformation) zu wählen.

Mit der responseText Methode können wir unsere Serverscripte direkt (X)HTML zurückgeben lassen, und in unsere Seiten einfügen.

Hierzu benötigen wir nur die beiden Javascript Funktionen CallAHAH (um die Anfrage abzuschicken) und ResponseAHAH (für die Verarbeitung der Rückantwort):

Function CallAHAH()

</p>
function callAHAH(url, pageElement, callMessage, errorMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest();
/* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
/* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
/* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responseAHAH(pageElement, errorMessage);};
req.open("GET",url,true);
req.send(null);
}

So werden die Erstellung des XMLHTTP Objekts und das Absenden der Anfrage in einer einfachen Javascript Funktion kombiniert.

Die Funktion nimmt vier Parameter entgegen:

  • url - Die Adresse des Serverscripts das wir aufrufen wollen
  • pageElement - Die ID des HTML Elements das verändert werden soll
  • Call Message - Ein Text der in pageElement angezeigt wird, solange der Call ausgeführt wird (etwa “Bitte warten”)
  • errorMessage - Ein Text der angezeigt wird, wenn das Request fehlgeschlagen ist

Um die Serverresponse auszuwerten, ruft CallAHAH eine zweite Funktion auf - ResponseAHAH.
Hier wird dann auch die eigentliche Manipulation der HTML Seite durchgeführt.

Function ResponseAHAH():

</p>
function responseAHAH(pageElement, errorMessage) {
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML
= output;
} else {
document.getElementById(pageElement).innerHTML
= errorMessage+"\n"+responseText;
}
}
}

Man kann diese beiden Funktionen einfach in eine JS Datei verpacken, und diese im Head Bereich seiner HTML Seiten einbinden.
Dies ermöglicht auch die einfache Einbindung in bereits bestehende Webseiten.

In naher Zukunft werde ich hier einige Tutorials veröffentlichen, die praktische Anwendungen anhand der hier vorgestellten Funktionen demonstrieren.

Download der JS Datei: ajax.zip

Geschrieben von Philipp

Januar 27th, 2006 at 5:54

Veröffentlicht in Allgemein

1 Kommentar zu 'AHAH - Ajax Light ?'

Kommentare abonnieren mit RSS oder TrackBack zu 'AHAH - Ajax Light ?'.

  1. Gibt es Updates zu AHAH?

    Michael

    29 Apr 10 um 9:37

Kommentar schreiben

Sie müssen eingeloggt sein um einen Kommentar zu verfassen.