XML mit Javascript auswerten

[Colin Finck]

Sowas ähnliches stand mal in c't 5/2006.

Mit AJAX kannst du die Funktion folgendermaßen realisieren:

------------------------------------------
function helpMe(tag)
{
  ajax = new XMLHttpRequest();
  ajax.open("GET", "hilfe.xml", true);

// IE cacht die übertragenen Dateien. Deshalb erscheint nach einem zweiten Abruf keine Veränderung.
  // Mit diesem zusätzlichen Request-Header lässt sich das Problem umgehen.
  ajax.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

ajax.send(null);

ajax.onreadystatechange = function()
  {
    if(ajax.readyState == 4)
    {
      if(ajax.status == 200)
        document.getElementById("hilfeDIV").appendChild(document.createTextNode(ajax.responseXML.getElementsByTagName(tag)[0].nodeValue));
      else
        alert("Fehler beim Abruf! Fehler-Code: " + ajax.status + ", Fehler-Text: " + ajax.statusText);
    }
  }
}

// XMLHttpRequest-Objekt für Internet Explorer 5.x und 6
/*@cc_on @if (@_win32 && @_jscript_version >= 5) if (!window.XMLHttpRequest)
function XMLHttpRequest() { return new ActiveXObject('Microsoft.XMLHTTP') }
@end @*/
------------------------------------------

Aufrufen kannst du diese Funktion dann z.B. so: helpMe("help1");

Dies funktioniert allerdings nur, solange nodeValue keine weiteren Tags wie Fettschrift und Links enthält.
Wenn du weitere Tags einbinden willst, ist noch folgende Hilfsfunktion notwendig (hab ich jetzt mal aus dem c't-Beispiel übernommen :-)

------------------------------------------
function klonen(quelle, ziel) {
 // Hilfsfunktion für Fußnoten-Darstellung im DOM
 // Einfaches cloneNode() funktioniert nicht bei komplexen
 // Gebilden; eine Schleife baut den Teilbaum nach.
 for(var i = 0; i < quelle.childNodes.length; i++) {
  var knoten = quelle.childNodes[i];
  switch (knoten.nodeType) {
   case 1: // Elementknoten
    var neu = ziel.appendChild(document.createElement(knoten.nodeName));
    for (var j = 0; j < knoten.attributes.length; j++) {
     neu.setAttribute(knoten.attributes[j].nodeName, knoten.attributes[j].nodeValue);
    }
    klonen(knoten, neu);
    break;
   case 3: // Textknoten
    subknoten = document.createTextNode(knoten.nodeValue);
    ziel.appendChild(subknoten);
   // andere Knotentypen sind nicht relevant
  }
 }
}
------------------------------------------

Im vorherigen Code musst du dann die Zeile "document.getElementById ....." durch folgende Zeile ersetzen:

------------------------------------------
klonen(ajax.responseXML.getElementsByTagName(tag)[0].cloneNode(true), document.getElementById("hilfeDIV"));
------------------------------------------

Das c't-Beispiel findest du übrigens unter der URL http://www.heise.de/ct/ftp/06/05/152 bzw. unter Soft-Link "0605152".

Ich hab's jetzt nicht getestet, aber der Code sollte funktionieren.

Beste Grüße,

Colin Finck