Am Beginn des World Wide Web standen statische Webseiten, die auf einem Rechner, dem Server bereit gestellt wurden und von anderen Rechnern, den Clients abgerufen werden konnten. Später wurden verschiedene Techniken entwickelt, um dynamische Elemente in die Webseiten zu integrieren. Diese sind unter dem Begriff DHTML zusammen­gefasst worden.

Dynamik

top ↑

Bei dynamischen Websiten geht es neben der Frage, was dynamisch sein soll, auch darum, wie dies realisert werden kann. Grund­sätzlich können dynamische Inhalte auf der Server-Seite eingefügt werden, um zum Beispiel einzelne Bestandeile der Seite der aktuellen Situation anzu­passen oder die Dynamik kann auf der Client-Seite realisiert werden: durch Veränderung des vom Server ausge­lieferten Inhalts.

Bei der zuletzt genannten Möglichkeit müssen natürlich die Regeln, wie eine Veränderung auf der Anzeige­seite (Client) erfolgen soll und alle dafür benötigten Informa­tionen bereits zusammen mit der Webseite ausgeliefert werden. So sind auf meiner Beispiel-Seite Spruch des Tages alle Sprüche, aus denen das Quote-Applet auswählen kann, mit im Seiten­quelltext als Parameter des <applet>-Tags enthalten. Ein anderes typisches Beispiel sind Plausibilitäts­prüfung von Benutzer­eingaben in Formularfeldern, die durch JavaScript-Funkt­ionen mit den in ihnen kodierten Regeln realsiert werden.

Interaktivität

top ↑

Die zuletzt genannte Plausibilitäts­prüfung ist schon ein erstes Beispiel für die Interak­tivität, denn hier gibt es bei einer fehler­haften Eingabe eine sofortige Rückmel­dung. Damit kann der Nutzer den Fehler sofort korri­gieren. Im Allgemeinen gehört aber zu einer echten Interak­tivität auch eine Reaktion auf der Server-Seite, zum Beispiel die Bestätigung nach dem Absenden eines Formulars. Auch auf der Quote-Applet - Seite gibt es die Möglichkeit für den Nutzer, selber aktiv zu werden und einen eigenen Spruch zur Sammlung der Sprüche beizu­steuern. Dieser soll dann nicht nur sofort angezeigt werden, sondern auch bei zukünftigen Seiten­aufrufen mit zur Auswahl stehen.

In der ersten Version wurde diese Funktionalität vollständig auf dem Server realisiert. Dazu habe ich PHP verwendet, mit dem die Quote-Applet - Seite bei jedem Aufruf neu erstellt wurde. Die Sprüche werden dabei aus einer separaten Datei ausgelesen und als Parameter des <applet>-Tags mit in die Seite integriert. Die Abspeicherung der Sprüche in einer eigenen Datei ermöglicht das einfache Hinzufügen neuer Sprüche, die nur am Ende angefügt werden müssen und damit automatisch auch in allen danach neu generierten Seiten enthalten sind.

Die vollständige Generierung von Seiten mit PHP hat aber auch einige Nachteile. Zum Einen wird hier Inhalt, Formatierung (Darstellung) und Programmierung (der Zugriff auf die Datei) miteinander vermischt, zum Anderen muss bei jedem Aufruf die Seite neu zusammen­gebaut und an den Client gesendet werden. Um diese Nachteile zu vermeiden, habe ich bei der Überarbeitung der Webseite weitere dynamische Techniken auf der Client-Seite mit eingesetzt.

Zusammenwirken Client - Server

top ↑

Neben dem Quote-Applet zur zufälligen Auswahl und Anzeige eines der vorhandenen Sprüche setze ich hier auch JavaScript ein, um die aktuelle Sprüche-Sammlung vom Server zu laden. Dazu ist dort zwar immer noch PHP erforderlich, es muss damit jedoch nur noch der Inhalt bereit gestellt werden. Die Darstellung der Webseite wird vollständig durch HTML definiert. Zum Einbau des dynamischen Inhalts in die Webseite dient JavaScript. Dieses hier im Kleinen genutzte Verfahren ist unter dem Namen AJAX bekannt und wird auch für größere Webanwendungen eingesetzt.

Der Vorteil ist, dass eine Webseite nur einmal vom Server abgeholt werden muss und danach nur noch Teile ausgetauscht werden. Als Transportmittel zwischen Client und Server dient ein XMLHttpRequest - Objekt, das durch JavaScript an den Server gesendet wird. JavaScript wertet auch die Antwort aus und verändert (aktualisiert) die beim Client angezeigte Seite. Bei meinem Quote-Applet werden auf diese Weise auch neue Sprüche zum Server transportiert und dort in die weiterhin vorhandene Datei zur Sprüche-Sammlung eingelagert.

Natürlich gibt es auch hier einige Nachteile, die sorgfältig beachtet werden müssen. Zum Einen müsen die verwendeten Techniken gut aufeinander abgestimmt sein, um reibungslos miteinander arbeiten zu können. Zum Anderen ist JavaScript auf der Nutzerseite dabei zwingend erforderlich und darf nicht abgeschaltet sein. Das Gleiche gilt natürlich für Java, ohne dass das Quote-Applet nicht angezeigt werden kann ;-)

