javascript - 在 HTML 表格中显示 XML 文件

Question

我想在表格中的 html 页面上显示我的 .xml 文件。所以我写了一个 javascript 程序来从网络服务器获取 xml 并创建一个表。但是 HTTPRequest Response 始终为 null，因为没有调用 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) (虽然说的是node，但基本上是JavaScript)

AJAX 示例:https://www.w3schools.com/js/js_ajax_examples.asp

警告:如果您直接转到 AJAX 示例并只是复制和粘贴代码而不了解异步和同步之间的区别，您将在 JavaScript 中重复这个问题。