2010-12-17 17 views
4

私は本からのAjaxの例を扱っていますが、その本の例はうまくいかず、IE 8とFireFoxで試しました。 asyncRequest.statusは "不特定のエラー"を返します。私はちょうどAjaxで動揺しています、ここで何が問題なのですか?ありがとうございました。Ajax、XMLHttpRequestステータス未定義エラー

<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://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:私は私のローカルマシン上でこの例を実行していたオリジナルのポストには言及しませんでした。セキュリティ上の理由から(私が間違っていると私を修正してください)、Ajaxはドメイン経由で何らかの方法で参照されていない限り、ローカルボックスでは動作しません。スクリプトをサーバーにアップロードしたところ、うまくいきました。

答えて

2

あなたのサーバのように見えますが、何とかリクエストが好きでも、何かがそれらのhtmlファイルに対するあなたの許可を持っているようです。デバッグする方法:

asyncRequest.sendはnull値を取ることができません。空の文字列を渡してみます: ""

ajaxを使用せずにブラウザのhtmlファイルにアクセスできることを確認してください。あなたができない場合は、これらのファイルのアクセス許可で何が起こっているのか把握する必要があります。

firefoxでは、Firebugをインストールし、ブレークポイントでコードをデバッグして、どこで発生しているのか正確に確認できるようにします。

参考までに、あなたのコードはie6と互換性がありません。 ActiveXObjectを確認する必要がありますが、ie6を気にしなければ設定されています。

4

readyState = 4(完了)まで要求ステータスがIEに存在しないため、チェックは2つのチェックである必要があります。 。 。それを試してみてください。 。 。

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 
    } 
    } 

も、Firefoxはファイル//プロトコルが、readyStateのが4でない場合、ステータスにアクセスしようとIE6のエラーのために4のreadyStateのを返すことはありません。 。 。 。ウェブセーバーとie6、つまり8のローカルファイル(ファイルプロトコル)で動作する必要のある私のページのいくつかの問題を解決しています。

関連する問題