javascript - 为什么我的 xml 请求不能正常工作？无法读取 null 对象？

Question

我正在尝试将数据从 xml 文件加载到表元素中，由于某种原因，当我调用 xmldoc.getElementsByTagName 说它为 null 时，它会抛出错误 这是我的 xml 文档

<?xml version="1.0" encoding="UTF-8"?>
<table>
<row><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td><td>2</td><td>9</td><td>1</td><td>0</td></row>
<row><td>1</td><td>1</td><td>0</td><td>1</td><td>9</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
<row><td>9</td><td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
<row><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td><td>2</td><td>9</td><td>1</td><td>0</td></row>
<row><td>1</td><td>1</td><td>0</td><td>1</td><td>9</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
<row><td>9</td><td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
</table>

这是我的 Javascript 函数

function getMineField() {
    var request = new XMLHttpRequest();
    request.open("GET", "field.xml", false);
    request.send(null);

// THE FOLLOWING CHECK CAN BE COMMENTED OUT WHEN USED 
// WITH A LOCAL FILE (DEPENDING ON YOUR BROWSER).  SAFARI ON A
// MAC RETURNS A STATUS OF ZERO WHEN USING XMLHttpRequest WITH
// A LOCAL FILE.

var main = document.getElementById("main");
var xmldoc = request.responseXML;
// THE FOLLOWING CODE USES THE SAME XML STRUCTURE (AND A FEW OF THE
// SAME VARIABLE NAMES) AS Example 21-7 IN JavaScript: The Definitive Guide
// BY DAVID FLANAGAN, BUT THIS EXAMPLE IS A LOT SIMPLER.
var xmlrows = xmldoc.getElementsByTagName("row");
var row = xmlrows.length;
for (var r = 0; r < row; r++) {
   var xmlrow = xmlrows[r];
    var tr = document.createElement('tr')
    for (var c = 0; c < row; c++)
        {
           //html += "Name: " + xmlrow.getAttribute("name");
            var td = document.createElement("td")
           // NOTE THAT getElementsByTagName RETURNS A LIST 
            var tdata = xmlrow.getElementsByTagName("td")[c];
            console.log(tdata)
            td.innerHTML=tdata.firstChild.data;
            tr.appendChild(td);
        }
    main.appendChild = xmlrow;
}
}

Answer 1

XMLHttpRequest() 是一个异步调用。在您的代码中，您不会等待响应，而是尝试立即使用请求。在返回响应之前，请求将为空。

这就是你应该如何处理它:

function getMineField() {
    var request = new XMLHttpRequest();

    //here we define what to do with the response once returned:
    request .onreadystatechange = function() {
        if (request .readyState == 4) {
            //read the xml here:
            var xmldoc = request.responseXML;
            // THE FOLLOWING CODE USES THE SAME XML STRUCTURE (AND A FEW OF THE
            // SAME VARIABLE NAMES) AS Example 21-7 IN JavaScript: The Definitive Guide
            // BY DAVID FLANAGAN, BUT THIS EXAMPLE IS A LOT SIMPLER.
            var xmlrows = xmldoc.getElementsByTagName("row");
            var row = xmlrows.length;
            for (var r = 0; r < row; r++) {
               var xmlrow = xmlrows[r];
                var tr = document.createElement('tr')
                for (var c = 0; c < row; c++)
                    {
                       //html += "Name: " + xmlrow.getAttribute("name");
                        var td = document.createElement("td")
                       // NOTE THAT getElementsByTagName RETURNS A LIST 
                        var tdata = xmlrow.getElementsByTagName("td")[c];
                        console.log(tdata)
                        td.innerHTML=tdata.firstChild.data;
                        tr.appendChild(td);
                    }
                main.appendChild = xmlrow;
            }

        }
    }



    // THE FOLLOWING CHECK CAN BE COMMENTED OUT WHEN USED 
    // WITH A LOCAL FILE (DEPENDING ON YOUR BROWSER).  SAFARI ON A
    // MAC RETURNS A STATUS OF ZERO WHEN USING XMLHttpRequest WITH
    // A LOCAL FILE.

    var main = document.getElementById("main");
    //perform the request, once there is a result it will invoke the method above onreadystatechange
    request.open("GET", "field.xml", false);
    request.send(null);
}

这尚未经过测试，但它应该可以给您一个想法。更多信息参见答案here或文档 here