所有,

我正在使用Head First Ajax书来学习Ajax.在第一章中,他们给出了一些我简化了一些代码示例.我添加了一堆警报,以了解发生了什么.这是代码：

HTML Ajax(index.php)：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Rob's Rock 'n' Roll Memorabilia

function createRequest() {

try {

request = new XMLHttpRequest();

} catch (tryMS) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (otherMS) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (failed) {

request = null;

}

}

}

return request;

}

function getDetails(img){

var title = img.title;

alert("getDetails1");

request = createRequest();

alert("getDetails2");

if (request == null) {

alert("Unable to create request");

return;

}

var url= "getDetails.php?ImageID=" + escape(title);

alert("getDetails3");

request.open("GET", url, true);

alert("getDetails4");

request.onreadystatechange = displayDetails;

alert("getDetails5");

request.send(null);

alert("getDetails6");

}

function displayDetails() {

alert("displayDetails1");

if (request.readyState == 4) {

alert("Request.readyState is 4");

if (request.status == 200) {

alert("Request.status is 200");

detailDiv = document.getElementById("description");

alert("displayDetails2");

detailDiv.innerHTML = request.responseText;

alert("displayDetails3");

}else{

alert("Request.status not 200");

return;

}

}else{

alert("Request.readystate not 4");

return;

}

}

$details = array (

'itemGuitar' => "

Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.

",

'itemShades' => "

Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.

",

'itemCowbell' => "

Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.

",

'itemHat' => "

Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.

"

);

if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}

?>

这是Ajax(getDetails.php)调用的URL：

$details = array (

'itemGuitar' => "

Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.

",

'itemShades' => "

Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.

",

'itemCowbell' => "

Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.

",

'itemHat' => "

Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.

"

);

echo $details[$_REQUEST['ImageID']];

?>

问题：为什么函数displayDetails在readystate 4运行两次？

当我运行上面的代码时,代码似乎通过displayDetails()函数运行两次.我首先得到displayDetails1警报信号,我已进入该功能.然后我得到与readyState相关的警报不是4,然后再不是4,然后是4(Request.readyState是4).然后状态警报告诉我状态是200.到目前为止,没有任何意外.

在那之后我得到一些奇怪的东西.我得到displayDetails2警报,然后根据函数修改页面,我得到displayDetails3警报.然后我期望退出该功能.相反,我再次获得displayDetails1,Request.readyState是4(第二次！),Request.status是200,displayDetails2和displayDetails3警报,就像整个函数第二次运行一样.这是为什么？

PS：

1)在第二轮之后,我得到了我期望的getDetails6警报.

2)页面按原样运行 – 从用户的角度来看,如果禁用警报,则没有任何异常.

3)我在WampServer上本地开发WinXP机器(我知道……).

4)如果我添加：

function alert(msg) {

console.log(msg);

}

在我的脚本中,日志只注册一个readyState是4 …

解析度

我做了3次测试：

1 – 只有警报,我得到两个readyState是4个警报.

2 – 如果我记录警报,日志只显示一个readyState是4警报.

3 – 如果我同时记录并显示警报弹出窗口(使用this function),我会得到两个readyState是4个警报(日志显示).

我对此的看法是,警报本身会导致脚本执行延迟并导致函数有效运行两次.