5.3 XML-Übersetzung in HTML (Shoutbox)

Unsere bereits erwähnte, anonyme JavaScript-Funktion, die in der Variablen xml_response_handler gespeichert wird, bekommt die DOM-Struktur, die in responseXML gespeichert ist, im Parameter content übergeben:

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);
   }
};

Aufgerufen wird die Funktion im Ajax-Kernel in der Funktion handle_xml_response():

if(xml_response_handler)
   xml_response_handler(ajax.responseXML, output_id);

Die Aufgabe der anonymen Funktion besteht darin, die erhaltene DOM-Struktur in ausgabegerechtes HTML zu übersetzen. Dazu ermittelt sie alle entry-Elemente und arbeitet diese in einer for-Schleife ab. Innerhalb jedes Schleifendurchlaufs ermittelt sie vom jeweils bearbeiteten entry-Element die Inhalte der Kindelemente name und text sowie den Wert des Attributs datetime. Ferner erzeugt sie mit Hilfe der dazu üblichen DOM-Methoden ein p-Element, ein b-Element, ein br-Element sowie einige Textknoten. Die erzeugten Elemente und Textknoten baut sie mittels appendChild()-Aufrufen in der gewünschten Form zusammen. Am Ende hängt sie den zusammengebauten Inhalt des p-Elements, das nun einen kompletten Shoutbox-Eintrag enthält, als Kindknoten an das Element an, in dem die HTML-Ausgabe erfolgen soll.

Seiten Revision: 2, zuletzt bearbeitet: 04 Jun 2009 18:47