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).
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 dasscript-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>
<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. |
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 desxml-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>
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>
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 ActiveXObjectMsxml2.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>';
...
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>
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));
}
/* ... */
}
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 dasxsl: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>
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)
- https://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
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project