HTMLのdivに表示されないJavascriptを使用したXML表示

Question

私は現在、HTML divにxml showの簡単な生データを持たせようとしています。私のログには6つの要素がありますが、私のfor-loop関数は一度だけ実行され、最初の実行さえも追加しません。ここで

はコードです：私のWebContentで見つかった

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

とサンプル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

私が扱うヘルパー機能を使用することをお勧めしたいです応答は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文字列を返すリソースを使用しています。 window.DOMParser()を使用することにより

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

は、DOM文書にXML文字列を解析することができます。

このような何か：

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>

は、この情報がお役に立てば幸いです。