为什么我的代码给了我一个 TypeError: x.documentElement is undefined？

Question

我正在尝试从此 php 获取 xml：

 <?php
    // ...

    $row = mysqli_fetch_array($result);

    $xml = new DOMDocument("1.0", "UTF-8");

    $book = $xml->createElement("book");
    $book = $xml->appendChild($book);

    $bookId = $xml->createElement("id",$row['id']);
    $bookId = $book->appendChild($id);

    $bookAuthor = $xml->createElement("author",$row['author']);
    $bookAuthor = $book->appendChild($bookAuthor);

    $bookTitle = $xml->createElement("title", $row['title']);
    $bookTitle = $book->appendChild($bookTitle);

    $bookGenre = $xml->createElement("genre",$row['genre']);
    $bookGenre = $book->appendChild($bookGenre);

    $bookDescription = $xml->createElement("description",$row['description']);
    $bookDescription = $book->appendChild($bookDescription);

    echo($xml->asXML());

    mysql_close($con);
    ?>

到这个js函数（使用AJAX）：

function ByTitle(title) {

    document.getElementById("results").innerHTML = "";
    var xmlDoc;
    var Output = "";

    if (title != "") {

        if (window.XMLHttpRequest) {

            xmlhttp = new XMLHttpRequest();
        }

        xmlhttp.open("GET", "getBooksByTitle.php?title=" + title, true);
        xmlhttp.send(null);

        xmlhttp.onreadystatechange = function () {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                xmlDoc = xmlhttp.responseXML;
                var x = xmlDoc.getElementsByTagName('book');
                alert(x.textContent);

                Output = "<table><br><p><b>Results:</b></p><table><tr><th>id</th><th>author</th><th>title</th><th>genre</th><th>price</th><th>description</th></tr><tr>";

                Output += "<td>" + x.documentElement.getElementsByTagName('id')[0].childNodes[0].nodeValue + "</td>";
                Output += "<td>" + x.documentElement.getElementsByTagName('author')[0].childNodes[0].nodeValue + "</td>";
                Output += "<td>" + x.documentElement.getElementsByTagName('title')[0].childNodes[0].nodeValue + "</td>";
                Output += "<td>" + x.documentElement.getElementsByTagName('genre')[0].childNodes[0].nodeValue + "</td>";
                Output += "<td>" + x.documentElement.getElementsByTagName('price')[0].childNodes[0].nodeValue + "</td>";
                Output += "<td>" + x.documentElement.getElementsByTagName('description')[0].childNodes[0].nodeValue + "</td></tr></table>";

                document.getElementById("results").innerHTML = Output;
            }
}

但不幸的是，我唯一得到的是 TypeError：

x.documentElement 未定义 (:Mozilla)。

我尝试了很多不同的“解决方案”，但都没有任何区别......

Answer 1

您无需致电x.documentElement，因为您已经拥有xmlDoc 所以你应该使用这样的东西：

Output += "<td>" + xmlDoc.getElementsByTagName('id')[0].childNodes[0].nodeValue + "</td>";
Output += "<td>" + xmlDoc.getElementsByTagName('author')[0].childNodes[0].nodeValue + "</td>";
Output += "<td>" + xmlDoc.getElementsByTagName('title')[0].childNodes[0].nodeValue + "</td>";
Output += "<td>" + xmlDoc.getElementsByTagName('genre')[0].childNodes[0].nodeValue + "</td>";
Output += "<td>" + xmlDoc.getElementsByTagName('price')[0].childNodes[0].nodeValue + "</td>";
Output += "<td>" + xmlDoc.getElementsByTagName('description')[0].childNodes[0].nodeValue + "</td></tr></table>";

另外：使用 JSON 作为 ajax 请求的服务器响应更容易，因为您只需使用 JSON.parse(data) 即可将您的响应用作纯 JS 对象。