2014-01-08 32 views
-1

錯誤,但在本地沒有工作的服務器上運行時,我得到:AJAX對服務器

TypeError: Cannot read property 'documentElement' of null 

我使用AJAX來從一個PHP的XML文件,並把我的HTML DIV的響應。 Javascript文件用於創建AJAX對象並處理服務器響應。

當我在本地運行此代碼時,一切工作正常。 什麼問題?我只上傳相同的文件到服務器,所以它應該在那裏工作?

PHP代碼:

<?php 
header('Content-Type: text/xml'); 

echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; 

echo '<response>'; 

$food  = $_GET['food']; //GET/POST to send the data (code to send data inside js file) 
$foodArray = array(
    'tuna', 
    'bacon', 
    'beef', 
    'meat' 
); 

if (in_array($food, $foodArray)) 
    echo 'We do have ' . $food; 

elseif ($food == '') 
    echo "AJAX. Server response will be displayed here"; 
else 
    echo 'Sorry! We don\'t sell ' . $food; 
echo '</response>'; 
?> 

JavaScript代碼:

var xmlHttp = createXmlHttpRequestObject(); 

function createXmlHttpRequestObject() { 
    var xmlHttp; 

    if (window.XMLHttpRequest) { 

     xmlHttp = new XMLHttpRequest(); 

    } else { 
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    return xmlHttp; 
} 



function process() { 
    if (xmlHttp) { 
     try { 
      food = encodeURIComponent(document.getElementById("userInput").value); 

      xmlHttp.open("GET", "foodstore.php?food=" + food, true); 

      xmlHttp.onreadystatechange = handleServerResponse; 

      xmlHttp.send(null); 
     } catch (e) { 
      alert(e.toString()); 
     } 
    } else { 
     setTimeout('process()', 100); 
    } 
} 



function handleServerResponse() { 
    if (xmlHttp.readyState == 4) { 
     if (xmlHttp.status == 200) { 
      try { 
       xmlResponse = xmlHttp.responseXML; 
       xmlDocumentElement = xmlResponse.documentElement; // Root element of XML file. 
       message = xmlDocumentElement.firstChild.data; //Cox it is the only child in the xml document. Data - Output of XML content. So now, message contains the O/P of php. 
       document.getElementById("underInput").innerHTML = message; //Now that we got the echo statement from the server, we want to store it in our div.    
       //innerHTML - The html in between the div. The stuff that shows on the web page :) 
      } catch (e) { 
       alert(e.toString()); 
      } 
      setTimeout('process()', 100); 

     } else { 
      alert(xmlHttp.statusText); 
     } 
    } 

HTML:

<body onload="process();"> 
<div> 
Enter a food item you would like to search: e.g. bacon<br> 
<input type="text" id="userInput"/><br> 
<br> 
<div id="underInput"/></div> 

回答

0
  • XML文件的AJAX請求應使用mime/media類型的應用程序/ javascript,沒有「text/xml」之類的東西。

    header('Content-Type: application/xml');

  • 在AJAX請求的第一個元素都需要有一個XML命名空間...

    <div xmlns="http://www.w3.org/1999/xhtml"></div>

  • 你不發送XML聲明AJAX請求,整頁請求。

  • 下載Fiddler2的副本,最好是舊版本(2.2.9.1仍然具有刪除按鈕上的文本標籤,新版本並不總是更好),您可以在其中查看HTTP狀態代碼。

  • 觀看您的Apache訪問日誌以及查看請求的去向。

  • 始終alert() yurself來是怎麼回事...


此代碼是一個可重複使用AJAX腳本,傳遞參數「id_container_pos」選擇如何將XML是AJAX,裝上頁面...

if (window.XMLHttpRequest) {var xmlhttp = new XMLHttpRequest();} 
else if (window.ActiveXObject) {try {xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {try {xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');} catch (e) {}}} 
else {alert('Error: Your browser does not seem to support AJAX.');} 
xmlhttp.open('GET',url,true); 
xmlhttp.send(null); 

xmlhttp.onreadystatechange = function() 
{ 
if (xmlhttp.readyState=='4') 
{ 
    //alert(xmlhttp.responseText); 
    //If you have an element with a 'body' ID that is all lowercase, this is IE8 versus good browsers... 
    if (!document.getElementById('Body') && xmlhttp.responseXML) {var xmlDoc=xmlhttp.responseXML;} 
    else {var xmlDoc = xmlhttp.responseText;} 

    if (id_container_pos=='after') {id_container_obj.insertBefore(xmlDoc.getElementsByTagName('div')[0],id_container_obj.nextSibling);} 
    else if (id_container_pos=='before') 
    { 
    id_container_obj.parentNode.insertBefore(document.importNode(xmlDoc.getElementsByTagName('div')[0],true),id_container_obj); 
    } 
    else if (id_container_pos=='inside') {id_container_obj.appendChild(document.importNode(xmlDoc.getElementsByTagName('div')[0],true));} 
    else if (id_container_pos=='replace') {var r = id_container_obj.parentNode; r.removeChild(r.getElementsByTagName('div')[0]); r.appendChild(document.importNode(xmlDoc.getElementsByTagName('div')[0],true));} 
} 
} 

+0

OK!我從php文件中更改了標題行。 您的第二個要點;我應該在哪裏添加這個div? 第三點:你是說我應該刪除 echo'<?xml version =「1.0」encoding =「UTF-8」standalone =「yes」?>'; 從PHP文件? 因爲我做到了。而且它仍然會給出同樣的錯誤。 –

+0

第一個可能是*必須*有一個XML名稱空間'attribute =「value」'(xmlns =「http://www.w3.org/1999/xhtml」)。你需要理解用來引用'的通用術語'否則你不會猜到我已經清楚說明了什麼,並且你會更快地接受。正確:對於AJAX加載的內容,您不要使用XML聲明'<?xml version =「1.0」encoding =「UTF-8」standalone =「yes」?>',只是主頁本身。不要使用'documentElement'和**從不**使用innerHTML。 – John

+0

你的div讓我困惑。我只是想知道爲什麼它不在我自己的知識上在服務器上工作。即使我按照你所提到的做了一切,它仍然在本地工作,但不在服務器上。 –