Anzeige
Tutorialbeschreibung

Javascript und Ajax - XML & Co

Javascript und Ajax - XML & Co

Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.

Kapitel 19 XML & Co.

Mit XML ist das so eine Sache: Das Format ist sehr einfach zu verstehen, einfach zu erstellen und auch einfach weiterzuverarbeiten. Allerdings hat es eine ganze Zeit gedauert, bis XML auch wirklich in der Praxis eingesetzt worden ist. Zu praktisch waren häufig proprietäre Binär-Formate. Doch mittlerweile ist XML überall: von Konfigurationsdateien bis hin zu Office-Dokumenten, alles kann mittlerweile mit XML realisiert werden.

Auch JavaScript unterstützt XML. Das liegt auch nahe, steht doch das »X« in AJAX für XML. Doch leider hat die Sache auch einen ganz großen Haken: Eine browserunabhängige XML-Unterstützung ist mit etwas Aufwand verbunden; einige exotischere Browser bleiben bei den im Folgenden gezeigten Techniken auch außen vor.

Dies führt in der Praxis zu folgender Situation: Häufig werden spezielle XML-Bibliotheken eingesetzt, die einfach XML-Funktionalität nachprogrammieren (sprich, einen XML-String von Hand parsen). Im AJAX-Bereich hat JSON mittlerweile XML den Rang abgelaufen. Wenn ein Webserver komplexe Daten schickt, tut er das meist nicht in XML, sondern in der JavaScript Object Notation.

Dieses Kapitel zeigt auf, wie XML-Daten mit JavaScript verarbeitet werden können. Auch einige verwandte XML-Themen, nämlich XSL und XPath, werden behandelt.


19.1 XML 
topBilder

Aufgrund der strikten Regeln für den Aufbau eines XML-Dokuments ist es dort sehr einfach, das Document Object Model zu nutzen. Auch hier müssen Sie wieder in Knoten denken und in der Hierarchie navigieren.


19.1.1 XML-Daten verarbeiten  

Eine der Haupteinsatzgebiete für XML in JavaScript sind AJAX-Anwendungen: wenn der Server XML zurückliefert. Das XMLHttpRequest-Objekt ist in der Lage, die Rückgabe von einem Server direkt als XML-Objekt zu verwenden, inklusive sofortigen Zugriffs auf das XML-DOM.

Damit das funktioniert, muss allerdings eine Voraussetzung erfüllt sein: Der Server muss den MIME-Typ text/xml im HTTP-Header zurückliefern. Andererseits kann der Browser das XML nicht laden.

Dies lässt sich zum einen durch eine entsprechende Serverkonfiguration erreichen; im Apache-Server beispielsweise ist folgende Zeile in der Konfigurationsdatei mime.types einzufügen:

text/xml   xml

Die folgende Datei soll in den Beispielen in diesem Kapitel verwendet werden – Sie kennen die dahinterliegenden Daten bereits aus dem vorherigen Kapitel:

<?xml version="1.0" encoding="UTF-8"?>
<links>
<link id="1">
   <text>Mozilla</text>
   <url>http://www.mozilla.com/</url>
</link>
<link id="2">
   <text>Microsoft</text>
   <url>http://www.microsoft.com/</url>
</link>
<link id="1">
   <text>Opera</text>
   <url>http://www.opera.com/</url>
</link>
</links>

Wenn der entsprechende MIME-Typ nicht geschickt wird (und die folgenden Beispiele nicht funktionieren), müssen Sie zu serverseitigen Mitteln greifen und per PHP oder ASP.NET oder mit einer anderen Technologie den HTTP-Header von Hand setzen. Bei Verwendung von PHP sorgt diese Anweisung (am Anfang der Seite!) dafür, dass der MIME-Typ geschickt wird:

<?php
   header('Content-type: text/xml');
?>

Unter ASP.NET verwenden Sie folgenden Code:

<%@ Page Language="JScript" %>
<script runat="server">
function Page_Load() {
   Response.ContentType = "text/xml";
}
</script>

Wenn Sie den PHP- oder ASP.NET-Weg gehen (müssen), müssen Sie die Dateinamen in den XMLHttpRequest-Abfragen in den folgenden Beispielen ebenfalls anpassen.

