如何使用JavaScript轉換XML和XSLT？

Question

我想使用JavaScript來顯示我的XSLT，但在我的服務器上沒有任何東西出現在瀏覽器中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
    function displayMessage() {
        // Load XML 

        var xml = new ActiveXObject("Microsoft.XMLDOM")
        xml.async = false
        xml.load("site-index.xml")

        // Load the XSL
        var xsl = new ActiveXObject("Microsoft.XMLDOM")
        xsl.async = false
        xsl.load("site-index.xsl")

        // Transform
        document.write(xml.transformNode(xsl))
    }
</script>
</body>
</html>

Answer 1

您最好允許瀏覽器使用Xenan概述的方法執行轉換。 但是，完全可以在JavaScript中執行此操作。 以下是如何以跨瀏覽器方式完成此操作的概述。

首先，您需要加載XML和XSL。 有很多方法可以做到這一點。 通常，它會涉及某種AJAX，但不一定。 為了使這個答案變得簡單，我將假設您已經涵蓋了這一部分，但如果您需要更多幫助，請告訴我，我將編輯以包含加載XML的示例。

因此，讓我們假設我們有這些對象：

var xml, xsl;

其中xml包含XML結構， xsl包含要轉換的樣式表。

編輯：

如果您需要加載這些對象，您最終將使用某種形式的AJAX來執行此操作。 有許多跨瀏覽器AJAX的例子。 您最好使用庫來完成此任務，而不是使用自己的解決方案。 我建議你看看jquery或YUI，這兩者都做得很好。

但是，基本思路非常簡單。 要完成此答案，以下是一些非庫特定的代碼，它們以跨瀏覽器的方式實現：

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();
}

您可以通過為其提供XML路徑以及加載完成時要執行的函數來使用此代碼：

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

我已經更新了我的例子來展示這種技術。 你可以在這里找到一些工作演示代碼。

要執行轉換，最終將得到第三個XML文檔，這是該轉換的結果。 如果您正在使用IE，則使用“ transformNodeToObject ”方法，如果您正在使用其他瀏覽器，則使用“ 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);
}

此時， result應包含結果轉換。 這仍然是一個XML文檔，你應該這樣對待它。 如果你想要一個可以傳遞給document.write或innerHTML的字符串，你還有一些工作要做。

再一次，有一個IE方法，以及一個適用於其他瀏覽器的方法。

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]);
    }
}

現在s應該包含生成的XML作為一個字符串。 你應該能夠將它傳遞給document.write或innerHTML，讓它做一些有用的事情。 請注意，它可能包含XML聲明，您可能想要刪除它。

我在Chrome，IE9和FF4中測試了這個。 你可以在我的測試平台上找到一個簡化的准系統，這個例子。

祝你好運，編碼愉快！

Answer 2

瀏覽器可以為您執行轉換。 不需要javascript，只需鏈接.xml中的.xsl，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>

並只是提供xml，沒有HTML。 假設您的.xsl包含正確的代碼

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>

Answer 3

使用此腳本使用test.xsl轉換test.xml並將輸出附加到容器。

 <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>

Answer 4

這適用於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);
         }
     }


 }

Answer 5

由於聲譽低，只能以答案的形式發表評論。 如果你通過AJAX調用的文件，做回了xhttp.responseXML和不返回xhttp.responseXML.documentElement 。

兩者都可以使用XMLSerializer轉換為文檔的有意義的表示，但只有第一個語句是XSL轉換的可行參數。

如果使用后者，XSLTransformation的返回值（使用toDocument或toFragment函數）在我的情況下為null （使用Chrome）

就此而言，我不認為Chrome已經放棄了XSLT支持，如此處頁面上所述。

希望有所幫助

如何使用JavaScript轉換XML和XSLT？

問題描述

5 個解決方案

解決方案1
31 2011-04-19 22:26:55

解決方案2
7 已采納 2011-04-19 20:59:36

解決方案3
6 2016-04-22 06:03:18

解決方案4
0 2017-11-05 21:55:29

解決方案5
0 2018-11-13 14:26:31

如何使用JavaScript轉換XML和XSLT？

問題描述

5 個解決方案

解決方案1 31 2011-04-19 22:26:55

解決方案2 7 已采納 2011-04-19 20:59:36

解決方案3 6 2016-04-22 06:03:18

解決方案4 0 2017-11-05 21:55:29

解決方案5 0 2018-11-13 14:26:31

解決方案1
31 2011-04-19 22:26:55

解決方案2
7 已采納 2011-04-19 20:59:36

解決方案3
6 2016-04-22 06:03:18

解決方案4
0 2017-11-05 21:55:29

解決方案5
0 2018-11-13 14:26:31