Search code examples
jqueryxmlxmlhttprequestxhtml

XMLHTTP request not parsing XML file

Im trying to consume some xml and serve it in xhtml based on this example but i get:

Error:

XML Parsing Error: not well-formed
...f5r.xhtml
Line Number 16, Column 37:
          if (this.readyState == 4 && this.status == 200){
------------------------------------^

The f5r.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<folio name="f5r" wordCount="56" width="1067" height="1500">
  <word index="0" x="131" y="202" width="70" height="49">hello</word>
  <word index="1" x="212" y="198" width="62" height="65">world</word>
</folio>

The f5r.xhtml file:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<?xml-stylesheet href="../../vms.css"?>
<script src="../../public/javascripts/jquery-migrate-1.4.1.min.js"></script>
  <script>
      function loadXMLDoc() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200){
            myFunction(this);
          }
        };
        xmlhttp.open("GET", "f5r.xml", true);
        xmlhttp.send();
      }

      function myFunction(xml) {
        var x, i, xmlDoc, txt;
        xmlDoc = xml.responseXML;
        txt = "";
        x = xmlDoc.getElementsByTagName("folio");
        for (i = 0; i< x.length; i++) {
          txt += x[i].childNodes[0].nodeValue + "<br>";
        }
        document.getElementById("folio").innerHTML = txt;
      }
</script>

</head>
<body onload="loadXMLDoc()">
  <img class="foliophoto" id="f5r_lg"/>
<div class="folios">
<p class="folio">

  <!-- <xml src="f5r.xml"></xml> -->

</p>
</div>
</body>
</html>

The problem may be with JQuery not loading locally but im not sure nor am i sure why JQ isnt working locally but ive had that problem in the past before.

update: case sensitivity was not the problem. "folio" also doesnt work.

Solution

  • Within parsed character data, & is expected to begin an entity reference such as &amp;.

    The standard solution is to wrap your JavaScript in a CDATA section so that && isn't interpreted as markup, and use JavaScript comments so that the CDATA delimiters are ignored by JavaScript:

    <script>
//<![CDATA[
     JavaScript code here
//]]>
</script>