使用Javascript的XML显示未在html div上显示

Question

I'm trying to accomplish to have a simple raw data of xml show in an HTML div at the moment. While it outputs in my log that it has 6 elements, my for-loop function only runs once, and would not append even the first run.

Here's the code:

window.onload = function(){
document.getElementById('container').innerHTML += "Reading XML...";
 // Create a connection to the file.
  var Connect = new XMLHttpRequest();
  // Define which file to open and
  // send the request.
  Connect.open("GET", "UIFrame.xml", false);
  Connect.setRequestHeader("Content-Type", "text/xml");
  Connect.send(null);
  // Place the response in an XML document.
  var TheDocument = Connect.responseXML;
  // Place the root node in an element.
  var UI = TheDocument.childNodes[0];

  // Retrieve each customer in turn.
  document.getElementById('container').innerHTML += UI.children.length;

  for (var i = 0; i < UI.children.length; i++)
  {
      document.getElementById('container').innerHTML += "inside loop";
       var Component = UI.children[i];
       // Access each of the data values.
       var Value = Component.getElementsByTagName("value");
       var x = Component.getElementsByTagName("x");
       var y = Component.getElementsByTagName("y");
       var width = Component.getElementsByTagName("width");
       var height = Component.getElementsByTagName("height");

       // Write the data to the page.
       document.getElementById('container').innerHTML += Value[0].textContent.toString();
       document.getElementById('container').innerHTML += x[0].textContent.toString();
       document.getElementById('container').innerHTML += y[0].textContent.toString();
       document.getElementById('container').innerHTML += width[0].textContent.toString();
       document.getElementById('container').innerHTML += height[0].textContent.toString();
  }
};

and sample XML found in my WebContent (Same level as WEB-INF etc)

<ui>
  <component name="UI Frame" type="frame">
    <x>270</x>
    <y>11</y>
    <width>458</width>
    <height>343</height>
  </component>
  <component name="loginBtn" type="button">
    <value>Login</value>
    <x>180</x>
    <y>184</y>
    <width>90</width>
    <height>20</height>
   </component>
</ui>

Answer 1

I'd suggest to use a Helper function which handles the response of XMLHttpRequest request.

var newXHR = null;

function sendXHR(type, url, data, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(type, url, true); // Use async = true to avoid bad user experience for waiting a Sychronous request that might block the UI.
  newXHR.send(data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response); // Callback function to process the response.
    }
  };
}

In this answer I'm using a resource that returns a XML string.

https://gist.githubusercontent.com/dannyjhonston/951aa7651b26c6d0bf48031b76c6a0b6/raw/6125a878ef9bdff5e39be68a79dc1d3aec06bb85/UIFrame.xml

By using window.DOMParser() can parse the XML String into DOM Document.

Something like this:

 window.onload = function() { var newXHR = null; function sendXHR(type, url, data, callback) { newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP"); newXHR.open(type, url, true); newXHR.send(data); newXHR.onreadystatechange = function() { if (this.status === 200 && this.readyState === 4) { callback(this.response); } }; } sendXHR("GET", "https://gist.githubusercontent.com/dannyjhonston/951aa7651b26c6d0bf48031b76c6a0b6/raw/6125a878ef9bdff5e39be68a79dc1d3aec06bb85/UIFrame.xml", null, function(response) { if (window.DOMParser) { /* I'd suggest to declare your variables out of the for loop. Declare once the variables and in every iteration, update its values. */ var parser = new DOMParser(), xmlDoc = parser.parseFromString(response, "text/xml"), TheDocument = xmlDoc, UI = TheDocument.childNodes[0], i, len = UI.children.length, component, value, x, y, height, width, html = ""; for (i = 0; i < len; i++) { component = UI.children[i]; value = component.getElementsByTagName("value").length === 0 ? "" : component.getElementsByTagName("value")[0].childNodes[0].nodeValue; x = component.getElementsByTagName("x")[0].childNodes[0].nodeValue; y = component.getElementsByTagName("y")[0].childNodes[0].nodeValue; height = component.getElementsByTagName("height")[0].childNodes[0].nodeValue; width = component.getElementsByTagName("width")[0].childNodes[0].nodeValue; html += "Value: "; html += value; html += "<br />x: "; html += x; html += "<br />y: "; html += y; html += "<br />height: "; html += height; html += "<br />width: "; html += width; html += "<hr />"; } document.getElementById("container").innerHTML = html; } }); }; 

 <div id="container"></div> 

Hope this helps.