Чтение локальных файлов XML для анализа - PullRequest
Новая
       22

Чтение локальных файлов XML для анализа

0 голосов
/ 10 января 2019

Я пытаюсь создать анализатор 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>

Ожидаемый результат:

enter image description here

1 Ответ

0 голосов
/ 10 января 2019

Ошибка означает, что вы пытаетесь загрузить файл из JSFiddle, но он не существует в JSFiddle и не имеет доступа к вашим локальным файлам, поскольку origin - это не то же самое look up CORS .

Следовательно, ваш код должен нормально работать на вашем компьютере и выдавать желаемый результат , если файл завершается по этому пути.

ИЛИ

Загружен как внешний публичный файл (я использую файл из github здесь) :

Выполнить код Snippet

OR

См. Рабочий Планкр 

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>
...