Die XML-Datei beziehungsweise die serverseitigen Skripte können Sie dann mit dem XMLHttpRequest-Objekt laden. Eine XMLHttpRequest-Eigenschaft haben wir aber bisher unter den Tisch fallen lassen: responseXML. Diese ermöglicht den Zugriff auf die zurückgegebenen XML-Daten, und das praktischerweise gleich als XML-Objekt, ohne weitere Konvertierung. Das vom Server gelieferte XML muss dazu nur valide sein, und der bereits angesprochene MIME-Typ muss stimmen.

Im Vergleich zum JavaScript-DOM bietet das XML-DOM vor allem zwei nützliche Erweiterungen: per documentElement greifen Sie auf den Wurzelknoten des Dokuments zu (eine gute Ausgangsbasis für Ausflüge im DOM-Baum), und xml liefert das XML-Markup als String zurück (gut für eigenes Parsen).

In Kapitel 16 haben Sie gesehen, wie Sie mit DOM-Methoden sehr schnell eine Aufzählungsliste oder eine Tabelle erstellen können. Das erste Beispiel wird jetzt mit XML nachgebaut.

Wie üblich werden die Daten per XMLHttpRequest-Objekt geladen; eine Callback-Funktion übernimmt dann die Weiterverarbeitung:

http.open("GET", "links.xml", true);
http.onreadystatechange = ausgeben;
http.send(null);

Der erste Schritt ist der Zugriff auf responseXML – das Ergebnis ist ein XML-Objekt:

var daten = http.responseXML;

Es gibt nun mehrere Möglichkeiten, die Daten im XML-Dokument weiterzuverarbeiten. Der wohl bequemste Weg besteht darin, per getElementsByTagName() auf alle <link>-Elemente zuzugreifen und dann die darunterliegenden Knoten zu analysieren.

var ergebnisse = daten.getElementsByTagName("link");
for (var i = 0; i < ergebnisse.length; i++) {
   // ...
}

Im Inneren der Schleife schauen wir uns einfach jeden Knoten an. Die Eigenschaft nodeName dient dann zur Identifikation, welcher Knoten vorliegt. Apropos Knoten: Den Textinhalt eines Knotens erhalten Sie über die Eigenschaft firstChild.nodeValue: Das erste Kind eines Knotens ist der Textknoten innerhalb; nodeValue gibt dessen Text zurück.

with (datum.childNodes[j]) {
   if (nodeName == "text") {
      name = firstChild.nodeValue;
   } else if (nodeName == "url") {
      url = firstChild.nodeValue;
   }
}

Die Variablen name und url enthalten nun die benötigten Daten; der folgende DOM-Code gibt sie dann aus:

var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href", url);
var txt = document.createTextNode(name);
a.appendChild(txt);
li.appendChild(a);
liste.appendChild(li);

Hier noch einmal der komplette Code im Überblick:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}

window.onload = function() {
   if (http != null) {
      http.open("GET", "links.xml", true);

      http.onreadystatechange = ausgeben;
      http.send(null);
   }
}

function ausgeben() {
   if (http.readyState == 4) {
      var liste = document.getElementById("Liste");
      var daten = http.responseXML;
      var ergebnisse = daten.getElementsByTagName("link");
      for (var i = 0; i < ergebnisse.length; i++) {
         var name, url;
         var datum = ergebnisse[i];
         for (var j = 0; j < datum.childNodes.length; j++) {
            with (datum.childNodes[j]) {
               if (nodeName == "text") {
                  name = firstChild.nodeValue;
               } else if (nodeName == "url") {
                  url = firstChild.nodeValue;
               }
            }
         }

         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", url);
         var txt = document.createTextNode(name);
         a.appendChild(txt);
         li.appendChild(a);
         liste.appendChild(li);
      }
   }
}
//--></script>
</head>
<body>
<ul id="Liste"></ul>
</body>
</html>

Bilder

Abbildung 19.1     Die dynamisch erzeugte Liste aus XML-Daten

