5.1 HTML-Dokument mit Shoutbox
shoutbox.gif

Eine Shoutbox gehört zum typischen Web-2.0-Inventar. Besucher einer Webseite können spontan ihre Meinung zu etwas kundtun, ihre aktuelle Stimmung ausdrücken usw. Meist handelt es sich um kurze Statements, die aus einem halben bis drei Sätzen bestehen. Allen Besuchern der Seite wird eine Liste der jüngsten Shoutbox-Einträge angezeigt. Die Liste wird automatisch aktualisiert, auch während die Webseite am Bildschirm angezeigt wird.

Die Shoutbox ist ein div-Bereich, der an einer gewünschten Stelle auf einer gewünschten Webseite platziert wird. In unserem Beispiel enthält das HTML-Dokument keine weiteren Inhalte als die der Shoutbox. Widmen wir uns zunächst dem Quelltext dieses HTML-Dokuments:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Shoutbox</title>
<style type="text/css">
p {
  font-family: Arial,sans-serif; 
  font-size: 11px;   
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var xml_response_handler = function(content, output_id) { 
   var entries = content.getElementsByTagName("entry");
   document.getElementById(output_id).innerHTML = "";
   for(i = 0; i < entries.length; i++) {
      var entry_name = entries[i].getElementsByTagName("name")[0];
      var entry_text = entries[i].getElementsByTagName("text")[0];
      var p = document.createElement("P");
      var b = document.createElement("B");
      var br = document.createElement("BR");
      var text_1 = 
    document.createTextNode(entries[i].getAttribute("datetime"));
      var text_2 = document.createTextNode(" schrieb ");
      var text_3 = 
    document.createTextNode(entry_name.firstChild.nodeValue);
      var text_4 = document.createTextNode(":");
      var text_5 = 
    document.createTextNode(entry_text.firstChild.nodeValue);
      p.appendChild(b);
      b.appendChild(text_1);
      b.appendChild(text_2);
      b.appendChild(text_3);
      b.appendChild(text_4);
      p.appendChild(br);
      p.appendChild(text_5);
      document.getElementById(output_id).appendChild(p);
   }
};
 
function show_shoutbox() {
   if(!document.getElementById)
      return;
   script_url = "http://localhost/ajax-test/shoutbox.php";
   do_http_get_request("xml", script_url, "shoutbox_entries");
}
 
function post_to_shoutbox() {
   if(!document.getElementById)
      return;
   script_url = "http://localhost/ajax-test/shoutbox.php";
   post_field_ids = "name+text";
   do_http_post_request("xml", script_url, post_field_ids, 
                        "shoutbox_entries");
}
</script>
</head>
<body onload="show_shoutbox(); 
window.setInterval(show_shoutbox, 10000);">
<div id="shoutbox"  style="width: 290px;">
<div id="shoutbox_entries">
</div>
<form action="#" method="post" style="">
<div><textarea name="text" rows="3" cols="20" id="text" 
style="width:280px; height: 4em; border: solid 1px silver; 
font-family: Arial,sans-serif; font-size: 11px; padding: 1px">
Dein Text?
</textarea></div>
<div><input type="text" name="name" id="name" 
style="width:240px; border: solid 1px silver; 
font-family: Arial,sans-serif; font-size: 11px; padding: 1px" 
value="Dein Name?"> 
<input type="button" name="send" style="width:30px; 
border: solid 1px silver; background-color: #EEE; 
font-family: Arial,sans-serif; font-size: 11px;" value="OK" 
onclick="post_to_shoutbox()"></div>
</form>
</div>
</body>
</html>

Das HTML-Dokument definiert im sichtbaren body-Bereich einen div-Bereich mit id="shoutbox". Innerhalb davon folgt zunächst ein weiterer div-Bereich mit dem id-Namen shoutbox_entries. In diesen div-Bereich wird JavaScript via Ajax dynamisch die aktuell gespeicherten Shoutbox-Einträge einblenden. Da die bislang gespeicherten Shoutbox-Einträge gleich zu Beginn angezeigt werden sollen, ist im einleitenden <body>-Tag der Event-Handler onload= notiert. Wenn der Rest des Dokuments geladen ist, wird die Funktion show_shoutbox() aufgerufen, welche die Ajax-Integration besorgt. Durch einen window.setInterval()-Aufruf wird außerdem angewiesen, die Funktion show_shoutbox() alle 10 Sekunden erneut aufzurufen. So wird erreicht, dass sich die Anzeige der aktuellen Shoutbox-Einträge automatisch alle 10 Sekunden aktualisiert, auch wenn die Webseite länger angezeigt wird. Die automatische Wiederholung hat übrigens bei Tests im MS Internet Explorer 6 nicht funktioniert.

Innerhalb des div-Bereichs für die Shoutbox folgt als nächstes das Eingabeformular für einen neuen Shoutbox-Eintrag. Beachtenswert beim HTML-Code für das Formular ist, dass das Formular im verpflichtenden action-Attribut keine Fremdadresse aufruft, sondern durch action="#" die eigene Seite adressiert. Das Formular enthält auch gar keinen Submit-Button. Neben einem einzeiligen Eingabefeld für den eigenen Namen und einem mehrzeiligen textarea für den eigenen Text enthält es zwar eine Schaltfläche mit der typischen Submit-Beschriftung OK. Doch dabei handelt es sich um einen reinen Klickbutton, der im onclick-Event-Handler die JavaScript-Funktion post_to_shoutbox() aufruft. Diese Funktion ist ebenso wie die Funktion show_shoutbox() in einem JavaScript-Bereich im Kopfbereich des HTML-Dokuments notiert.

Die Funktionen show_shoutbox() und post_to_shoutbox() rufen beide im eingebundenen Ajax-Kernel eine der Zentralfunktionen auf: show_shoutbox() ruft do_http_get_request() auf, und post_to_shoutbox() ruft do_http_post_request() auf. In beiden Fällen wird als erster Parameter "xml" übergeben. Dadurch wird dem Ajax-Kernel mitgeteilt, dass zur Datenausgabe die XML-Schnittstelle verwendet werden soll.

Da der Ajax-Kernel nicht wissen kann, welcher Art die auszugebenden XML-Daten sind, bzw. wie sie weiterverarbeitet oder in HTML übersetzt werden sollen, sieht er für diesen Fall eine Handlerfunktion vor, die in einer Variablen mit dem vorgegebenen Namen xml_response_handler gespeichert sein muss. Doch wie speichert man eine Funktion in einer Variablen? Die Lösung ist das Konstrukt einer so genannten anonymen Funktion. In unserem Beispiel sieht es so aus:

var xml_response_handler = function(content, output_id) { 
   /* Inhalt der Funktion */
}

Bevor wir uns dem widmen, was die so definierte Funktion tut, wenden wir uns jedoch zum besseren Verständnis der Serverseite zu.

Seiten Revision: 3, zuletzt bearbeitet: 04 Jun 2009 16:25