Question

我刚开始写这本书 - “AJAX和PHP第二版”，我在第一个例子中失败了。我很确定代码就像书中所示，但是当我运行index.htm时在错误控制台（Mozzila 6.0）中我得到这个：“xmlResponse是NULL http://localhost/ajax/quickstart/quickstart.js.I不知道发生了什么但是真的不想在开始时放弃所以我会把所有3个文件都搞砸希望有人能指出我的问题所在。这是index.htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX with PHP, 2nd Edition: Quickstart</title>
<script type="text/javascript" src="quickstart.js"></script>
</head>
<body onload="process();">
Server wants to know your name:
<input type="text" id="myName" />
<div id="divMessage" ></div>
</body>
</html>

这是quickstart.js：

// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// stores the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer 6 or older
if(window.ActiveXObject)
{
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try {
xmlHttp = new XMLHttpRequest();
}
catch (e) {
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process(name)
{
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// retrieve the name typed by the user on the form
name = encodeURIComponent(
document.getElementById("myName").value);
// execute the quickstart.php page from the server
xmlHttp.open("GET", "quickstart.php?name=" + name, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send();
}
else
// if the connection is busy, try again after one second
setTimeout('process()', 1000);
}
// callback function executed when a message is received from the
//server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed
//successfully
if (xmlHttp.status == 200)
{
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML
//structure
xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the the document element
helloMessage = xmlDocumentElement.firstChild.data;
// display the data received from the server
document.getElementById("divMessage").innerHTML =
'<i>' + helloMessage
+ '</i>';
// restart sequence
setTimeout('process()', 1000);
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " +
xmlHttp.statusText);
        }
    }
}

最后是quickstart.php：

<?php
// we'll generate XML output
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
// create the <response> element
echo '<response>';
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array('YODA', 'AUDRA', 'BOGDAN', 'CRISTIAN');
if (in_array(strtoupper($name), $userNames))
echo 'Hello, master ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'Stranger, please tell me your name!';
else
echo htmlentities($name) . ', I don\'t know you!';
// close the <response> element
echo '</response>';
?>

先谢谢了！ Leron

Answer 1

一切看起来都是正确的。托管PHP脚本的位置在哪里？在本地安装的Apache或您可以访问的服务器上？在Firefox中，您可以安装令人难以置信的Firebug插件，转到脚本选项卡，并查看请求返回的确切内容。无论是什么，Fx都没有将其识别为XML（因此xmlResponse成员为NULL）。

Answer 2

我发现您的代码存在一些问题。提及其中一些

您正在调用body-onload上的process()。这意味着，当DOM准备就绪时，浏览器会调用process()函数。这个，IMO，不是你想要的。相反，有一个按钮，它使用onclick事件调用此过程函数。类似的东西：
```
<button onclick="process('YODA');return false;">Click Me!</button>
```
进程被定义为使用一个名为name的参数，您没有传递任何参数。所以，做一个像这样的修复：
```
<button onclick="myProcess();return false;">Click Me!</button>
```

是你的JS部分/文件

function myProcess(){
    process(encodeURIComponent(document.getElementById('myName').value));
}

在处理函数中没有document.getElementById(..)。它违背了传递参数'name'

我会要求您使用一个非常好的浏览器，如Mozilla Firefox或Google Chrome（因为您似乎在IE6中为您的代码添加了一个prefence，至少它就好了！）。 Chrome有一个很棒的检查窗口。一旦掌握了它，你几乎会爱上它。我做到了！ ; - ）

我建议你使用像jQuery（www.jquery.com）这样的库或其他东西，用于ajax。让您的生活更轻松！： - ）

修改

我建议执行以下步骤，因为您希望此代码能够正常工作。

首先打开网址[BASE-URL]/quickstate.php?name=YODA。如果一切都很好，你应该看到应该是对你的AJAX调用的响应的XML。如果没有，PHP文件（或服务器的一些设置）存在一些问题，而不是其他任何问题。我觉得这一步不会有问题。

接下来，加载页面后，在文本框中键入“YODA”，在浏览器的URL框中键入：javascript:process('')。这应该调用具有ajax调用的函数。你可以在萤火虫的数据传输部分保留一个标签（我不知道名字的确切名称，但它是Google Chrome中的“网络”部分）。您可以分析发送到PHP脚本的标头，以及从服务器发回给您的响应（包括HTTP错误代码）。我也觉得这不会有问题。

导致问题的原因是：加载了页面的DOM。一旦DOM准备就绪，就会调用AJAX。这意味着甚至在您在该文本框中键入任何内容之前就会发出AJAX请求。因此，发送到服务器的请求具有name参数的空值。这正是（IMO）事情不适合你的原因。但即便如此，这也不是您在那里看到null XML的原因。你能做一个console.log(xmlHttp)并告诉我们结果吗？

简单的AJAX / PHP问题，但有很长的解释

2 个答案: