Mit Daten

Ganz im Sinne der AJAX-Erfinder ist das obige Beispiel nicht. Serveranfragen im Hintergrund sollen natürlich vor allem dazu dienen, dynamische Inhalte die aktuelle Webseite zu integrieren. Das PHP-Skript in Listing 3 soll dafür den Test-Service realisieren. Es gibt bei jeder Anfrage eine zufällig Zahl zwischen 1 und 100 aus.

Listing 3

<?
  srand(time());
  $random = (rand()%100);
  print $random;
?>

Haben Sie es unter dem Namen random.php im gleichen Verzeichnis auf dem Server gespeichert wie die anderen Dateien, müssen Sie die Variable url in ajax.js entsprechend ändern. Die entsprechende Zeile lautet dann:

var url = "http://localhost/~oli↩
ver/ajax/random.php";

Damit der Browser den geänderten Javascript-Code lädt, müssen Sie die ganze Seite mit dem Reload-Button neu laden. Klicken Sie auf den Link, zeigen die Dialogfenster wieder den jeweiligen Status des Request-Objekts.

An die gelieferten Server-Daten können Sie naturgemäß erst gelangen, wenn die Übertragung abgeschlossen ist, also im Zustand 4. Der Callback-Handler prüft also am besten bei jeder Zustandsänderung, ob dieser Endzustand schon erreicht ist, und verarbeitet erst am Ende die Nutzdaten.

Auslesen lässt er sich über die Variable readyState des Request-Objekts. Die Nutzdaten liefert das Feld responseText in ASCII-Textform. Die Funktion checkResult() sieht damit so aus, wie in Listing 4 zu sehen.

Listing 4

function checkResult()
{
  if (request.readyState == 4) {
     alert("Antwort: " + request.responseText);
  }
}

Wenn Sie die Seite im Browser neu laden und auf den Link klicken, gibt nun ein Dialogfenster die vom Server zufällig erzeugte Zahl aus.

Die Webseite verändern

Nun haben Sie zwei der drei Schritte zur AJAX-Anwendung schon hinter sich: mit einem Request-Objekt eine Anfrage an den Server schicken und irgendwann die Antwort empfangen und verarbeiten. Bleibt noch die Aktualisierung der Webseite selbst. Schließlich sollen die Nutzdaten an der dafür vorgesehenen Stelle optisch ansprechend auftauchen und nicht nur in Form aufspringender Dialogboxen.

Auch diese Aufgabe übernimmt Javascript-Code, der auf verschiedene Weise Inhalt und Struktur der HTML-Seite verarbeiten kann. Browserintern repräsentiert das so genannte Document Object Model (DOM) den Aufbau jeder Seite (Abbildung 3). Dieser baumartige Aufbau jedes Dokuments ermöglicht es, in Javascript jedes beliebige HTML-Element zu referenzieren, auszulesen und zu verändern. Eigener Code kann in den Baum auch Elemente einbauen, die dann in der HTML-Seite neu erscheinen. Den Elementenbaum beliebiger Seiten können Sie sich in Firefox mit Tools | DOM Inspector ansehen (Abbildung 3).

Abbildung 3: Über den Menüpunkt Tools | DOM Inspector können Sie sich in Firefox das Document Object Model von HTML-Seiten anzeigen lassen.

Fürs erste soll es genügen, ein bestehendes Element so zu verändern, dass es das Ergebnis der AJAX-Anfrage anzeigt. Besonders einfach geht das, wenn das zu verändernde Element eine eindeutige ID trägt, über die es sich in Javascript ansprechen lässt. In der HTML-Datei aus Listing 1 ist dazu das Span-Element mit der ID random vorgesehen.

Die Javascript-Funktion getElementById() des Gesamtdokuments liefert darüber bequem eine Referenz auf das HTML-Element. Der dann folgende Befehl setzt dessen Attribut innerHTML auf den erhaltenen Zufallswert.

var randomDiv = document.getElem↩
entById("random");
randomDiv.innerHTML = request.re↩
sponseText;

Schreiben Sie diese beiden Zeilen statt der alert-Funktion in die obige Version von checkResult(), ist die AJAX-Anwendung komplett: Der Javascript-Code schreibt das Ergebnis direkt in die HTML-Seite, statt sie komplett neu zu laden.

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...