XML转移到HTML文档(XSL)中

我似乎无法使用XSL将XML数据传输到HTML网页。这是一个大学项目，因此不使用其他技术。

XML结构很简单 - 例如

<dust2>
  <team>
    <player>
      <name>Xizt</name>
      <team>NiP</team>
      <kills>19</kills>
      <deaths>16</deaths>
      <assists>0</assists>
      <kdr>0.19</kdr>
    </player>
  </team>
</dust2>

真实文档具有2个<team>标签，每个标签都有5个<player>。XML标签全部关闭并正确地声明了我所知。

讲师为我们提供了此脚本。

// HTTP Request
function loadXML (file) {
    if (window.XMLHttpRequest) {
        // code for Chrome, Firefox, Opera, etc.
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE
        xhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Different ActiveXObject for IE
    };
    xhttp.open("GET", file, false);
    try {xhttp.responseType = "msxml-document";} catch (e) {}; // Set responseType for IE 9+
    xhttp.send(null);
    return xhttp.responseXML;
};
// Process & Output
function processXML (location, xml, xsl) {
    if (window.ActiveXObject || xhttp.responseType == "msxml-document" || "ActiveXObject" in window) { // Added criteria for IE detection
        // code for IE
        ex = xml.transformNode(xsl);
        document.getElementById(location).innerHTML = ex;
    } else if (document.implementation && document.implementation.createDocument) {
        // code for Chrome, Firefox, Opera, etc.
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById(location).innerHTML = '';
        document.getElementById(location).appendChild(resultDocument);
    };
};
// HTTP Request, Process & Output
function outputXML(location, xmlFile, xslFile) {
    xml = loadXML(xmlFile);
    xsl = loadXML(xslFile);
    processXML(location, xml, xsl);
};
// Parse XML to String
function XMLToString(xml) {
    if (window.ActiveXObject) {
        // code for IE
        var txt = xml.xml;
        return txt;
    } else {
        // code for Chrome, Firefox, Opera, etc.
        var txt = new XMLSerializer();
        txt = txt.serializeToString(xml);
        return txt;
    };
};
// Parse String to XML
function StringToXML(txt) {
    if (window.DOMParser) {
        // code for Chrome, Firefox, Opera, etc.
        parser=new DOMParser();
        xml=parser.parseFromString(txt,"text/xml");
    } else {
        // code for IE
        xml=new ActiveXObject("Microsoft.XMLDOM");
        xml.async=false;
        xml.loadXML(txt); 
    };
    return xml;
};

HTML看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dreamhack Winter 2014 Finals</title>
  <!-- JS Transform - Obtained from lecture material -->
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript">
    function loadxml() {
      outputXML('dust2', 'xml/dust2nons.xml', 'xml/dust2stats.xsl');
    }
  </script>
</head>
<body onload="loadxml();">
  <p><div id="dust2" onload="outputXML('dust2', 'xml/dust2nons.xml', 'xml/dust2stats.xsl');"></div></p>
</body>
</html>

我的XSL文档已更改UMP十倍，只能在主页上打印一块XML，但即使使用相同的技术，我也无法完全到达那里。我设法让XSL在XSL文件中显示静态HTML，但没有

<xsl:for-each select="dust2/team/player">
<xsl:value-of select="name">

到目前为止的组合。

从那以后，我失去了从XSL文档传输静态HTML的能力。我不确定即使是Doctype等是否正确。

我的XSL文档，dust2stats.xsl

<html xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="1.0">
  <body>
    <table>
      <thead>
        <tr>
          <th>Player</th>
          <th>Kills</th>
          <th>Assists</th>
          <th>Deaths</th>
          <th>KDR</th>
        </tr>
      </thead>
      <tbody>
        eggs
        <xsl:for-each select="dust2/team/player">
          <tr>
            <td>
              <xsl:value-of select="name" />
            </td>
            <td>
              <xsl:value-of select="kills" />
            </td>
            <td>
              <xsl:value-of select="assists" />
            </td>
            <td>
              <xsl:value-of select="deaths" />
            </td>
            <td>
              <xsl:value-of select="kdr" />
            </td>
            test1234
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
  </body>
</html>

随机单词是试图传递静态HTML的尝试。我在某个阶段实现了这一目标，但从那以后就退缩了。

任何形式的指导或建议将不胜感激。：）

首先，您需要正确声明样式表：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   [here is your templates]
</xsl:stylesheet>

然后，您需要声明转换的根模板：

