Javascript 读取要解析的本地XML文件_Javascript_Xml Parsing_Xmlhttprequest

Javascript 读取要解析的本地XML文件

javascript

Javascript 读取要解析的本地XML文件,javascript,xml-parsing,xmlhttprequest,Javascript,Xml Parsing,Xmlhttprequest,我正在尝试制作一个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:（）表，th，td{ 边框：1px纯黑；边界

我正在尝试制作一个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:（）


表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充物：5px；
}
负载



函数loadDoc（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
xml函数（this）；
}
};
xhttp.open（“GET”，“/Users/username/Documents/catalog.xml”，true）；
xhttp.send（）；
}
函数xmlFunction（xml）{
var i；
var xmlDoc=xml.responseXML；
var table=“categoryttle”；
var x=xmlDoc.getElementsByTagName（“项目”）；
对于（i=0；i，该错误意味着您正试图从JSFIDLE加载文件，但它在JSFIDLE上不存在，并且无法访问您的本地文件，因为源文件不相同查找
因此，您的代码应该在您的计算机上正常运行，并且如果文件在该路径退出，则会给出所需的输出
或
作为外部公共文件加载（我在此处使用来自github的文件）：
运行代码片段
或


var-xmlFile='1〕https://raw.githubusercontent.com/olayenca/externals/master/XMLParse.xml';
函数loadDoc（）{
var xhttp=newXMLHttpRequest（）；
open（“GET”，xmlFile，true）；
xhttp.send（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
xmlFunction（this.response）；
}
};
}
函数xmlFunction（xml）{
var parser=新的DOMParser（）；
var xmlDoc=parser.parseFromString（xml，“text/xml”）；
var table=“CategoryTitleSubcategory”；//子类别标题
var x=xmlDoc.getElementsByTagName（“项目”）；
对于（x的变量元素）{
var titles=elem.getElementsByTagName(
“标题”）[0]。子节点[0]。节点值；
var cats=elem.getElementsByTagName（“类别”）[0]。子节点[0]。节点值；
var subCats=elem.getElementsByTagName（“子类别”）。长度===0？…“：elem.getElementsByTagName（“子类别”）[0]。子节点[0]。节点值；
表+=“”+cats+“”+titles+“”+subCats+“”；
}
document.getElementById（“myTable”）.innerHTML=table；
}
loadDoc（）；
表格，
th，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，
运输署{
填充物：5px；
}
谢谢你的答案Olayinka！在阅读了你的答案后，我尝试设置一个本地主机，正如你所说的那样，它成功了。但是，当我在web上时，是否可以加载一个本地文件？我猜由于安全原因，这可能是不可能的。如果可能的话，我正在考虑从扩展名进行解析。我们将我们需要下载一些xml文件，然后对其进行解析以找到一些信息，这样我们就可以最容易地从本地驱动器访问这些文件。@JoeBerg您可以查看文件：//
，但这只适用于在您的pc上运行该文件或在某人的pc上的相同位置运行该网页的情况，也可以查看OData更灵活，允许对xml数据进行更改，并且可以从任何地方查询。希望它有帮助：）谢谢！我会研究一下，看看是否可以解决它。：）我遇到了另一个问题，也许您可以快速查看一下，看看您是否能够理解如何解决它。我在访问“子类别”时遇到问题，除该方法外，其他所有方法都可以通过上面使用的方法访问。您知道问题是什么吗？它前面似乎有一个额外的空间。我将其作为注释放在JSFIDLE的html部分：@JoeBerg如果您的意思是不可访问，如未在DOM中显示，请参阅更新的答案，运行代码段并查看更新的文件。@Joe添加一个条件以查找丢失的节点。请参阅更新。
<!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 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>