Schneller, höher, weiter

Websites programmieren mit AJAX

01.10.2006
Text direkt in einer Webseite ändern, ganz ohne lästiges Formular? Drag & Drop von Thumbnails in der eigenen Bildergalerie? Mit AJAX sind interaktive Websites kein Problem.

Wer interaktive Webseiten benutzt, braucht oft eine Menge Geduld. Hat man ein Formular mit einer Reihe von Eingabefeldern ausgefüllt und abgeschickt, heißt es erst einmal warten, bis der Server die Daten auswertet und als Antwort eine neue Seite ausliefert (Abbildung 1).

Abbildung 1: Das traditionelle Modell: Bei jeder Änderung lädt der Browser die komplette Seite neu.

Seit einiger Zeit umgehen Websites wie Google Mail dieses Problem, indem sie die so genannte AJAX-Technik anwenden, die unter Webentwicklern als letzter Schrei gilt. Statt mit jeder Anfrage eine Seite komplett neu anzufordern, fragt der Webbrowser nur kleine Fragmente an Information ab, die er anschließend in die bestehende Webseite integriert. Das Ergebnis für den Benutzer: Eine Website fühlt sich damit beinahe so schnell an wie eine Desktop-Anwendung.

Der Name AJAX geht zurück auf den Essay "AJAX: A New Approach to Web Applications" von Jesse James Garrett [1]. Obwohl es sich nach Garretts Worten dabei nicht um ein Akronym handelt, interpretiert man AJAX meist als Kürzel für Asynchronous Javascript und XML. AJAX-Webseiten bestehen nicht nur aus statischen HTML-Dateien (und CSS-Stylesheets), sondern auch aus Javascript-Code, der abläuft, wenn der Benutzer auf einen Link klickt oder ein anderes so genanntes Event auslöst. Die Javascript-Funktionen fragen vom Server neue Daten an, die dieser als XML (deshalb das X), aber auch als HTML und in anderen Formaten zurück liefert.

Asynchron

Weil die Anfrage asynchron abläuft (das A), kann der Benutzer mit anderen Teilen der HTML-Seite weiter interagieren, der Browser ist nicht blockiert. Eine asynchrone Anfrage entkoppelt Anfrage und Antwort: Hat der Javascript-Code im Browser seine Anfrage abgeschickt, läuft er einfach weiter. Erst, wenn die Antwort beim Browser eintrifft, ruft dieser eine vorher festgelegte Javascript-Funktion auf. Die wiederum trägt das Ergebnis in die bestehende HTML-Seite ein. Das kann ein einzelner Zahlenwert in einer HTML-Tabelle sein, strukturierte Daten in XML oder JSON (Javascript Object Notation), Formularwerte und so fort.

Abbildung 2: Das AJAX-Modell: Requests laden nur die veränderten Teile einer Seite neu.

Google Mail zum Beispiel kann so in den Arbeitsbereich in der Mitte des Browserfensters einen Editor zum Mail-Schreiben laden, eine Mail anzeigen oder die Nachrichten auflisten (Abbildung 2). Andere Beispiele für den nützlichen Einsatz von AJAX sind die Web-2.0-Anwendungen Flickr und Del.icio.us.

Schnellstart

Für den Anfang soll ein eine sehr einfache Webanwendung das Funktionsprinzip von AJAX veranschaulichen: Auf den Klick des Benutzers hin lädt der Browser eine Zufallszahl vom Server und zeigt sie an der dafür vorgesehenen Stelle in der Webseite an.

Die Anwendung besteht aus drei Komponenten: der statischen HTML-Startseite, dem Javascript-Code und einem Serverskript, welches das Ergebnis (die Zufallszahl) liefert. Was Sie dazu auf jeden Fall brauchen, ist ein Webserver (meist Apache), der eine Skriptsprache unterstützt, in unserem Beispiel PHP. Allerdings können Server und Browser zum Ausprobieren der AJAX-Technik auch auf dem gleichen Rechner laufen, selbst dem normalen Desktop-Computer.

