Question

在服务器上运行时遇到错误：

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>

Answer 1

对XML文件的AJAX请求应该使用 application / javascript mime / media类型，没有“text / xml”这样的东西。

header('Content-Type: application/xml');
AJAX请求中的第一个元素需要有一个XML命名空间......

<div xmlns="http://www.w3.org/1999/xhtml"></div>
您不会发送AJAX请求的XML声明，只是整页请求。
下载Fiddler2的副本，最好是旧版本（2.2.9.1仍然在删除按钮上有文本标签，更新并不总是更好），您可以在其中看到HTTP状态代码。
< / LI>
观察您的Apache访问日志以查看请求的去向。
始终alert()了解正在发生的事情......

此代码位于可重用的AJAX脚本中，传递参数'id_container_pos'以选择HOW 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));}
 }
}

AJAX在本地工作但不在服务器上工作

1 个答案: