6. Dynamisches Verhalten im Browser mit Server

6.1 AJAX: HTML-Requests mit Javascript erstellen

Bisher haben wir drei Wege gesehen, wie der Browser eine Kommunikation mit dem Server auslöst:
  • Man gibt einen URL in die Adresszeile ein;
  • man klickt einen Link an;
  • man klickt den <submit>-Button in einem HTML-<form>-Element.

Nur die dritte Variante erlaubt es, dynamische Inhalte, also zum Beispiel Inhalte von Input-Elementen der HTML-Seiete an den Server zu senden. Bis jetzt hat der Server immer mit einer vollständigen HTML-Seite geantwortet. Im Kapitel 4.6 HTML und Server-Code trennen mit ejs-Templates haben wir ausgefeilte Frameworks kennengelernt, die uns das Einfügen dynamischer Inhalte in statischen HTML-Kontext serverseitig vereinfachen.

Eine konzeptuell andere Herangehensweise stellt AJAX dar. Die Idee ist, dass die HTML-Seite, sagen wir index.html, statisch vom Server angefordert wird, inklusive Javascript-Code (der entweder in der index.html selbst drin ist oder per <script src="..."> verlinkt ist). Wenn nun zum Beispiel der Inhalt eines kleinen <span>-Elements in der HTML-Seite durch serverseitig generierten Inhalt ersetzt werden soll (weil es z.B. das Ergebnis einer Server-Anfrage darstellt), dann braucht eigentlich der Server nur den neuen Wert zu schicken, und der Browser baut diesen dann per Javascript in die umgebende HTML-Seite ein. Die Netzwerk-Kommunikation wird also von Server baut und schickt alles noch mal neu auf Server schickt nur ein Element, der Browser hat den Rest ja schon reduziert. Wie der Browser einen neuen Wert per Javascript in die Seite einbauen kann, haben wir in den letzten Abschnitten schon gelernt. Nun müssen wir noch lernen, wie wir per Javascript HTTP-Requests abschicken und die Antwort erhalten. Dieses Konzept heißt AJAX, was für Asynchronous JavaScript and XML steht.

  • Asynchron, weil die Seite im Browser zwischen Request schicken und Response erhalten weiterläuft und nicht im Browser-lädt-die-Seite-neu-Modus einfriert;
  • Javascript, weil die Requests vom Javascript-Code erstellt werden (und die Responses vom Javascript-Code bearbeitet werden;
  • XML, weil die Daten nicht im traditionallen Format (z.B. URL-kodierte Parameter wie /search-entry?name=Huber&firstname=Veronika und eine HTML-Datei als Antwort) übertragen werden sondern in einem allgemeinen, abstrakteren Format zur Kodierung von Objekten, wie zum Beispiel XML. Da meistens nicht XML sondern JSON verwendet wird, hat nicht zu einer Umbenennung von AJAX in AJAJ geführt (JSON selbst steht für Javascript Object Notation).

Ich habe hier eine kleine Mini-Anwendung geschrieben. Speichern Sie index.html und send-random-string.js in einem Verzeichnis und starten Sie den Server: node send-random-string.js. Gehen Sie in Ihrem Browser auf localhost:6001 und beobachten Sie das Verhalten.

Übung Erweitern Sie meine Anwendung index.html / send-random-string.js und demonstrieren Sie, dass die Seite "funktionsfähig" bleibt, auch wenn der Server sich Zeit mit der Antwort lässt.
  • Ändern Sie den Server-Code, sodass jede Request auf /load erst mit drei Sekunden Verzögerung ausgeführt wird. Den Javascript-Code dafür kennen Sie aus dem vorherigen Kapitel: setTimeout(function () {...}, 3000);
  • Fügen Sie eine rein Client-seitige Interaktion ein, z.B. einen Farbwechsel-Knopf.
Dann überzeugen Sie sich, dass die Client-seitige Funktionalität (Farbwechsel) immer noch funktioniert, während Ihr Browser auf eine Antwort auf den Request /load wartet.
Als nächstes sehen wir, wie Javascript mit POST Daten an den Server schicken kann. Hier wieder eine kleine Beispielanwendung: index.html und compute-function.js.
Übung Führen Sie alles zusammen und schreiben Sie eine kleine Chat-Anwendung. Der User soll ein Eingabefeld für den Benutzernamen haben und ein Textfeld für die Nachricht. Dann soll es eine Tabelle geben, auf der alle Chat-Nachrichten angezeigt werden. In etwa jede Sekunde soll der Browser ein Na, gibt's was Neues? an den Server schicken, und die Tabelle soll sich dann automatisch aktualisieren.