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

Question

我现在正在尝试在 HTML div 中显示简单的 xml 原始数据。虽然它在我的日志中输出它有 6 个元素，但我的 for 循环函数仅运行一次，甚至不会追加第一次运行。

代码如下:

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();
  }
};

以及在我的 WebContent 中找到的示例 XML(与 WEB-INF 等级别相同)

<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

我建议使用一个 Helper 函数来处理 XMLHttpRequest 请求的响应。

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

在此答案中，我使用返回 XML 字符串的资源。

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

通过使用window.DOMParser()可以将XML字符串解析为DOM文档。

类似这样的事情:

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>

希望这有帮助。