Das ist recht viel Code, aber es funktioniert in allen Browsern. Doch damit sind wir leider am Ende des browserunabhängigen XML angekommen; die weiteren Technologien sind jeweils browserspezifisch beziehungsweise funktionieren nicht überall.


19.1.2 XML-Dokumente erstellen 
topBilder

Die Eigenschaft responseXML gibt also ein XML-Dokument zurück. Es gibt aber auch die Möglichkeit, aus einem String ein XML-Dokument zu erstellen. Leider haben die verschiedenen Browser etwas unterschiedliche Ansichten darüber, wie so etwas vonstatten gehen sollte. Und besonders gut dokumentiert ist das auch nicht.

Der Microsoft Internet Explorer setzt auf ActiveX. Das zu ladende Objekt heißt Microsoft.XMLDOM. Es kennt die Methode loadXML(), die sowohl eine XML-Datei als auch einen XML-String lädt:

var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.loadXML(daten);

Bei Mozilla-Browsern sieht es anders aus. Sie benötigen ein spezielles Mozilla-JavaScript-Objekt: DOMParser. Dieses besitzt die Methode parseFromString(), die ein DOM-Dokument (also auch XML!) einlesen kann:

var xml = (new DOMParser()).parseFromString(
   daten, "text/xml");

Damit ist das XML-Dokument erstellt, und das ist glücklicherweise auch das Ende des browserspezifischen Codes. Das vorherige Beispiel lässt sich also relativ einfach umschreiben und verwendet nicht mehr responseXML, sondern responseText und ein dynamisch erzeugtes XML-JavaScript-Objekt:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}

window.onload = function() {
   if (http != null) {
      http.open("GET", "links.xml", true);
      http.onreadystatechange = ausgeben;
      http.send(null);
   }
}

function ausgeben() {
   if (http.readyState == 4) {
      var liste = document.getElementById("Liste");
      var daten = http.responseText;
      if (window.ActiveXObject) {
         var xml = new ActiveXObject("Microsoft.XMLDOM");
         xml.loadXML(daten);
      } else if (document.implementation) {
         var xml = (new DOMParser()).parseFromString(daten, "text/xml");
      }
      var ergebnisse = xml.getElementsByTagName("link");
      for (var i = 0; i < ergebnisse.length; i++) {
         var name, url;
         var datum = ergebnisse[i];
         for (var j = 0; j < datum.childNodes.length; j++) {
            with (datum.childNodes[j]) {
               if (nodeName == "text") {
                  name = firstChild.nodeValue;
               } else if (nodeName == "url") {
                  url = firstChild.nodeValue;
               }
            }
         }

         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", url);
         var txt = document.createTextNode(name);
         a.appendChild(txt);
         li.appendChild(a);
         liste.appendChild(li);
      }
   }
}
//--></script>
</head>
<body>
<ul id="Liste"></ul>
</body>
</html>

Die gute Nachricht: Opera hat Gefallen an der Mozilla-Implementierung von XML gefunden und unterstützt diesen Ansatz ebenfalls – allerdings erst ab Browser-Version 9.

Bilder

Abbildung 19.2     Das Beispiel funktioniert auch im Opera

Noch ein wichtiger Hinweis zum vorherigen Listing: Beachten Sie, dass Sie mit window.onload arbeiten müssen, damit die XML-Datei erst geladen wird, wenn das gesamte HTML-Dokument übertragen worden ist. Andererseits kann es vor allem im Internet Explorer passieren, dass die Aufzählungsliste (<ul>) noch nicht im DOM-Baum vorhanden ist und das Skript dann nicht funktioniert.

 

 

19.2 XSL 
topBilder
topBilder

Die eXtensible Stylesheet Language (XSL) ist ein Standard des W3C, XML-Daten in ein (mehr oder minder) beliebiges Ausgabeformat umzuwandeln – im Web natürlich zumeist in HTML. Und mit JavaScript gibt es eine Möglichkeit, im Browser eine XSL-Transformation (XSLT) durchzuführen – zumindest in den meisten Browsern, aber wieder mit erheblichen Unterschieden.

