JavaScript - XML weergeven, geen output lokaal wel online - Softwareontwikkeling

donderdag 11 januari 2018 11:01

Acties:

0 Henk 'm!

Topicstarter

Mijn vraag
Ik help momenteel een klasgenoot met een opdracht voor XML om dit te begrijpen hoe het werkt, echter loop ik nu op de basis al vast. (Zelf heb ik volledig php gebruikt voor de opdracht en JS is niet mijn sterkste kant)

Het gaat om het volgende waarop we vastlopen.
Ik heb lokaal 2 bestanden in een map staan:
index.html

code:

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

<script>
document.getElementById("test").innerHTML = document.readyState;
</script>


<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "test.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

en de XML = test.xml. Daadwerkelijke XML is langer maar dat is niet relevant voor dit topic.

code:

<?xml version='1.0' encoding='UTF-8'?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
</CATALOG>

Op het stukje:

code:

<p id="test"></p>

<script>
document.getElementById("test").innerHTML = document.readyState;
</script>

na is de pagina identiek aan:
https://www.w3schools.com...name=tryxml_display_table

Echter, wanneer ik de lokale html pagina opstart in chrome, IE of Firefox krijg ik geen response op de onclick van de button.
Wanneer ik het op de w3s editor doe werkt het direct.

Ik heb het aanvullende stukje toegevoegd omdat ik dacht dat de readyState anders was maar dit is in beide gevallen hetzelfde.

Waarom werkt dit lokaal niet en online wel? Mogelijk is het iets onwijs simpels maar ik staar hier nu al 2 uur naar..

donderdag 11 januari 2018 12:01

Hydra

Je kunt als je lokaal files opent geen AJAX requests doen. Je zult zoals @418O2 aangeeft een simpele webserver moeten draaien.

https://niels.nu

donderdag 11 januari 2018 11:10

Acties:

0 Henk 'm!

Stoelpoot

In Chrome zit een script debugger. Als je de devtools opent, kan je bij het Sources tabblad breakpoints zetten in je Javascript code om te kijken wat er mis gaat. In de Console kan je ook eventuele Javascript foutmeldingen zien.

donderdag 11 januari 2018 11:17

Acties: