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 11/2017: Server für Daheim

Digitale Ausgabe: Preis € 8,50
(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

Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 3 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...
Backup mit KUP unter Suse 42.3
Horst Schwarz, 24.09.2017 13:16, 3 Antworten
Ich möchte auch wieder unter Suse 42.3 mit Kup meine Backup durchführen. Eine Installationsmöglic...
kein foto, etc. upload möglich, wo liegt mein fehler?
kerstin brums, 17.09.2017 22:08, 5 Antworten
moin, zum erstellen einer einfachen wordpress website kann ich keine fotos uploaden. vom rechne...
Arch Linux Netzwerkkonfigurationen
Franziska Schley, 15.09.2017 18:04, 0 Antworten
Moin liebe Linux community, ich habe momentan Probleme mit der Einstellung des Lan/Wlan in Arc...