Geek asks and answers

Why is the Ajax function that I call in my script executed twice in a row when readyState is 4?

All,

I learn Ajax using the book Head First Ajax. In the first chapter, they give an example of code, which I simplified a bit. I added a bunch alertto understand what was going on. Here is the code:

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 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 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 hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash tophat.</p>"
);    
if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}
?>

Here is the URL that Ajax ( getDetails.php) calls :

<?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 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 hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash tophat.</p>"
);
echo $details[$_REQUEST['ImageID']];
?>

Question: Why is a function displayDetailsexecuted twice with readystate 4?

, , , displayDetails() . displayDetails1, . , readyState 4, 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);
}

script readyState is 4...

3 :
1 - , readyState is 4.
2 - , readyState is 4.
3 - ( ), readyState is 4 ( ).

, script .

+5
2

javascript alert , , , AJAX. request.readyState , , , .

:

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

: "Request.readyState is 4"

+6

onreadystatechange . XMLHttpRequest 5 :

  • 0 .
  • 1 open() .
  • 2 UA , .
  • 3 ( ). HTTP- .
  • 4

AJAX 4- , , , , .

, . . , .

, javascript, , . tipp . , .

, , ( ;).. , 4. , 100- .

javascript:

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

javascript. :

enter image description here

4. , - ();)

Update2: , @thanks Jeff-Meadows, : , alert() javascript, ok. XHR , XHR javascript . , / alert() .

+5

More articles:


All Articles