Sind Ihnen Installation und Konfiguration von Apache und PHP mit den distributionseigenen Paketen und Tools zu kompliziert, können Sie es auch mit einem der beliebten LAMP oder XAMPP-Pakete versuchen. Sie enthalten nicht nur Apache und PHP, sondern auch die MySQL-Datenbank, die zwar nicht obligatorisch, aber für dynamische AJAX-Anwendungen doch nützlich ist.

Die HTML-Datei der AJAX-Beispielanwendung ist recht einfach aufgebaut (Listing 1). Im Header-Abschnitt bindet der Script-Tag eine externe Javascript-Datei namens ajax.js ein, die den gesamten Code der AJAX-Anwendung enthält. Alternativ dazu können Javascript-Funktionen auch direkt in der HTML-Datei stehen, eingeschlossen zwischen einem öffnenden und einem schließenden Script-Tag.

Die Verbindung zwischen Code und HTML stellt Zeile 6 des Listings her. Das Attribut onclick des Links enthält den Namen der Javascript-Funktion, die der Browser aufruft (getRandom), wenn der Benutzer darauf klickt. Schließlich folgt ein HTML-Bereich (span) mit einer ID, über die jener sich später von Javascript aus ansprechen lässt.

Listing 1

<html>
  <head>
    <script language="JavaScript" type="text/javascript" src="ajax.js"/>
  </head>
  <body>
    <a href="#" onclick="javascript:getRandom()">AJAX-Test</a>
     
  </body>
</html>

Wollen Sie einmal testen, ob die Verbindung HTML/Javascript klappt, tragen Sie in die Datei folgenden Code ein:

function getRandom()
{
   alert("Angeklickt");
}

Befinden sich index.html und ajax.js im selben Verzeichnis auf dem Server, zum Beispiel ajaxtest, rufen Sie die HTML-Seite über die Adresse http://Servername/ajaxtest/ auf. Laufen Server und Browser auf dem gleichen Rechner, verwenden Sie als Servernamen localhost. Klicken Sie dann auf den Link, öffnet der Browser einen Dialog, der den Text Angeklickt anzeigt.

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.

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 01/2015: E-Books im Griff

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

Mit der Zeitschrift LinuxUser sind Sie als Power-User, Shell-Guru oder Administrator im kleinen Unternehmen monatlich auf dem aktuelle Stand in Sachen Linux und Open Source.

Sie sind sich nicht sicher, ob die Themen Ihnen liegen? Im Probeabo erhalten Sie drei Ausgaben zum reduzierten Preis. Einzelhefte, Abonnements sowie digitale Ausgaben erwerben Sie ganz einfach in unserem Online-Shop.

NEU: DIGITALE AUSGABEN FÜR TABLET & SMARTPHONE

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

Tipp der Woche

Ubuntu 14.10 und VirtualBox
Ubuntu 14.10 und VirtualBox
Tim Schürmann, 08.11.2014 18:45, 0 Kommentare

Wer Ubuntu 14.10 in einer virtuellen Maschine unter VirtualBox startet, der landet unter Umständen in einem Fenster mit Grafikmüll. Zu einem korrekt ...

Aktuelle Fragen

PCLinuxOS Version 2014.08 "FullMonty" Umstellung auf deutsch
Karl-Heinz Welz, 19.12.2014 09:55, 3 Antworten
Hallo, liebe Community, ich bin 63 Jahre alt und möchte jetzt nach Jahrzehnten Windows zu Linux...
ICEauthority
Thomas Mann, 17.12.2014 14:49, 2 Antworten
Fehlermeldung beim Start von Linux Mint: Could not update ICEauthority file / home/user/.ICEauth...
Linux einrichten
Sigrid Bölke, 10.12.2014 10:46, 5 Antworten
Hallo, liebe Community, bin hier ganz neu,also entschuldigt,wenn ich hier falsch bin. Mein Prob...
Externe USB-Festplatte mit Ext4 formatiert, USB-Stick wird nicht mehr eingebunden
Wimpy *, 02.12.2014 16:31, 0 Antworten
Hallo, ich habe die externe USB-FP, die nur für Daten-Backup benutzt wird, mit dem YaST-Partition...
Steuern mit Linux
Siegfried Markner, 01.12.2014 11:56, 2 Antworten
Welches Linux eignet sich am besten für Steuerungen.