在HTML表格中显示XML文件

Question

我想在我的html页面中显示我的.xml文件。所以我写了一个JavaScript程序从web服务器获取xml并创建一个表。但HTTPRequest响应始终为空，因为onreadystatechange方法不会被调用。

JavaScript程序

function LoadXML(dname) { 
var xhttp; 
if (window.XMLHttpRequest) { 
    xhttp = new XMLHttpRequest(); 
} else { 
    xhttp = new ActiveXObject('Microsoft.XMLDOM'); 
} 
xhttp.onreadystatechange = function() { 
    if (xhttp.readyState === 4 && xhttp.status === 200) { 
     return xhttp.responeXML; 
    } else { 
     return $("#errors").text("XML not found"); 
    } 
}; 
xhttp.open("GET", dname, true); 
xhttp.send(false); 
} 

function UpdateXML() { 
xmlDoc = LoadXML('xml/history.xml'); 
var table = "<tr><th>Auftragsnummer</th><th>Auftraglaufzeit</th><th>Soll-Teile</th><th>Gutteile</th><th>Ausschussteile</th><th>OEE</th></tr>"; 
if (xmlDoc === null) { 
    $("#errors").text("XML document is empty!"); 
} else { 
    var x = xmlDoc.getElementsByTagName("Auftrag"); 
    for (i = 0; i < x.length; i++) { 
     table += "<tr><td>" + 
      x[i].getElementsByTagName("Auftragsnummer")[0].childNodes[0].nodeValue + "</td><td>" + 
      x[i].getElementsByTagName("Aufnahmezeit")[0].childNodes[0].nodeValue + "</td><td>" + 
      x[i].getElementsByTagName("TeileSoll")[0].childNodes[0].nodeValue + "</td><td>" + 
      x[i].getElementsByTagName("Gutteil")[0].childNodes[0].nodeValue + "</td><td>" + 
      x[i].getElementsByTagName("Ausschussteile")[0].childNodes[0].nodeValue + "</td><td>" + 
      x[i].getElementsByTagName("OEE")[0].childNodes[0].nodeValue + "</td></tr>"; 
    } 
} 
document.getElementById("history").innerHTML = table; 
setTimeout(updateTime, 5000); 
} 
window.addEventListener("load", UpdateXML); 

Answer 1

你是混合异步和同步代码。

当您发出AJAX请求时，代码将继续执行，并且最终会调用onreadystatechange。要检索数据，您必须为您的LoadXML函数添加回调。

首先，您必须了解同步和异步功能，稍后阅读如何将其实现到AJAX。

同步/异步：What is the difference between synchronous and asynchronous programming (in node.js)（虽然它说的节点，是基本的JavaScript）

AJAX的例子：https://www.w3schools.com/js/js_ajax_examples.asp

警告：如果你去正确的AJAX的例子，只是复制和粘贴代码，而无需学习异步和同步之间的差异，你会在JavaScript中重复这个问题。