我如何使用JavaScript转换XML &XSLT
How can I use JavaScript to transform XML & XSLT?
我想使用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>
您最好允许浏览器使用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，你可以使用" transformnodeoobject "方法，如果你使用的是其他浏览器，你可以使用"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的字符串，你需要做更多的工作。
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。您应该能够将其传递到文档中。编写或innerHTML并让它做一些有用的事情。注意，它可能包含一个XML声明，您可能想要删除它，也可能不想删除它。
我在Chrome, IE9和FF4中测试了这一点。您可以在我的测试平台中找到一个简化的、基本的工作示例。
祝你好运，快乐编码!
浏览器可以为您执行转换。不需要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"/>
使用此脚本使用test转换test.xml。xsl，并将输出附加到容器。
<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>
适用于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);
}
}
}
由于声誉不高，只是回复形式的评论。如果您通过AJAX调用获得文档，DO返回xhttp.responseXML， DO NOT返回xhttp.responseXML.documentElement。
两者都可以使用XMLSerializer转换为文档的有意义的表示形式，但只有第一个语句是XSL转换的可行参数。
如果使用后者，则XSLTransformation的返回值(使用toDocument或toFragment函数)在我的情况下是null(使用Chrome)
对于这个问题，我不相信Chrome已经放弃了XSLT支持，就像页面上某处所说的。
希望有帮助
相关文章：
- IE10+11:XSLT转换将任意CR/LF添加到XML中
- 获取 XSLT 中的 XML 元素
- 如何在javascript中解析xml并从中提取xslt元素
- XML/XSLT in JavaScript
- Javascript XSLT Transformation with XML 存储在变量中
- 将javascript与XML和XSLT一起使用时出现问题
- Javascript XSLT 转换省略了 xml 声明
- 使用JavaScript、XSLT和XML在HTML上设置组合框的默认值
- 使用Greasemonkey脚本将javascript添加到用XSLT转换的XML文件中
- XSLT-将xml文档作为参数从javascript中传递
- 如何使用XSLT和javascript从XML创建HTML
- 使用XSLT导入XML的HTML页面
- javascript xml节点相等比较在XSLT内的函数中失败
- 在用于XML的XSLT中使用javascript在span标记中附加文本
- 如何将Javascript(jQuery)添加到从XSLT/XML创建的页面
- 在使用ESTK/InDesign导出时将XSLT应用于XML
- 使用javascript XML XSLT在最后一行设置单击事件
- InDesign使用XSLT 1将一个XML文件分解为多个XML文件
- 如何根据属性值在表中显示信息(XML-XSLT)
- 我如何使用JavaScript转换XML &XSLT
