Wie man XML mit XSL im JavaScript verbindet -> AJAX pur

Nachdem ich mich mit der Prototype-Lösung für XML abgemüht habe (siehe unten), ist meine Zufriedenheit immer noch nicht ganz da. Es wäre doch wirklich schön, wenn man per XMLHttpRequest XML anfordern, dies mittels XSL-Stylesheet formatieren und das Ergebnis an ein Element einfach an ein Element anhängen könnte. <- Wunsch!!!

Meine XML-Datei ist ganz einfach und hat einen Verweis auf ein XSL-Stylesheet:

lt;?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="xml2.xsl" type="text/xsl" ?>
<mee id="4711">
<mae attr="A12" pu="12">hugo</mae>
<mae attr="A12" pu="13">otto</mae>
</mee>

Das XSL-Stylesheet ist auch nicht umfangreich:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" />

<xsl:template match="/">
<div>
<xsl:for-each select="//mae">
<xsl:value-of select="." />
<br />
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>

Und nun sollen die beiden per Javascript verarbeitet werden, so dass das Ergebnis der XSL-Transformation an ein beliebiges Element angehangen werden kann:

<div id="myid">abc</div>
<script>
function LoadXMLwithXSL(xmlfile,tag_id){

// load the xml file
  var myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", xmlfile, false);
  myXMLHTTPRequest.send(null);
  var xmlDoc = myXMLHTTPRequest.responseXML;
  if (xmlDoc.childNodes[0].nodeName == "xml")
    xmlDoc.removeChild(xmlDoc.childNodes[0]);
  xslfile = /href="(.+\.xsl)"/.exec(xmlDoc.childNodes[0].nodeValue)[1];

// load the xsl file
  myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", xslfile, false);
  myXMLHTTPRequest.send(null);
  var xslStylesheet = myXMLHTTPRequest.responseXML;

  if (typeof XSLTProcessor != 'undefined') {      // firefox
    var xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xslStylesheet);
    document.getElementById(tag_id).innerHTML = "";
    document.getElementById(tag_id).appendChild(
       xsltProcessor.transformToFragment(xmlDoc, document));
    }
  else if (typeof xmlDoc.transformNode != 'undefined') {     // IE
    document.getElementById(tag_id).innerHTML 
      = xmlDoc.transformNode(xslStylesheet);
    }
}
</script>
<a href='javascript:LoadXMLwithXSL("xml2.xml","myid")'>CLICK</a>

Auch hier muss man wieder für die beiden Browser Firefox und IE (die anderen hab ich nicht) unterschiedliche Wege gehen. Das fängt schon beim Laden der XML-Datei an, mal mit xml-Prolog mal ohne ... Ich hoffen, dass ich den Namen der XSL-Datei einigermaßen gut erwischt habe - im Zweifelsfall ist href vor type zu notieren (was ja kein wirkliches Problem sein sollte). In der XSL-Datei muß noch die xsl:output- Verarbeitungsinstruktion auf html gesetzt werden, sonst wird wieder ein unnötiger XML-Prolog generiert. Beim IE kann nun innerHTML verwendet werden, weil es sich ja um reine HTML-Elemente handelt und die verkraftet der IE ja bekanntlich so einigermaßen ... ich geh nun nicht weiter auf die Tags ein, wo es Ausnahmen gibt (man denke an Tabellen), denn dazu gibt ja hinreichend viele Kommentare im Web.

Diese Lösung mit dem automatischen Laden der XSL-Datei, in dem man die Verarbeitungsinstruktion auswertet, habe ich so bislang nirgends gefunden, obwohl es eigentlich nahe liegt, die Formatierung von XML auch in AJAX mittel XSL vorzunehmen. Also zumindest meinem Wunsch (!) bin ich mit dieser Lösung ziemlich nahe. Mal sehen, wie stabil sich die Lösung bewähren wird.