<xsl:template match="/">
   <html>
      ...
      <tbody>
         <xsl:apply-templates select="dust2/team/player/>
      </tbody>
      ...
   </html>
</xsl:template>

然后，您可以为每个玩家声明下面的模板：

<xsl:template match="player">
    <tr>
                    <td><xsl:value-of select="name"/></td>
                    <td><xsl:value-of select="kills"/></td>
                    <td><xsl:value-of select="assists"/></td>
                    <td><xsl:value-of select="deaths"/></td>
                    <td><xsl:value-of select="kdr"/></td>
   </tr>
</xsl:template>

不确定浏览器XSLT处理器，但通常看起来像这样。

以下效果很好（在IE 5 ，Chrome，Firefox中测试）。

首先，我重写了整个脚本。

function loadXml(url) {
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        try { xhr.responseType = "msxml-document"; } catch (ex) {}
    } else {
        throw new Error("Failed to create XMLHTTP request object.");
    }
    xhr.open("GET", url, false);
    xhr.send();
    return xhr.responseXML;
}
function transformXml(xml, xsl) {
    var xsltProcessor;
    if (typeof xml === "string") xml = stringToXml(xml);
    if (typeof xsl === "string") xsl = stringToXml(xsl);
    if (window.XSLTProcessor) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        return xsltProcessor.transformToFragment(xml, document);
    } else if ("ActiveXObject" in window) {
        return xml.documentElement.transformNode(xsl);
    } else {
        throw new Error("Failed to transform XML.");
    }
}
function xmlToString(input) {
    var str;
    if (window.XMLSerializer) {
        return (new XMLSerializer()).serializeToString(input);
    } else if (input.xml) {
        return input.xml;
    } else {
        throw new Error("Failed to convert input to string.");
    }
    return str;
}
function stringToXml(input) {
    var xml;
    if ("ActiveXObject" in window) {
        xml = new ActiveXObject("Microsoft.XMLDOM");
        xml.async=false;
        xml.loadXML(input);
        return xml;
    } else if (window.DOMParser) {
        return (new DOMParser()).parseFromString(input, "text/xml");
    } else {
        throw new Error("Failed to convert input to XML document.");
    }
}
function setElementContent(element, content) {
    element.innerHTML = '';
    if (content.nodeType) { 
        element.appendChild(content);
    } else {
        element.innerHTML = content;
    }
}

现在我们有了这些功能：

loadXml-同步加载来自URL的XML文档并返回
transformXml-应用于XML并返回结果
xmlToString-获取XML文档并返回字符串
stringToXml-取一个字符串并返回XML文档
setElementContent-设置元素的内容

接下来，您的XSL语法被弄乱了。好吧，从理论上讲，它是有效的，但是IE使用的MSXML处理器不了解这种特定格式。它期望以<xsl:stylesheet>或<xsl:transform>开头的XML文档。

所以我们正在使用：

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <output method="html" />
  <xsl:template match="/dust2">
    <xsl:for-each select="team">
      <table>
        <thead>
          <tr>
            <th>Player</th>
            <th>Kills</th>
            <th>Assists</th>
            <th>Deaths</th>
            <th>KDR</th>
          </tr>
        </thead>
        <tbody>
          <xsl:for-each select="player">
            <tr>
              <td><xsl:value-of select="name" /></td>
              <td><xsl:value-of select="kills" /></td>
              <td><xsl:value-of select="assists" /></td>
              <td><xsl:value-of select="deaths" /></td>
              <td><xsl:value-of select="kdr" /></td>
            </tr>
          </xsl:for-each>
        </tbody>
      </table>
    </xsl:for-each>
  </xsl:template>
</xsl:transform>

请注意，Generatung完整的HTML文档是不必要的。片段（在这种情况下为<table>）很好。

现在一切都设置了，我们可以使用它：

<html lang="en">
<head>
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript">
    function init() {
      var xml = loadXml('xml/dust2nons.xml'),
          xsl = loadXml('xml/dust2stats.xsl'),
          target = document.getElementById('dust2');
      setElementContent(target, transformXml(xml, xsl));
    }
  </script>
</head>
<body onload="init();">
  <div id="dust2"></div>
</body>
</html>

这是transformXml(xml, xsl)产生的：

<table>
  <thead>
    <tr>
      <th>Player</th><th>Kills</th><th>Assists</th><th>Deaths</th><th>KDR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Xizt</td><td>19</td><td>0</td><td>16</td><td>0.19</td>
    </tr>
  </tbody>
</table>

相关内容

最新更新

热门标签：