Ajax, XMLHttpRequest status unspecified error_问答_开发者

I am working on Ajax examples from a book and the example from the book does not work, I tried it in IE 8 and FireFox. asyncRequest.status returns "Unspecified error". I am just poking around in Ajax, what is the problem here? Thank you.

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
  .box { border: 1px solid black;
         padding: 10px }
</style>
<title>Switch Content Asynchronously</title>
<script type = "text/javascript" language = "JavaScript">
  var asyncRequest; // variable to hold XMLHttpRequest object

  // set up and send the asynchronous request.
  function getContent( url )
  {
     // attempt to create the XMLHttpRequest and make the request
     try
     {
        asyncRequest = new XMLHttpRequest(); // create request object

        // register event handler
        asyncRequest.onreadystatechange = stateChange; 
        asyncRequest.open( 'GET', url, true ); // prepare the request
        asyncRequest.send( null ); // send the request
     } // end try
     catch ( exception )
     {
        alert( 'Request failed.' );
     } // end catch
  } // end function getContent

  // displays the response data on the page
  function stateChange()
  {
     if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 )
     {
        document.getElementById( 'contentArea' ).innerHTML = 
           asyncRequest.responseText; // places text in contentArea
     } // end if
  } // end function stateChange

  // clear the content of the box
  function clearContent()
  {
     document.getElementById( 'contentArea' ).innerHTML = '';
  } // end function clearContent
</script>
</head>
<body>
   <h1>Mouse over a book for more information.</h1>
   <img src = 
      "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/cpphtp6.jpg" 
      onmouseover = 'getContent( "cpphtp6.html" )'
      onmouseout = 'clearContent()'/>
   <img src = 
      "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/iw3htp4.jpg" 
      onmouseover = 'getContent( "iw3htp4.html" )'
      onmouseout = 'clearContent()'/>
   <img src = 
      "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/jhtp7.jpg" 
      onmouseover = 'getContent( "jhtp7.html" )'
      onmouseout = 'clearContent()'/>
   <img src = 
      "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/vbhtp3.jpg" 
      onmouseover = 'getContent( "vbhtp3.html" )'
      onmouseout = 'clearContent()'/>
   <img src = 
      "http开发者_如何学C://test.deitel.com/examples/iw3htp4/ajax/thumbs/vcsharphtp2.jpg" 
      onmouseover = 'getContent( "vcsharphtp2.html" )'
      onmouseout = 'clearContent()'/>
   <img src = 
      "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/chtp5.jpg" 
      onmouseover = 'getContent( "chtp5.html" )'
      onmouseout = 'clearContent()'/>
   <div class = "box" id = "contentArea">&nbsp;</div>
</body>
</html>

UPDATE: I did not mention in the original post that I was running this example on my local machine. For security reasons (I believe, please correct me if I am wrong), Ajax does not work on the local box unless it is somehow referenced via a domain. I uploaded the script to the server and it worked just fine.

The request status doesn't exist in IE until the readyState=4 (complete) so your check should be two checks . . . try it like this . . .

 if (req.readyState == 4){
    // req is complete (200 for web servers, 0 for local files in IE)
    if ((req.status == 200)||(req.status == 0)){
       // good
    } else{ 
       // error
    } 
  }

also, Firefox never return a readyState of 4 for file// protocol but ie6 errors trying to access status if the readyState is not 4 . . . . still working out a few kinks in one of my pages that needs to work on a websever and with local files (file protocol) in ie6, ie 8, and firefox

Looks like your server either doesn't like the request somehow or something is up with your permissions on those html files. Ways to debug:

asyncRequest.send may not be able to take a null value. I'd try passing an empty string: ""

Make sure that you can hit those html files in the browser without using ajax. If you can't then you'll have to figure out what's happening with those file permissions.

In firefox, install Firebug and use that to debug your code with breakpoints so you can see exactly where it's happening at.

FYI, your code is incompatible with ie6. Need to check for ActiveXObject, though if you don't care about ie6 you're set.