Die genannten Probleme erfordern eine sorgfältige Planung bei der Konzeption der Webseite, sind aber beherrschbar. So enthält zum Beispiel die (statische) Webseite bereits alle, bei ihrer Erstellung bekannten Sprüche und kann somit auch bei abgeschaltetem JavaScript aus diesen auswählen. Zusätzlich ist der Eingabe-Abschnitt auf der Webseite zunächst ausgeblendet und wird erst durch JavaScript (wenn es verfügbar ist) beim Laden der Seite eingeblendet, und zwar nur, wenn auch das PHP-Modul auf dem Server erreicht werden kann. Dadurch werden die Teile der Webseite, die auf diese Verfahren angewiesen sind, nur dann angezeigt, wenn sie auch zur Verfügung stehen.

Beispiel-Seite: Spruch des Tages

top ↑

Um das Ganze ein wenig deutlicher zu machen, möchte ich einige Details meiner Seite zum Spruch des Tages hier näher erläutern.

Dort ist bereits der Quellcode des <applet>-Tags gezeigt und dabei ist zu sehen, wie die Sprüche-Sammlung eingebettet ist:

<param name="Z1" value="1012608000000*Holla, hier kommt mein erster Spruch" /> 
<param name="Z2" value="1012867200000*Was du heute kannst besorgen, ..." />  
   ...

Die Sprüche sind mit Z1, Z2, ... durchnummeriert und können so vom Applet bei dessen Initialisierung eingelesen werden. Dabei wird auch die Zeitmarke mit ausgewertet. Die Details dazu stehen im Quellcode des Applets.

Auf der Webseite gibt es auch einen Eingabe-Abschnitt, der zunächst unsichtbar ist:

<div id="input" style="display: none">   

  <p> Wer noch einen Spruch beisteuern möchte, kann ihn hier eintragen: </p>  
   ...
   
</div>

Zusätzlich ist JavaScript im <head>-Bereich mit in die Seite eingebunden. Dort gibt es die Methode init().

  function init() { 
      
    div_applet = document.getElementById("applet");
    div_input = document.getElementById("input");
    
    xmlhttp = new XMLHttpRequest();
    reloadApplet(null);
      
  }

Diese wird beim Laden der Webseite aufgerufen und ermittelt mit div_applet und div_input zunächst einmal die Bereiche der Webseite, die verändert werden sollen. Hier wird auch das XMLHttpRequest-Objekt erzeugt und die Methode reload­Applet(...) aufgerufen. Der übergebene Parameter null zeigt dabei an, dass es noch keinen neuen Spruch gibt.

In reloadApplet(quote)

  function reloadApplet(quote) {
    
    if(xmlhttp == null) { return; }   // else ...
    
    // get quotes by server
    xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4) {
      if(xmlhttp.status != 200) {
        adaptInput(xmlhttp.status + ": " + xmlhttp.statusText); }
      else {
        replaceApplet(xmlhttp.responseText);
        adaptInput(null); } } };        

    var url =  "../intern/quotes.php";
    if(quote) {
      url = url + "?quote=" + decodeURIComponent(quote); }
    xmlhttp.open("GET", url, true);

    try { xmlhttp.send(null); }
    catch(exception) {
        adaptInput(exception); } 
  
  }

wird zunächst das xmlhttp - Objekt für den Empfang der Rückmeldung vom Server vorbereitet (xmlhttp.onreadystatechange = ...) und danach das quotes.php - Skript auf dem Server aufgerufen.

Wenn es dabei keine Störungen gab, wird das vom Server zurück gegebene Ergebnis xmlhttp.responseText an die Methode replaceApplet(...) weiter gegeben. Diese baut die im responseText enthaltenen Sprüche in ein neues <applet>-Tag ein und ersetzt damit das alte Applet. Auf diese Weise muss der Browser das neue Applet starten und bei dessen Initialisierung wird die aktualisierte Sprüche-Sammlung ausgewertet.

Mit adaptInput(null) wird anschließend der Eingabe-Abschnitt aktualisiert. Der Parameter null zeigt an, dass es keine Fehler gegeben hat und damit kann dieser Abschnitt sichtbar gemacht werden. Dazu wird einfach das style="display: none"-Attribute von div_input entfernt.

Beim Aufruf mit einem Fehlertext würde dieser Abschnitt wieder unsichtbar gemacht und zusätzlich der Fehlertext dort mit eingetragen. Er lässt sich dadurch beim Betrachten des aktuellen Seitenquelltextes mit auslesen.

Wenn der Eingabe-Abschnitt sichtbar ist, können auch neue Sprüche eingegeben werden. Um diese an den Server zu senden und auch sofort im Applet anzuzeigen, werden einfach die bereits vorhandenen Methoden ein zweites Mal genutzt. Eine neue, zusätzliche Methode, sendQuote(), liest dazu den im Formular eingegebenen Text aus und ruft damit reloadApplet(quote) auf.

Die Vorgänge ähneln dem schon beschriebenen Ablauf, mit dem einzigen Unterschied, dass bei dem Aufruf des quotes.php - Skripts diesem nun der neue Spruch mitgegeben wird. Er kann damit auf dem Server in der Sprüche-Datei am Ende angefügt werden. Außerdem wird er auch in den zurück gesendeten xmlhttp.responseText eingefügt.

Damit in diesem Fall der neue Spruch sofort angezeigt wird, ist ein kleiner Trick nötig: als Zeitmarke wird diesmal der Wert 0 gesetzt. Damit weiß das Applet beim Einlesen der Sprüche, dass dies ein ganz besonderer Spruch ist - und zeigt ihn sofort an. Bei einem späteren neuen Aufruf wird der Spruch mit seiner echten Zeitmarke eingetragen und muss sich, wie alle anderen, in die Auswahlliste mit einordnen.