Kontakt aufnehmen

XML und JavaScript

Auf den ersten Blick haben XML und JavaScript nicht viel mit einander zu tun. Allerdings stecken eine Menge Möglichkeiten in der Verbindung der beiden Sprachen. Ob von einfachem Verändern und Bearbeiten von Inhalten bis hin zu Animationen mit SVG-Dokumenten lässt sich fast alles machen.

Was kann JavaScript?

Wie z.B. von der Verwendung mit HTML bekannt sein dürfte, kann mit JavaScript unter Anderem auf den Inhalt eines Dokumentes zugegriffen und diesen angepassen. Das Verändern von Text ist dabei jedoch noch die einfachste Anwendung. In Verbindung mit XML sind viele weiter reichendere Dinge denkbar. Unter anderem bieten sich folgende Verwendungsmöglichkeiten für JavaScript mit XML an auf die wir hier näher eingehen wollen:

  • Einlesen und Ausgeben von XML-Dokumenten innerhalb von HTML-Dokumenten.
  • Dynamisches Erstellen und Umwandeln von SVG-Grafiken (eine weiter von XML abgeleitete Sprache).
  • Steuerung, Kontrolle und Koordination von SMIL-Animationen (ebenfalls eine XML-Sprache).
  • Schreiben von Inhalten in XSL(T).
Bitte beachten Sie: Da die Beschreibung von JavaScript ansich ziemlich Umfangreich werden kann, sind für die folgenden Abschnitte geweisse JavaScript -Grundkenntnisse vorausgesetzt. Ebenso wird ein gewisses Grundverständnis desDOMvorausgesetzt.

Wie setzte ich JavaScript in XML ein?

Java Script -Skripte werden in XML-Dokumenten ebenso wie auch schon in HTML eingesetzt einziger Unterschied - der XHTML vertrauten bereits bekannt sein dürfte - ist, dass Anstelle eines umschließenden Kommentars hierbei der gesamte Code innerhalb eines CDATA-Bereiches gesetzt wird. Dies geschieht nicht etwa, weil man alle Webmaster und HTML-Schreiber verunsichern will, sondern damit die Konformität zu XML gegeben ist. Wird ein Skript innerhalb eines Dokumentes verwendet, sollte zusätzlich darauf geachtet werden, welcher Namensraum verwendet wird. In den meisten DTD's ist beispielsweise das script-Element nicht definiert. Ist dies der Fall muss ein Namensraum definiert werden der XHTML (http://www.w3c.org/TR/xhtml1/) beschreibt und über diesen das script-Element definiert werden.

<html:script html:language="JavaScript" 
 xmlns:html="http://www.w3c.org/TR/xhtml1/">
<![CDATA[
 /* ... Script ... */
]]>
</html:script>

... oder:

<html:script language="JavaScript" src="datei.js" />

Welche Rolle spielt das DOM dabei?

DOM steht für Document Object Modell und beschreibt aus der Sicht von JavaScript gesehen, wie auf die einzelnen Knoten eines XML-Dokumentes zuzugreifen ist und wie man sie verändern kann.DOMstellt dazu eine Reihe von Objekten, Methoden und Eigenschaften zur Verfügung, die eben dies ermöglichen sollen. Unter Anderem sind folgende Objekte/Objekttypen definiert:

ObjektBeschreibung
documentRepräsentiert das aktuelle Dokument.
NodeRepräsentiert einen bestimmten Knoten.
AttrRepräsentiert einen Attribut-Knoten.
ElementRepräsentiert einen Element-Knoten.
TextRepräsentiert einen Text-Knoten.
CommentRepräsentiert einen Kommentar.
CDATASectionRepräsentiert einen CDATA-Abschnitt.
DocumentTypeRepräsentiert die Document Type Definition(en).
NotationRepräsentiert eine Notation.
ProcessingInstructionRepräsentiert eine PI.
StyleSheetRepräsentiert ein StyleSheet (z.B. CSS).
EventRepräsentiert ein Ereignis.
Anhand dieser Objekte verläuft eigentlich der gesamte Transfer von XML zu JavaScript (bzw. umgekehrt) - wir werden im Folgenden darauf zurück kommen.

Microsoft und XML?

Microsoft ist einer der Haupt-Initiatoren und Begründer von XML-Dateninseln. Dies ist ein Verfahren um XML-Daten in HTML-Dokumente einzubinden. Dabei wird, eben über Daten-Inseln, eine XML-Quelle intern oder extern mit Hilfe des xml-Elementes in das Dokument eingeführt. Bei externen Dateien wird dazu das src-Attribut verwendet - es erhält die URL der XML-Quelle als Wert. Außerdem kann eine ID zum späteren Zugriff vergeben werden. Bei internen XML-Quellen wird die gesamte XML-Datei einfach komplett in das xml-Element hinein kopiert. Beispiel:

<html>
 ...
 <xml src="adressbuch.xml" id="adressbuch"></xml>
 ...
</html>