Hier zunächst eine XSL-Datei, die die (bereits bekannte) XML-Daten in (bereits bekanntes) HTML-Markup für eine Aufzählungsliste umwandelt:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" />
  <xsl:template match="/">
<ul>
   <xsl:for-each select="links/link">
      <li><a><xsl:attribute name="href">
         <xsl:value-of select="url" />
         </xsl:attribute><xsl:value-of select="text" /></a>
      </li>
   </xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>

So weit, so gut. Jetzt wird es leider wieder browserspezifisch. Beginnen wir diesmal mit dem Internet Explorer, der wieder fleißig auf ActiveX setzt. Sie benötigen zwei ActiveX-Objekte:

gpBilder
 
MSXML2.FreeThreadedDOMDocument – zum Laden des XSL-Dokuments (das ja ebenfalls ein XML-Dokument ist)
gpBilder
 
MSXML2.XSLTemplate – zur Durchführung der XSL-Transformation

Beginnen wir mit dem Laden des XML-Dokuments: Die Methode load() lädt ein Dokument, allerdings asynchron, was im vorliegenden Beispiel eine zweite Callback-Methode erfordern würde. Deswegen ist es besser, das Dokument synchron zu laden, indem Sie die Objekteigenschaft async auf false setzen:

var xsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
xsl.async = false;
xsl.load("links.xsl");

In Mozilla-Browsern verwenden Sie die Methode document.implementation.createDocument(), die ein DOM-Dokument erzeugt. Der Clou: Dieses Dokument besitzt dann eine Methode load(), mit der Sie Dateien laden können. Beachten Sie, dass Sie hier wie beim XMLHttpRequest-Objekt auch die aktuelle Domain nicht verlassen dürfen.

var xsl = document.implementation.createDocument("", "", null);
xsl.async = false;
xsl.load("links.xsl");

Doch damit nicht genug der Browserunterschiede; auch die XSL-Transformation läuft unterschiedlich. Der Internet Explorer setzt auf das bereits zuvor erwähnte ActiveX-Objekt MSXML2.XSLTemplate; in dessen Eigenschaft stylesheet geben Sie die zuvor geladene XSL-Datei an:

var template = new ActiveXObject("MSXML2.XSLTemplate");
template.stylesheet = xsl;

Mit der Methode createProcessor() wird ein Verarbeitungsobjekt erzeugt, das die Transformation durchführen kann: Sie müssen dieses Objekt dann nur noch mit Daten füttern: Die Eigenschaft input erwartet das zu transformierende XML, und zwar als XML-DOM-Objekt. Dann startet transform() die Transformation.

var process = template.createProcessor();
process.input = daten;
process.transform();

Abschließend geben Sie die Rückgabe (sie steht in der Eigenschaft output) einfach aus beziehungsweise hängen sie in den DOM-Baum ein.

var div = document.createElement("div");
div.innerHTML = process.output;
document.body.appendChild(div);

Das Vorgehen in Mozilla-Browsern (und ab Version 9 auch im Opera) ist vom Prinzip her ähnlich, von der Durchführung und den Bezeichnern aber vollkommen unterschiedlich. Die Klasse für das Verarbeitungsobjekt heißt XSLTProcessor(), die Methode zum Laden der XLS-Datei ist importStylesheet(), und die Methode zur Transformation hört auf den Namen transformToFragment() (und erwartet als zweiten Parameter eine Referenz auf das aktuelle HTML-DOM). Dann aber können Sie per appendChild() die Rückgabe von transformToFragment() direkt in das aktuelle Dokument einfügen:

var process = new XSLTProcessor();
process.importStylesheet(xsl);
var ergebnis = process.transformToFragment(
   daten, document);
document.body.appendChild(ergebnis);

Das mag sich jetzt sehr aufwändig anhören und ist es gewissermaßen auch, aber wenn Sie das einmal implementiert haben (oder einfach den Code von der Buch-DVD verwenden), können Sie das Prinzip immer und immer wieder anwenden. Hier noch einmal der komplette Code, inklusive Browserabfrage:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}

window.onload = function() {
   if (http != null) {
      http.open("GET", "links.xml", true);
      http.onreadystatechange = ausgeben;
      http.send(null);
   }
}

