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

JQuery-Script läuft nicht mit Linux-Browsern
Stefan Jahn, 16.02.2018 12:49, 2 Antworten
Hallo zusammen, ...folgender goldener Code (ein jQuery-Script als Ergebnis verschiedener Exper...
XSane-Fotokopie druckt nicht mehr
Wimpy *, 30.01.2018 13:29, 0 Antworten
openSuse 42.3 KDE 5.8.7 Seit einem Software-Update druckt XSane keine Fotokopie mehr aus. Fehler...
TOR-Browser stürzt wegen Wikipedia ab
Wimpy *, 27.01.2018 14:57, 0 Antworten
Tor-Browser 7.5 based on Mozilla Firefox 52.8.0 64-Bit. Bei Aufruf von http: oder https://de.wi...
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...