如何使用JavaScript转换XML和XSLT?

okM*_*nty 10 javascript xml browser xslt internet-explorer

我想使用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>
Run Code Online (Sandbox Code Playgroud)

Chr*_*sen 31

您最好允许浏览器使用Xenan概述的方法执行转换.但是,完全可以在JavaScript中执行此操作.以下是如何以跨浏览器方式完成此操作的概述.

首先,您需要加载XML和XSL.有很多方法可以做到这一点.通常,它会涉及某种AJAX,但不一定.为了使这个答案变得简单,我将假设您已经涵盖了这一部分,但如果您需要更多帮助,请告诉我,我将编辑以包含加载XML的示例.

因此,让我们假设我们有这些对象:

var xml, xsl;
Run Code Online (Sandbox Code Playgroud)

其中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();
}
Run Code Online (Sandbox Code Playgroud)

您可以通过为其提供XML路径以及加载完成时要执行的函数来使用此代码:

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

我已经更新了我的例子来展示这种技术.你可以在这里找到一些工作演示代码.


要执行转换,最终将得到第三个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);
}
Run Code Online (Sandbox Code Playgroud)

此时,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]);
    }
}
Run Code Online (Sandbox Code Playgroud)

现在s应该将生成的XML包含为字符串.你应该能够将它传递给document.write或innerHTML,让它做一些有用的事情.请注意,它可能包含XML声明,您可能想要删除它.

我在Chrome,IE9和FF4中测试了这个.你可以在我的测试平台上找到一个简化的准系统,这个例子.

祝你好运,编码愉快!


Xen*_*nan 7

浏览器可以为您执行转换.不需要javascript,只需链接.xml中的.xsl,如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
Run Code Online (Sandbox Code Playgroud)

并只是提供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"/>
Run Code Online (Sandbox Code Playgroud)

  • 是的,但我认为这不是我要问的问题. (15认同)
  • 提问者想要使用Javascript,这不是正确的答案. (5认同)
  • 在我看来,在某些情况下,用户可能不知道更好的解决方案,并且在大多数情况下只是指示XSLT文件,因为XML文件的样式表可以很好地工作. (2认同)

Sor*_*ter 7

使用此脚本使用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>
Run Code Online (Sandbox Code Playgroud)