读取本地XML文件进行解析

Question

I am trying to make an XML parser, but I am having difficulties loading local files. 我正在尝试制作XML解析器，但是在加载本地文件时遇到了困难。

The issue being that when I try to load from my local drive it will still look for the file on the same domain. 问题是，当我尝试从本地驱动器加载时，它仍会在同一域中查找文件。 And the error I am receiving is this. 我收到的错误是这个。

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/ ) 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 file: 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>

Expected output: 预期产量：

Answer 1

The error means you are trying to load the file from JSFiddle but it does not exist on JSFiddle and it has no access to your local files because the origin is not the same look up CORS . 该错误意味着您正在尝试从JSFiddle加载文件，但是在JSFiddle上不存在该文件， 并且由于origin不同，因此无法访问本地文件，因此查找CORS 。

Therefore, your code should run fine on your machine and give the desired output if the file exits at that path. 因此，如果文件在该路径处退出，则您的代码应在计算机上正常运行，并提供所需的输出。

OR 要么

Loaded as an external public file (am using a file from github here) : 加载为外部公共文件（此处使用github中的文件） ：

Run code Snippet 运行代码片段

OR 要么

See working Plunkr 查看正在使用的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; }

 <table id="myTable"></table>

读取本地XML文件进行解析

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-01-10 08:14:19

读取本地XML文件进行解析

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-01-10 08:14:19

解决方案1
2 已采纳 2019-01-10 08:14:19