爲什麼我的代碼給我一個TypeError：x.documentElement是未定義的？

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

但不幸的是只有我得到的是類型錯誤：

x.documentElement is undefined (: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對象。