5

全部，

我正在使用 Head First Ajax 书学习 Ajax。在第一章中，他们给出了一些我稍微简化的代码示例。我添加了一堆alert以了解发生了什么。这是代码：

HTML + Ajax ( index.php):

<!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>Rob's Rock 'n' Roll Memorabilia</title>
<link rel="stylesheet" href="css/default.css" />
<script>
  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;
  }
}
</script>  
</head>
<body>
  <div id="wrapper">
    <div id="thumbnailPane">  
      <img src="images/SISL_Avatar2.JPG"
           title="SISL" id="SISL" onclick="getNextImage()" />  
      <img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar" 
           title="itemGuitar" id="itemGuitar" onclick="getDetails(this)"/>
      <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
           title="itemShades" id="itemShades" onclick="getDetails(this)" />
      <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
           title="itemCowbell" id="itemCowbell" onclick="getDetails(this)" />
      <img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
           title="itemHat" id="itemHat" onclick="getDetails(this)" />
    </div>

    <div id="detailsPane">
      <img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" />
      <div id="description"></div>
    </div>

  </div>
</body>
</html>

<?php    
$details = array (
    'itemGuitar'    =>  "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>",
    'itemShades'    =>  "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>",
    'itemCowbell'   =>  "<p>Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.</p>",
    'itemHat'       =>  "<p>Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>"
);    
if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}
?>

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

<?php

$details = array (
    'itemGuitar'    =>  "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>",
    'itemShades'    =>  "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>",
    'itemCowbell'   =>  "<p>Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.</p>",
    'itemHat'       =>  "<p>Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>"
);
echo $details[$_REQUEST['ImageID']];
?>

问题：为什么函数displayDetails在就绪状态 4 运行两次？

当我运行上面的代码时，代码似乎运行了displayDetails()两次该函数。我首先收到displayDetails1我已输入该功能的警报信号。然后，我收到与不是 4 相关的警报readyState，然后又不是 4，然后是 4 ( Request.readyState is 4)。然后状态警报告诉我状态是 200。到目前为止，没有什么意外。

在那之后，我得到了一些奇怪的东西。 我收到displayDetails2警报，然后根据功能修改页面并收到displayDetails3警报。然后我希望退出该功能。相反，我再次得到displayDetails1, Request.readyState is 4（第二次！）、Request.status is 200、displayDetails2和displayDetails3警报，就好像整个函数已经第二次运行了一样。这是为什么？

PS：
1）在第二轮之后，我得到了getDetails6我期望的警报。
2) 页面功能正常 - 从用户的角度来看，如果禁用警报并没有什么异常。3）我在 WampServer 上本地开发，在 WinXP 机器上（我知道......）。
4）如果我添加：

function alert(msg) {
  console.log(msg);
}

在我的脚本中，日志只记录一个readyState is 4...

解析度

我已经完成了 3 次测试：
1 - 仅使用警报，我收到两个readyState is 4警报。
2 - 如果我记录警报，则日志仅显示一个readyState is 4警报。
3 - 如果我同时记录并显示警报弹出窗口（使用此功能），我会收到两个readyState is 4警报（并且日志显示）。

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

4

2 回答 2

7

javascriptalert阻塞了您的 UI 线程，可能足够长的时间让您的浏览器完成加载 AJAX 请求。由于您在警报之后不检查request.readyState直到，它可以在您检查之前由浏览器更新。

尝试修改您的事件处理程序：

function displayDetails() {
  var rs = request.readyState;
  alert("displayDetails1");
  if (rs == 4) {
    alert("Request.readyState is 4");
    //rest of code...

您只会看到一条“Request.readyState 为 4”的警报

于 2013-02-05T20:23:37.227 回答
5

该onreadystatechange事件不仅在请求完成后触发。为 XMLHttpRequest 定义了 5 种状态：

  • 0 未初始化 初始值。
  • 1 打开 open() 方法已成功调用。
  • 2 Sent UA 成功完成请求，但尚未收到数据。
  • 3 接收 在收到消息正文（如果有）之前立即接收。已收到所有 HTTP 标头。
  • 4 已加载

通常在开发 AJAX 应用程序时，您只会对状态 4 感兴趣 - 已加载，因为它表示请求已完成，但您可以观察到其他状态。

因此，您不必担心对事件处理程序的第二次调用。这是正常行为。它只是意味着请求在其工作期间改变了它的内部状态。

如果您对这些状态感兴趣，我建议您将所有状态记录到 javascript 控制台以查看发生了什么。在加载大数据时，我也会给你tipp测试。您很可能会看到多个 3 - 接收 - 状态。

更新，也许我理解你的问题是错误的（但不是你的代码；）..你在评论中告诉你看到两次就绪状态 4。我已经在家里测试过这个，100 的警报对我来说看起来很奇怪。

然后，我将以下函数添加到您的 javascript 部分：

function alert(msg) {
    console.log(msg);
}

这会将所有警报重定向到 javascript 调试控制台。我得到以下输出：

在此处输入图像描述

我只看到一次就绪状态 4。似乎你因为太多 alert() 而变得自私；）

Update2：正如我在评论中提到的，@thanks Jeff-Meadows 也指出了这一点：请注意，alert()除非您按下确定按钮，否则该函数将阻止 javascript 线程。由于异步 XHR 请求将由单独的浏览器线程处理，因此 XHR 将继续加载，而 javascript 会阻止警报消息。您会看到这可能/会产生不必要的副作用，并使 alert() 对调试的价值降低。

于 2013-02-05T19:09:03.267 回答