使用ajax加载xml内容答案

【问题标题】：Loading xml content with ajax使用ajax加载xml内容
【发布时间】：2016-05-23 02:57:12
【问题描述】：

好的，所以我有以下 html 文件：

<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 5px;
  }
</style>

<body>

  <button type="button" onclick="loadDoc()">Get the names</button>
  <br>
  <br>
  <table id="demo"></table>

  <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          myFunction(xhttp);
        }
      };
      xhttp.open("GET", "names.xml", true);
      xhttp.send();
    }

    function myFunction(xml) {
      var i;
      var xmlDoc = xml.responseXML;
      var table = "<tr><th>Names</th></tr>";
      var x = xmlDoc.getElementsByTagName("Names");
      for (i = 0; i < x.length; i++) {
        table += "<tr><td>" +
          x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
      }
      document.getElementById("demo").innerHTML = table;
    }
  </script>

</body>

</html>

以及以下包含名称的 xml 文件：

<?xml version="1.0" encoding="UTF-8" ?>
<Names>
  <Name>Alex</Name>
  <Name>Anna</Name>
  <Name>Eva</Name>
  <Name>George</Name>
  <Name>Jason</Name>
  <Name>John</Name>
  <Name>Lisa</Name>
  <Name>Mary</Name>
  <Name>Michael</Name>
  <Name>Nick</Name>
  <Name>Vicky</Name>
</Names>

我想要的是以某种方式从 xml 文件中获取名称并将它们存储在一个数组中，然后打印它们。但由于某种原因，只有第一个名称被正确存储（“Alex”）。我不明白我是什么做错了。有人可以帮助我吗？我敢打赌myFunction(xml) 有问题，但我找不到/修复它

【问题讨论】：

在浏览器中使用开发者工具。查看控制台。有没有错误？如果添加console.log 语句会怎样？ loadDoc 会运行吗？ myFunction 会运行吗？ xml 的值是你所期望的吗？ x 的值是你所期望的吗？ x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue 的值是你所期望的吗？
是的，我试过了，但结果是空的...
这是什么意思？您的意思是没有错误并且您为零长度字符串测试的值之一？
是的，没有错误...我需要帮助
好的，所以没有任何错误。当您在我建议添加它们的所有点中添加console.log 语句时，您得到了什么？

标签： javascript html ajax xml

【解决方案1】：

只有一个Names 标签，所以你的循环只会执行一次。
我会遍历 Name 标签。

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "<tr><th>Names</th></tr>";
  var x = xmlDoc.getElementsByTagName("Name");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td>" +
      x[i].childNodes[0].nodeValue;
  }
  document.getElementById("demo").innerHTML = table;
}

【讨论】：

【解决方案2】：

你需要检查一下：

var x = xmlDoc.getElementsByTagName("Names"); // Get the Names node.
var data = x[0].getElementsByTagName("Name"); // Get the Name node.

(function() {

  function myFunction(xml) {
    var i;
    var xmlDoc = (new window.DOMParser()).parseFromString(xml, "text/xml");
    var table = "<tr><th>Names</th></tr>";
    var x = xmlDoc.getElementsByTagName("Names");

    var data = x[0].getElementsByTagName("Name");

    for (i = 0; i < data.length; i++) {
      table += "<tr><td>" + data[i].childNodes[0].nodeValue + "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
  }

  var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?><Names>  <Name>Alex</Name>  <Name>Anna</Name>  <Name>Eva</Name>  <Name>George</Name>  <Name>Jason</Name>  <Name>John</Name>  <Name>Lisa</Name>  <Name>Mary</Name>  <Name>Michael</Name>  <Name>Nick</Name>  <Name>Vicky</Name></Names>";
  myFunction(xml);


})();

&lt;table id="demo"&gt;&lt;/table&gt;

【讨论】：