Nun kann mit Hilfe vonDOMauf diese Daten zugegriffen werden. Als Beispiel setzten wir unser Adressbuch aus dem ersten Kapitel, sowie die dazugehörige ID adressbuch voraus:

<script language="JavaScript">
<!--
 var adb = document.getElementById('adressbuch');
 var kunde,str,plz,ort;
 var res = '<table><th>Kunde</th>'+
           '<td>Straße</td><td>PLZ Ort</td></tr>';
 for(i=0;i<adb.documentElement.childNodes.length;i++)
 {
 res += '<tr>';
 kunde = adb.documentElement.childNodes(i);
 str = kunde.childNodes(0).childNodes(0);
 plz = kunde.childNodes(0).childNodes(1);
 ort = kunde.childNodes(0).childNodes(2);
 res += '<th>'+kunde.attributes[0].value+'</th>';
 res += '<td>'+str.text+'</td>';
 res += '<td>'+plz.text+' '+ort.text+'</td>';
 res += '</tr>'
 }
 res += '</table>';

 document.open();
 document.write(res);
 document.close();

//-->
</script>

Im Beispiel wird ein Objekt adb erzeugt, welches das Element Adressbuch repräsentiert. Von diesem aus, werden nun die Unterknoten (childNodes) durchlaufen und abgefragt. Da die Struktur der Quelle relativ fest definiert ist, können wir diese Abfragen ziemlich sicher stellen. Letztlich werden die Inhalte der Knoten in einen String geschrieben und im Dokument ausgegeben. Das Resultat ist eine Tabelle der Kunden, die mit Name, Straße, PLZ und Ort ausgegeben wird.

ActiveX und XML?

Den meisten dürfte/sollte bekannt sein, dass man Microsofts ActiveX für so ziemlich alles einsetzten kann. So auch um auf XML-Dokumente zuzugreifen. Microsoft stellt dazu unter anderem das ActiveXObject Msxml2.DOMDocument ( auch Msxml2.DOMDocument.3.0) zur Verfügung. Mit dessen Hilfe, kann eine XML-Datei (besser gesagt: deren Inhalt) an ein JavaScript -Objekt übergeben werden. Die Daten werden dazu mit der load-Methode eingeladen. Der Rest erfolgt, wie im obigen Beispiel beschrieben:

var ax = new ActiveXObject('Msxml2.DOMDocument.3.0');
ax.load('adressbuch.xml');
var adb = ax;

var kunde,str,plz,ort;
 var res = '<table><th>Kunde</th>'+
           '<td>Straße</td><td>PLZ Ort</td></tr>';
...

Der Vorteil dabei ist, dass keine zusätzlichen Eintragungen innerhalb des HTML-Dokumentes vorgenommen werden müssen.

Mozilla/Netscape und XML?

Im Mozilla bzw. Netscapes Browser stellt sich diese Aufgabe etwas anders dar. Besonders zu bemerken ist hierbei jedoch, dass sich Mozilla weitestgehend sehr genau an die Standards hält. Hierzu wird das Dokument, besser gesagt das Root-Element mit Unterelementen, in die Datei eingefügt und mit einem neuen Namensraum versehen. Das Script ist in etwa identisch mit dem des obigen Beispiels (lediglich die DOM-Objekte wurden ersetzt) :

<html>
...
<adb:Adressbuch id="adressbuch" 
 xmlns:adb="http://www.meineurl.de">
 <adb:Kunde Name="Max Mustermann">
 ...
 </adb:Kunde>
</adb:Adressbuch>
...
<script language="JavaScript">
<!--
 var adb = document.getElementById('adressbuch');
 var kunde,adr,str,plz,ort;
 var res = '<table><th>Kunde</th><td>Straße</td>'+
           '<td>PLZ Ort</td></tr>';
 for(i=0;i<adb.childNodes.length;i++)
 {
 res += '<tr>';
 kunde = adb.childNodes.item(i);
 if(kunde.nodeName.toLowerCase() == 'adb:kunde')
 {
 adr = kunde.childNodes.item(1);
 str = adr.childNodes.item(1).childNodes.item(0);
 plz = adr.childNodes.item(3).childNodes.item(0);
 ort = adr.childNodes.item(5).childNodes.item(0);
 res += '<th>'+kunde.attributes.item(0).nodeValue+'</th>';
 res += '<td>'+str.nodeValue+'</td>';
 res += '<td>'+plz.nodeValue+' '+ort.nodeValue+'</td>';
 res += '</tr>';
 }
 }
 res += '</table>';
 document.open();
 document.write(res);
 document.close();
//-->
</script>
...
</html>

Steuerung von SVG-Grafiken

