让 XML 在 HTML 中显示答案

【问题标题】：Getting XML to display in HTML让 XML 在 HTML 中显示
【发布时间】：2014-08-09 10:47:09
【问题描述】：

我一直在搞乱一些在线脚本来解析 XML 以将其显示在表格中。不幸的是，与我看到的示例不同，我的没有显示表格。

<html>
    <head>
    </head>
    <body>
    <script>

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET","europe.xml",false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML; 

    document.write("<table border='1'>");

    var x = xmlDoc.getElementsByTagName("country");

    for (i = 0; i < x.length; i++) { 
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("users")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }

    document.write("</table>");
    </script>
    </body>
</html>

这是 europe.xml

<?xml version="1.0" ?>
<continent name="Europe">
    <country>
        <name>Albania</name>
        <users>1.6 Million</users>
    </country>
    <country>
        <name>Austria</name>
        <users>6.7 Million</users>
    </country>
    <country>
        <name>Belgium</name>
        <users>8.6 Million</users>
    </country>
</continent>

【问题讨论】：

为什么不使用 XSLT 将 XML 转换为 XHTML？
正如上面提到的@DaveJarvis，如果您不打算将XML 作为现有HTML 文档的一部分 加载，而是将整个XML 转换为HTML，XSLT 绝对是最佳选择。如果遇到任何问题，您可以尝试并提出带有 XSLT 标记的问题。

标签： javascript html ajax xml

【解决方案1】：

jsBin demo

// Just a reusable function. See use below.
function nodeVal(el, tag) {
  return el.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
}

var xmlhttp = window.XMLHttpRequest?
  new XMLHttpRequest():
  new ActiveXObject("Microsoft.XMLHTTP"); /*IE*/

// AJAX is asyncronous, so wait for a response
xmlhttp.onreadystatechange = function () {
  if (this.readyState == 4) { // Good to go!
    var XML,
        TXT = this.responseText; // Get the XML string

    if (window.DOMParser){       // Parse
      XML = new DOMParser().parseFromString(TXT,"text/xml");
    }else {                      // IE
      XML = new ActiveXObject("Microsoft.XMLDOM");
      XML.async = false;
      XML.loadXML(TXT);
    }

    // Get desired elements from XML
    var el  = XML.getElementsByTagName("country");

    // Loop elements and retrieve data
    var html = "<table border='1'>";    // Ok, actually a string :)
    for(var i=0; i<el.length; i++){     // concatenate our string
      html += "<tr><td>"+ nodeVal(el[i], "name") +"</td>"+
                  "<td>"+ nodeVal(el[i],"users") +"</td></tr>";
    }
    html += "</table>";

    // Finally append our html String
    document.body.innerHTML = html;
  }
};

xmlhttp.open("GET", "europe.xml", false);
xmlhttp.send();

也在 IE7 中测试过

【讨论】：

【解决方案2】：

最好以字符串形式生成表格，然后使用 DOM 将生成的 HTML 附加到现有元素。

1) 在您希望放置表格的 HTML 中添加一个容器：

<html><body>
...
    <div id="container"></div>
...
</body></html>

2) 加载 XML 文件：

var client;
if (window.XMLHttpRequest) {
    client = new XMLHttpRequest();
}
else {
    client = new ActiveXObject("Microsoft.XMLHTTP");
}
client.open('GET', 'europe.xml');

3) 读取文件内容。这应该在Ajax 回调函数中完成，以确保在处理开始之前读取文件。通常你会测试响应代码等。这里是一个例子：

client.onreadystatechange = function() { // will run when the file loads
    // get the response XML
    var xmlDoc = client.responseXML;

    // get the list of countries
    var countries = xmlDoc.getElementsByTagName("country");

    ... // the rest of the code (see below)
}

client.send(); // this will send the request which will be captured by the function above

4) 获取<country> 元素的列表（在上面的代码中）：

var countries = xmlDoc.getElementsByTagName("country");

5) 获取要添加表的容器div：

var container = document.getElementById("container");

6) 在字符串中创建一个 HTML 表格并将元素数据放入其中：

var tableString = "<table border='1'>"; // Make a table and put the element data inside it
for (i = 0; i < countries.length; i++) {
    tableString += "<tr><td>";
    tableString += countries[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    tableString +="</td><td>";
    tableString += countries[i].getElementsByTagName("users")[0].childNodes[0].nodeValue;
    tableString += "</td></tr>";
}
tableString += "</table>";

7) 将表格附加到容器中：

container.innerHTML = tableString;

此示例使用纯 JavaScript。您可能还想尝试使用JQuery 的解决方案，这可能会将上面的代码行数减少到大约一半。

参见http://jsfiddle.net/helderdarocha/N2nER/ 的示例（我在小提琴中使用嵌入式 XML 而不是 Ajax，以避免加载外部文件）

更新：这是整个 HTML 页面，以防您在组装部件时遇到问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>

        var client;
        if (window.XMLHttpRequest) {
            client = new XMLHttpRequest();
        }
        else {
            client = new ActiveXObject("Microsoft.XMLHTTP");
        }
        client.open('GET', 'europe.xml');

        client.onreadystatechange = function() { // will run when the file loads
            // get the response XML
            var xmlDoc = client.responseXML;

            // get the list of countries
            var countries = xmlDoc.getElementsByTagName("country");

            // get the container where you want to embed the table
            var container = document.getElementById("container");

            var tableString = "<table border='1'>"; // Make a table and put the element data inside it
            for (i = 0; i < countries.length; i++) {
                tableString += "<tr><td>";
                tableString += countries[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                tableString +="</td><td>";
                tableString += countries[i].getElementsByTagName("users")[0].childNodes[0].nodeValue;
                tableString += "</td></tr>";
            }
            tableString += "</table>";

            // append the table to the container
            container.innerHTML = tableString;
        }

        client.send();

    </script>
</head>
<body>
    <h1></h1>
    <div id="container"></div>
</body>
</html>

【讨论】：

很棒的演练！不幸的是，它不起作用。我认为这可能与外部文件有关。我会玩。
实际上这可能与 JavaScript 的异步特性有关。正如我在那里写的那样，您加载文件的方式实际上并不是 100% OK，因为在执行代码时文件可能尚未加载。我可以在几分钟内帮你解决这个问题。
我稍微改变了问题并粘贴了一个完整的 HTML 文档，该文档应该可以正确加载您的 XML。
非常感谢！仍然只在 Firefox 中有效，但我相信你是这样做的。我可以按照代码来看看它做了什么。这只能是一种学习体验。
我在 Chrome 和 Safari 上运行它并且成功了。我没有在 Windows 或平板电脑上测试它。在网页设计中，您总是必须处理浏览器的不兼容问题，但有一些框架（例如 JQuery）可以帮助解决这个问题。如果你写了一个新问题（链接这个问题作为参考）要求一个 JQuery 解决方案，你可能会得到一些很好的独立于浏览器的解决方案，因为 JQuery 会处理浏览器不兼容问题。