function ausgeben() {
   if (http.readyState == 4) {
      var daten = http.responseXML;
      if (window.ActiveXObject) {
         var xsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
         xsl.async = false;
         xsl.load("links.xsl");
         var template = new ActiveXObject("MSXML2.XSLTemplate");
         template.stylesheet = xsl;
         var process = template.createProcessor();
         process.input = daten;
         process.transform();
         var div = document.createElement("div");
         div.innerHTML = process.output;
         document.body.appendChild(div);
      } else if (window.XSLTProcessor) {
         var xsl = document.implementation.createDocument("", "", null);
         xsl.async = false;
         xsl.load("links.xsl");
         var process = new XSLTProcessor();
         process.importStylesheet(xsl);
         var ergebnis = process.transformToFragment(
            daten, document);
         document.body.appendChild(ergebnis);
      }
   }
}
//--></script>
</head>
<body>
</body>
</html>


19.3 XPath 
topBilder
topBilder

Das letzte XML-Feature, das in JavaScript unterstützt wird, ist XPath. Hier sind die Browserunterschiede noch erheblicher als zuvor bei XML und XSL(T). Erneut beginnen wir mit dem Internet Explorer, denn dort geht es dieses Mal sehr einfach. Mit selectSingleNode() können Sie einen einzelnen Knoten via XPath-Abfrage auswählen; selectNodes() liefert mehrere Knoten zurück. Diese beiden Methoden sind von jedem Knoten eines XML-Dokuments aus zu erreichen.

Im Mozilla-Browser ist der Ansatz grundverschieden, etwas mächtiger, aber auch etwas komplizierter in der Anwendung. Es gibt ein eigenes XPath-Objekt namens XPathEvaluator, das XPath-Abfragen ausführen kann. Dessen Methode evaluate() führt eine XPath-Abfrage aus und erwartet die folgenden Parameter:

1. den XPath-Ausdruck
       
2. den Knoten, von dem aus der Ausdruck ausgewertet werden soll
       
3. null
       
4. den Rückgabewert: XPathResult.ANY_TYPE ist der Standardwert, Sie können aber auch XPathResult.FIRST_ORDERED_NODE_TYPE (nur ein Knoten) oder XPathResult.ORDERED_NODE_ITERATOR_TYPE (ein Iterator, dessen Methode iterateNext() von Knoten zu Knoten springt) angeben.
       
5. null
       

Noch ein Hinweis zu den Rückgabewerten: Wenn nur ein Knoten zurückgeliefert wird, benötigen Sie die Eigenschaft singleNodeValue der Rückgabe von evaluate(), um auf den Knoten zuzugreifen. Beim Iterator sieht eine Schleife zur Abfrage aller Knoten wie folgt aus:

while (knoten = iterator.iterateNext()) { // "knoten" ist der aktuelle XML-Knoten }

Als Beispiel für die Implementierung wird (wieder einmal) ein altes Beispiel umgeschrieben, um die Verwendung von XPath im Kontext zu zeigen. Am Anfang des Kapitels wurde die XML-Rückgabe vom Server analysiert; dazu hat getElementsByTagName() eine Liste von <link>-Elementen zurückgeliefert. Dieser Methodenaufruf soll jetzt durch XPath ersetzt werden. Das ist zwar im vorliegenden Fall nicht die einfachste Lösung, zeigt aber, wie sich XPath via JavaScript integrieren lässt.

Nachfolgend sehen Sie das komplette Listing; der XPath-Code ist halbfett hervorgehoben:

<html> <head> <title>AJAX</title> <script type="text/javascript"><!-- var http = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } window.onload = function() { if (http != null) { http.open("GET", "links.xml", true); http.onreadystatechange = ausgeben; http.send(null); } } function ausgeben() { if (http.readyState == 4) { var liste = document.getElementById("Liste"); var daten = http.responseXML;

// alt: var ergebnisse = xml.getElementsByTagName("link"); var ergebnisse = []; if (window.ActiveXObject) { ergebnisse = daten.documentElement.selectNodes("link"); } else if (window.XPathEvaluator) { var ev = new XPathEvaluator(); var iterator = ev.evaluate( "link", daten.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); var knoten; while (knoten = iterator.iterateNext()) { ergebnisse[ergebnisse.length] = knoten; } }

for (var i = 0; i < ergebnisse.length; i++) { var name, url; var datum = ergebnisse[i]; for (var j = 0; j < datum.childNodes.length; j++) { with (datum.childNodes[j]) { if (nodeName == "text") { name = firstChild.nodeValue; } else if (nodeName == "url") { url = firstChild.nodeValue; } } } var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("href", url); var txt = document.createTextNode(name); a.appendChild(txt); li.appendChild(a); liste.appendChild(li); } } } //--></script> </head> <body> <ul id="Liste"></ul> </body> </html>