SVG steht für Scalable Vector Graphics und beschreibt ein XML-Format welches es erlaubt, Vektor-Grafiken zu erstellen. Der Vorteil vonSVGim Gegensatz zu bekannten Formaten wie GIF oder JPEG besteht zum einen in seiner Transparenz - es ist lediglich ein Editor zum Bearbeiten des Textes nötig - und zum anderen in seiner Leichtigkeit. Außerdem ist es fast beliebig skalierbar, was Vergrößerungen und Verkleinerungen ohne Qualitätsverlust erlaubt. DaSVGvon XML abstammt, folgt es natürlich auch dessen Syntax und kann ebenso wie im vorherigen Beispiel mit JavaScript behandelt werden. Beispiel für ein einfaches SVG-Dokument:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200">
 <ellipse cx="58" cy="117" rx="51" ry="44"
 transform="translate(51 6) translate(23 -3) translate(4 -8)"
 style="fill:rgb(1,157,255)"/>
 <rect x="23" y="13" width="136" height="45"
 style="fill:rgb(255,97,1)"/>
 <text x="19px" y="39px"
 transform="translate(22 1) translate(-5 11)"
 style="fill:rgb(0,0,0);font-size:43;font-family:Arial Black">
 SVG:
 </text>
 <text x="17px" y="82px" transform="translate(-6 9)"
 style="fill:rgb(0,0,0);font-size:24;font-family:Andale Mono">
 Webgrafik
 </text>
 <text x="82px" y="115px" transform="translate(13 18)"
 style="fill:rgb(0,0,0);font-size:24;font-family:Andale Mono">
 mit
 </text>
 <text x="35px" y="161px" transform="translate(8 -1)"
 style="fill:rgb(0,0,0);font-size:24;font-family:Andale Mono">
 XML
 </text>
</svg>

Das mag zwar auf den ersten Blick etwas unübersichtlich wirken, doch wird die Datei ersteinmal dargestellt, sieht das schon ganz anders aus:


Adobes SVG-Plugin benötigt
Geben wir den Texten (text-Element) nun ID's (text1 bis text4), können wir Sie z.B. auf klick verändern. Dazu wird ein neues Objekt mit Hilfe der getSVGDocument-Methode des Plugins (embed) erstellt. Dieses stellt das SVG-Dokument dar, innerhalb dessen wir nun Veränderungen vornehmen wollen:

var a,b,t1,t2,t3,t4,actual;
function doSVG()
{
 a = document.embeds[0].getSVGDocument();
 b = a.documentElement.childNodes;
 t1 = a.getElementById('text1');
 t2 = a.getElementById('text2');
 t3 = a.getElementById('text3');
 t4 = a.getElementById('text4');
}

function moveSVG(x,y)
{
 actual.attributes.item(1).value = x+'px';
 actual.attributes.item(2).value = y+'px';
}

function moveText()
{
 actual = t1;
 for(i=1;i<41;i++)
 {
  window.setTimeout('moveSVG('+(19+i)+','+(39+i)+')',(100*i));
 }
 /* ... */
} 

Im Beispiel werden zeitlich nacheinander folgende Ereignisse erstellt (moveText()). Innerhalb dieser Ereignisse wird jedes Mal einer der vier Texte um einen Pixel verschoben. Das Resultat ist, dass sich die Texte über das Bild bewegen - eine kleine Animation ist entstanden. Das gleiche, was wir mit Text gemacht haben, kann natürlich ganz einfach auch mit allen anderen Objekten gemacht werden. Viele weitere Anwendungen sind denkbar.

JavaScript und XSLT?

Auch in XSLT-Dateien kann problemlos JavaScript verwendet werden. In XSLT kann dazu das xsl:script-Element verwendet werden. Es ist zwar nicht innerhalb des aktuellen Standards ( XSLT 1.0) enthalten - die Arbeitsgruppe um XSLT hat es allerdings schon innerhalb eines ersten Working Drafts (Arbeitsbeschreibung) der XSLT Version 1.1 beschrieben. Innerhalb dieses Elements werden sämtliche Scripte definiert. Der Aufruf erfolgt mit Hilfe des xsl:eval-Elements, wobei der Rückgabewert der Funktion (return) in das Dokument ausgegeben wird. Zusätzlich sollten bei beiden Elementen das language-Attribut angegeben werden, welches die verwendete Scriptsprache (z.B. JavaScript ) beschreibt. Beispiel:

<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="uri:xsl">
<xsl:script language="JavaScript">
 <![CDATA[
  function datum(s)
  {
   a = new Date(s);
   b = a.toUTCString();
   return(b);
  }
 ]]>
</xsl:script>
<xsl:template match="/">
 <xsl:eval language="JavaScript">
  datum('11 Dec 2001');
 </xsl:eval>
</xsl:template>
</xsl:stylesheet>

Bitte beachten Sie, dass nur Objekte aus JavaScript Core (Top-Level Eigenschaften und Funktionen, Array, Boolean, Date, Function, Arguments, Math, Number, Object, RegExp, String) verwendet werden dürfen/sollten. Bitte beachten Sie auch, dass es sich bei dem xsl:script-Element um ein Top-Level Element handelt.

Software

Hier eine kleine Auswahl der Software, die zur Erstellung der obigen Beispiele verwendet wurde.

  • http://xml.apache.org/batik/ - Batik (SVG Browser)
  • http://www.jasc.com/products/webdraw/ - Jasc WebDraw (SVG Programm)
  • http://www.adobe.com/svg/ - Adobes SVG-Plugin

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Content Management mit XML

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern