Aus LinuxUser 10/2006

Websites programmieren mit AJAX (Seite 2)

Klappt das nicht, können Sie sich schon einmal mit der Fehlersuche vertraut machen. Am besten verwenden Sie für die Entwicklung von AJAX- und anderen Webanwendungen den Browser Firefox, der einige dafür praktische Tools mitbringt. So finden Sie im Menü Tools den Punkt JavaScript Console, der ein kleines Fenster für Javascript-Fehlermeldungen.

Sehr vielfältig sind die Fehlerquellen in diesem einfachen Fall noch nicht. Entweder findet der Server die Javascript-Datei nicht (achten Sie beim Namen auch auf richtige Groß- und Kleinschreibung) oder sie enthält einen Syntaxfehler: Es fehlt also eine Klammer, ein Strichpunkt oder Ähnliches.

Verbindung zum Server

Bisher schickt der Browser nur je eine Anfrage für die HTML-Seite und die Javascript-Datei an den Server. Damit ist die Kommunikation abgeschlossen, und auch beim Klicken auf den Link nehmen die beiden keinen Kontakt mehr auf. Um weitere Daten vom Server zu holen, muss der Javascript-Code zunächst ein so genanntes Anfrage-Objekt (Request-Objekt) anlegen. Das übernimmt die Funktion XMLHttpRequest(), von der AJAX sein X im Namen bezieht. Das neu erzeugte Request-Objekt weist der folgende Befehl der Variablen request zu:

request = new XMLHttpRequest();

Das Request-Objekt besitzt einige Methoden, die im Folgenden zur Kommunikation mit dem Server wichtig sind. Als erstes legt request.open() die Parameter der anschließenden Verbindung fest.

Der erste Parameter bestimmt die HTTP-Methode (GET oder POST), dann folgt die zu kontaktierende Webadresse (URL). Der nächste Parameter legt fest, ob der Zugriff asynchron geschehen soll (in diesem Fall ist der Wert true). Zwei weitere, optionale Parameter enthalten Benutzername und Passwort für zugriffsgeschützte Seiten. Steht in der Javascript-Variablen url die Adresse http://localhost/~oliver/ajax/test.php, bereitet die folgende Zeile die Verbindung vor:

request.open("GET", url, true);

Bevor Sie die Anfrage an den Server schicken, müssen Sie noch die Funktion festlegen, die der Browser aufruft, wenn er die Antwort erhält. Sie erinnern sich: Weil die Browser und Server asynchron kommunizieren, wartet der Browser nicht auf die Server-Antwort. Diese so genannte Callback-Funktion festzulegen legen Sie über das Feld onreadystatechange des Request-Objekts fest.

Wie der Name nahe legt, ruft der Browser die Callback-Funktion allerdings nicht nur auf, wenn er die Antwort erhalten hat, sondern immer wenn sich der Zustand des Request-Objekts ändert (state change). Insgesamt gibt es fünf Zustände, in denen es sich befinden kann, von unbenutzt (0) bis abgeschlossen (4).

Auf die Antwort warten

Schließlich schicken Sie die Anfrage mit der Methode send an den Server, die als optionale Parameter eventuelle Nutzdaten verarbeitet, zum Beispiel Benutzereingaben in Formularen.

Weil es in diesem einfachen Beispiel keine solchen Daten gibt, erhält send nur den leeren Parameter null. Listing 2 zeigt das komplette Listing der simplen AJAX-Anwendung. Als Callback-Funktion wird in Zeile 10 checkResult() eingetragen, das bei jedem Aufruf den aktuellen Zustand des Requests in einem Dialog ausgibt.

Listing 2

function checkResult()
{
  alert("Neuer Zustand: " + request.readyState);
}
function getRandom() {
   request = new XMLHttpRequest();
   var url = "http://localhost/~oliver/ajax/index.html";
   request.open("GET", url, true);
   request.onreadystatechange = checkResult;
   request.send(null);
}

Weil der Browser in diesem Beispiel mit der Antwort des Servers nichts anfängt, brauchen Sie sich auch nicht dabei zu verrenken, ein PHP-Skript zu schreiben. Sie können zur Demonstration den Request wie in Listing 2 mit der Index-Seite selbst durchführen. Die Verwendung des Request-Objekts und der Callback-Funktion ändert sich dadurch nicht.

Erscheinen keine Dialogfenster, geht es wieder an die Fehlersuche. Vielleicht haben Sie sich bei der Eingabe der URL-Variablen vertippt? Kopieren Sie den String (ohne Anführungszeichen), fügen Sie ihn in das Adressfeld eines neuen Browserfensters ein und drücken Sie die Eingabetaste. Reagiert der Server mit einer Fehlermeldung, vergleichen Sie noch einmal die Variable mit dem Dateinamen auf dem Server.

Eine andere Fehlerquelle hängt mit Sicherheitseinschränkungen von Javascript im Browser zusammen: Das Request-Objekt darf nur mit demjenigen Server Kontakt aufnehmen, von dem auch die ursprüngliche HTML-Seite stammt. Weichen die Server-Adressen voneinander ab, meldet der Browser mit „Permission denied“ die Verletzung der Sicherheitsrichtlinien.

Bei der Fehlersuche in AJAX-Anwendungen hat sich die Firefox-Extension Firebug als besonders hilfreich erwiesen [2]. Sie zeigt nicht nur Javascript-Fehler an, sondern auf Wunsch auch jeden einzelnen XMLHttpRequest mit Header-Feldern und Antwort-Codes.

LinuxUser 10/2006 KAUFEN
EINZELNE AUSGABE Print-Ausgaben Digitale Ausgaben
ABONNEMENTS Print-Abos Digitales Abo
TABLET & SMARTPHONE APPS
Deutschland

Hinterlasse einen Kommentar

  E-Mail Benachrichtigung  
Benachrichtige mich zu: