所有,
我正在使用Head First Ajax书来学习Ajax.在第一章中,他们给出了一些我简化了一些代码示例.我添加了一堆警报,以了解发生了什么.这是代码：
HTML Ajax(index.php)：
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Rob's Rock 'n' Roll Memorabiliafunction 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;
}
}
title="SISL" id="SISL" οnclick="getNextImage()" />
title="itemGuitar" id="itemGuitar" οnclick="getDetails(this)"/>
title="itemShades" id="itemShades" οnclick="getDetails(this)" />
title="itemCowbell" id="itemCowbell" οnclick="getDetails(this)" />
title="itemHat" id="itemHat" οnclick="getDetails(this)" />
$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个警报(日志显示).
我对此的看法是,警报本身会导致脚本执行延迟并导致函数有效运行两次.
