HTMLWorld » XML » XML und JavaScript

XML: XML und JavaScript

von Jan Winkler

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 einzigster 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:

Objekt	Beschreibung
`document`	Repräsentiert das aktuelle Dokument.
`Node`	Repräsentiert einen bestimmten Knoten.
`Attr`	Repräsentiert einen Attribut-Knoten.
`Element`	Repräsentiert einen Element-Knoten.
`Text`	Repräsentiert einen Text-Knoten.
`Comment`	Repräsentiert einen Kommentar.
`CDATASection`	Repräsentiert einen CDATA-Abschnitt.
`DocumentType`	Repräsentiert die Document Type Definition(en).
`Notation`	Repräsentiert eine Notation.
`ProcessingInstruction`	Repräsentiert eine PI.
`StyleSheet`	Repräsentiert ein StyleSheet (z.B. CSS).
`Event`	Reprä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. Ausserdem 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:

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:

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, Strasse, 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>Strasse</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">

</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. Beispiel ansehen(Internet Explorer benötigt).

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

« zurück

weiter »

Bewerten

Aus dem XML Forum ...

WML Passwort von Pacman

zum XML Forum »