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.

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 02/2018: PAKETE VERWALTEN

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Wifikarte verhindert Bootvorgang
Maik Kühn, 21.01.2018 22:23, 1 Antworten
iwlwifi-7265D -26 failed to load iwlwifi-7265D -25 failed to load iwlwifi-7265D -24 failed to l...
sharklinux
Gerd-Peter Behrendt, 18.01.2018 23:58, 2 Antworten
Hallo zusammen, ich habe sharklinux von der DVD Installiert. 2x, jedesmal nach dem Reboot ist di...
Anfänger sucht Ratschläge
Alucard Nosferatu, 18.01.2018 21:56, 3 Antworten
Guten Tag, meine Wenigkeit würde gerne auf einer meiner Festplatten von meinen Feldrechnern e...
Suchprogramm
Heiko Taeuber, 17.01.2018 21:12, 1 Antworten
Hallo liebe Community, keine Ahnung ob dieses Thema hier schon einmal gepostet wurde. Ich hab...
Linux Mint als Zweitsystem
Wolfgang Robert Luhn, 13.01.2018 19:28, 4 Antworten
Wer kann mir helfen??? Habe einen neuen Laptop mit vorinstaliertem Windows 10 gekauft. Möchte g...