读取本地 XML 文件进行解析答案

【问题标题】：Read local XML files to parse读取本地 XML 文件进行解析
【发布时间】：2019-06-05 00:16:34
【问题描述】：

我正在尝试制作 XML 解析器，但在加载本地文件时遇到了困难。

问题是当我尝试从本地驱动器加载时，它仍会在同一域中查找文件。我收到的错误是这样的。

Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/Users/username/Documents/catalog.xml

HTML/JS: (http://jsfiddle.net/5dfhz40j/)

<!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()">Load</button>
<br><br>
<table id="myTable"></table>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      xmlFunction(this);
    }
  };
  xhttp.open("GET", "/Users/username/Documents/catalog.xml", true);
  xhttp.send();
}
function xmlFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Category</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("ITEM");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("myTable").innerHTML = table;
}
</script>
</body>
</html>

XML 文件：

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
  <ITEM>
    <TITLE>TITLE01</TITLE>
    <CATEGORY>CAT01</CATEGORY>
    <ID>ID01</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE02</TITLE>
    <CATEGORY>CAT02</CATEGORY>
    <ID>ID02</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE03</TITLE>
    <CATEGORY>CAT03</CATEGORY>
    <ID>ID03</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE04</TITLE>
    <CATEGORY>CAT04</CATEGORY>
    <ID>ID04</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE05</TITLE>
    <CATEGORY>CAT05</CATEGORY>
    <ID>ID05</ID>
  </ITEM>
</CATALOG>

预期输出：

【问题讨论】：

标签： javascript xml-parsing xmlhttprequest

【解决方案1】：

该错误表示您正在尝试从 JSFiddle 加载文件，但 它在 JSFiddle 上不存在，并且无法访问您的本地文件，因为 origin 不一样查找 CORS。

因此，您的代码应该在您的机器上运行良好，并提供所需的输出如果文件在该路径退出。

或

作为外部公共文件加载（这里使用的是来自 github 的文件）：

运行代码片段

或

See working Plunkr

var xmlFile = 'https://raw.githubusercontent.com/olayenca/externals/master/XMLParse.xml';

function loadDoc() {
  var xhttp = new XMLHttpRequest();

  xhttp.open("GET", xmlFile, true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      xmlFunction(this.response);
    }
  };

}

function xmlFunction(xml) {
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "text/xml");
  var table = "<tr><th>Category</th><th>Title</th><th>Subcategory</th></tr>"; //subcategory heading
  var x = xmlDoc.getElementsByTagName("ITEM");
  for (var elem of x) {
    var titles = elem.getElementsByTagName(
      "TITLE")[0].childNodes[0].nodeValue;
    var cats = elem.getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
    var subCats = elem.getElementsByTagName("SUBCATEGORY").length === 0 ? "..." : elem.getElementsByTagName("SUBCATEGORY")[0].childNodes[0].nodeValue;

    table += "<tr><td>" + cats + "</td><td>" + titles + "</td><td>" + subCats + "</td></tr>";
  }
  document.getElementById("myTable").innerHTML = table;
}
loadDoc();

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

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

【讨论】：

感谢 Olayinka 的回答！阅读您的答案后，我尝试设置一个 localhost 并且它可以正常工作，就像您说的那样。但是，当我在网络上时，是否可以加载本地文件？我猜由于安全原因，这可能是不可能的。如果可能的话，我正在考虑从扩展中进行解析。我们需要下载一些 xml 文件，然后解析它们以找到一些信息，因此我们最容易从本地驱动器访问它们。
@JoeBerg 您可以查看file:/// stackoverflow.com/a/18246357/7626277 但这仅适用于网页在您的电脑上运行且文件可用或在其他人的同一位置上的情况下，也请看up OData stackoverflow.com/a/3396978/7626277 更灵活，允许更改xml数据，可以从任何地方查询。希望它有所帮助:)
谢谢！我会调查一下，看看我能不能解决它。 :) 我遇到了另一个问题，也许你可以快速浏览一下，看看你是否能理解如何解决它。我在访问“SUBCATEGORY”时遇到问题，所有其他人都可以通过上面使用的方法访问，除了那个。你知道问题是什么吗？它前面似乎有一个额外的空间。我把它作为评论放在 jsfiddle 的 html 部分：jsfiddle.net/5dfhz40j/4
@JoeBerg 如果您的意思是无法访问，因为没有出现在 DOM 中，请查看更新的答案，运行 sn-p 并查看更新的文件 raw.githubusercontent.com/olayenca/externals/master/…。
@JoeBerg 添加一个条件来查找缺失的节点。查看更新。