Jak mogę użyć JavaScript do przekształcenia XML & XSLT?

Prawdopodobnie lepiej pozwolić przeglądarce na przeprowadzenie transformacji za pomocą metody xenan kontury. Jednak jest to całkowicie możliwe, aby to zrobić również w JavaScript. Oto zarys tego, jak możesz to osiągnąć w sposób między przeglądarkowy.

Najpierw musisz załadować XML i XSL. Można to zrobić na wiele sposobów. Zazwyczaj będzie to wiązało się z jakimś Ajaxem, ale niekoniecznie. Aby ta odpowiedź była prosta, zakładam, że masz tę część pokryte, ale proszę dać mi znać, jeśli potrzebujesz więcej pomocy, i będę edytować, aby dołączyć przykład ładowania XML.

Zatem Załóżmy, że mamy te obiekty:

var xml, xsl;

Gdzie xml zawiera strukturę XML, a xsl zawiera arkusz stylów, za pomocą którego chcesz przekształcić.

Edit:

Jeśli musisz załadować te obiekty, w końcu użyjesz do tego jakiejś formy AJAX. Istnieje wiele przykładów cross-browser AJAX tam. Ty będzie lepiej korzystać z biblioteki, aby to osiągnąć, a nie rolling własne rozwiązanie. Proponuję przyjrzeć się jquery lub YUI, z których oba wykonują doskonałą robotę.

function loadXML(path, callback) {
    var request;

    // Create a request object. Try Mozilla / Safari method first.
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();

    // If that doesn't work, try IE methods.
    } else if (window.ActiveXObject) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
            }
        }
    }

    // If we couldn't make one, abort.
    if (!request) {
        window.alert("No ajax support.");
        return false;
    }

    // Upon completion of the request, execute the callback.
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                callback(request.responseXML);
            } else {
                window.alert("Could not load " + path);
            }
        }
    };

    request.open("GET", path);
    request.send();
}

Możesz użyć tego kodu, dając mu ścieżkę do swojego XML i funkcję do wykonania po zakończeniu ładowania:

loadXML('/path/to/your/xml.xml', function (xml) {
    // xml contains the desired xml document.
    // do something useful with it!
});

I zaktualizowałem mój przykład, aby pokazać tę technikę. Możesz znaleźć działający kod demonstracyjny tutaj .

Aby wykonać transformację, otrzymasz trzeci dokument XML, który jest wynikiem tej transformacji. Jeśli pracujesz z IE, używasz metody " transformNodeToObject ", a jeśli pracujesz z innymi przeglądarkami, używasz metody" transformToDocument ":

var result;

// IE method
if (window.ActiveXObject) {
    result = new ActiveXObject("MSXML2.DOMDocument");
    xml.transformNodeToObject(xsl, result);

// Other browsers
} else {
    result = new XSLTProcessor();
    result.importStylesheet(xsl);
    result = result.transformToDocument(xml);
}

W tym momencie result powinien zawierać wynikająca z tego transformacja. Jest to nadal dokument XML i należy go traktować jako taki. Jeśli chcesz ciąg, który możesz przekazać do document.write lub innerHTML, masz trochę więcej pracy do zrobienia.

Po raz kolejny istnieje do tego metoda IE i metoda, która ma zastosowanie do innych przeglądarek.

var x, ser, s = '';

// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
    for (x = 0; x < result.childNodes.length; x += 1) {
        s += result.childNodes[x].xml;
    }
// Other browsers
} else {
    ser = new XMLSerializer();
    for (x = 0; x < result.childNodes.length; x += 1) {
        s += ser.serializeToString(result.childNodes[x]);
    }
}

Teraz {[10] } powinien zawierać wynikowy XML jako łańcuch znaków. Powinieneś być w stanie przekazać to do dokumentu.napisz lub innerHTML i niech zrobi coś pożytecznego. Zauważ, że może zawierać XML oświadczenie, które możesz chcieć usunąć, lub nie.

Powodzenia i szczęśliwego kodowania!

Użyj tego skryptu, aby przekształcić test.xml using test.xsl i dołącza wyjście do kontenera .

 <div id="container"></div>
 <script>
     function loadXMLDoc(filename) {
        if (window.ActiveXObject) {
             xhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } else {
             xhttp = new XMLHttpRequest();
        }
        xhttp.open("GET", filename, false);
        xhttp.send("");
        return xhttp.responseXML;
     }

     xml = loadXMLDoc("test.xml");
     xsl = loadXMLDoc("test.xsl");
     if (document.implementation && document.implementation.createDocument) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById('container').appendChild(resultDocument);
     }
 </script>

To działa w Chrome / Firefox/Edge / IE11

 function loadXMLDoc(filename) {
     if (window.ActiveXObject || "ActiveXObject" in window) {
         xhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } else {
         xhttp = new XMLHttpRequest();
     }
     xhttp.open("GET", filename, false);
     xhttp.send("");
     return xhttp.responseXML;
 }


 if (window.ActiveXObject || "ActiveXObject" in window) {
     ie();
 } else {

     xml = loadXMLDoc("input.xml");
     xsl = loadXMLDoc("mmlctop2_0.xsl");

     if (document.implementation && document.implementation.createDocument) {
         xsltProcessor = new XSLTProcessor();
         xsltProcessor.importStylesheet(xsl);
         resultDocument = xsltProcessor.transformToDocument(xml, document);

         var serializer = new XMLSerializer();
         var transformed = serializer.serializeToString(resultDocument.documentElement);

         alert(transformed);
     }
 }

 // https://msdn.microsoft.com/en-us/library/ms753809(v=vs.85).aspx
 function ie() {

     var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
     var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
     var xslProc;
     xslDoc.async = false;
     xslDoc.load("mmlctop2_0.xsl");
     if (xslDoc.parseError.errorCode != 0) {
         var myErr = xslDoc.parseError;
         alert("You have error " + myErr.reason);
     } else {
         xslt.stylesheet = xslDoc;
         var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
         xmlDoc.async = false;
         xmlDoc.load("input.xml");
         if (xmlDoc.parseError.errorCode != 0) {
             var myErr = xmlDoc.parseError;
             alert("You have error " + myErr.reason);
         } else {
             xslProc = xslt.createProcessor();
             xslProc.input = xmlDoc;
             xslProc.addParameter("param1", "Hello");
             xslProc.transform();
             alert(xslProc.output);
         }
     }


 }