So viel also zum Zugriff auf mehrere Knoten auf einmal. Zum Abschluss soll noch gezeigt werden, wie Sie auf einen einzelnen Knoten zugreifen. Zur Erinnerung: Im Internet Explorer verwenden Sie die Methode select-SingleNode(), im Mozilla den Rückgabetyp XPathResult.FIRST_ OR-DERED_NODE_TYPE gepaart mit der Eigenschaft single-NodeValue. Als Beispiel muss wieder die Generierung der Aufzählungsliste herhalten. Diesmal wird das Iterieren durch die Kindknoten von <link> durch eine XPath-Abfrage ersetzt. Wie üblich sind die Änderungen halbfett hervorgehoben.

<html> <head> <title>AJAX</title> <script type="text/javascript"><!-- var http = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } window.onload = function() { if (http != null) { http.open("GET", "links.xml", true); http.onreadystatechange = ausgeben; http.send(null); } } function ausgeben() { if (http.readyState == 4) { var liste = document.getElementById("Liste"); var daten = http.responseXML; // alt: var ergebnisse = xml.getElementsByTagName("link"); var ergebnisse = []; if (window.ActiveXObject) { ergebnisse = daten.documentElement.selectNodes("link"); } else if (window.XPathEvaluator) { var ev = new XPathEvaluator(); var iterator = ev.evaluate( "link", daten.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); var knoten; while (knoten = iterator.iterateNext()) { ergebnisse[ergebnisse.length] = knoten; } } for (var i = 0; i < ergebnisse.length; i++) { var name, url; var datum = ergebnisse[i];

if (window.ActiveXObject) { name = datum.selectSingleNode("text").firstChild.nodeValue; url = datum.selectSingleNode("url").firstChild.nodeValue; } else if (window.XPathEvaluator) { var ev = new XPathEvaluator(); var ergebnis1 = ev.evaluate( "text", datum, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); name = ergebnis1.singleNodeValue.firstChild.nodeValue; var ergebnis2 = ev.evaluate( "url", datum, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); url = ergebnis2.singleNodeValue.firstChild.nodeValue; }

var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("href", url); var txt = document.createTextNode(name); a.appendChild(txt); li.appendChild(a); liste.appendChild(li); } } } //--></script> </head> <body> <ul id="Liste"></ul> </body> </html>

In diesem Kapitel haben Sie gesehen, welche fortschrittlichen Möglichkeiten JavaScript in Bezug auf XML bietet. Dennoch: Bei einigen Features wie XSLT und XPath müssen Sie einige Umwege gehen, um zumindest Internet Explorer, Mozilla und Opera zu unterstützen – Konqueror und Safari bleiben dort außen vor.

Wenn Sie XSLT und/oder XPath benötigen und trotzdem Konqueror und Safari unterstützen möchten, hilft Ihnen möglicherweise die Bibliothek AJAXSLT von Google, die unter http://google-ajaxslt.sourceforge.net/ verfügbar ist. Dieses Projekt hat es sich zum Ziel gesetzt, diverse XML-Features für möglichst viele Browser zur Verfügung zu stellen. Werfen Sie einen Blick darauf!

 

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von tanzfrosch
  • 11.01.2018 - 14:56

Dankeschön, tolles Tut. !

Portrait von MaoMao
  • 09.01.2013 - 17:06

Gute Tutorial leicht erklärt.

x
×
×