クリックした要素のIDをAJAXで渡すときのエラー

Question

クリックしたDIVのIDを特定の関数に渡そうとしていますが、奇妙な結果に陥りました。 IDは、エラー状態が発生すると（ajax-loader.gif）関数に成功し、onclicが開始されたDIV内に自身を設定します。

しかし、AJAXが完了していないレディ状態を返す理由はわかりません。 「clicked_id」をIDのハードコードされた名前に置き換えると、正しく動作します。ただし、エラーイベントが指定されたIDのinnerHTMLに設定されているため、ID名が関数に正しく設定されていることが証明されています。

私は困惑しています。何か案は？私はこれがnoob間違いだと確信していますが、私はそれを見つけられません。

私はスクリプトで新しいXMLHTTPRequestを開始しましたが、簡潔にするために残しました。そして、jQueryのクリックイベントのような簡単な方法があることはわかっていますが、私自身のために、なぜこれが壊れているのかを知りたいのです。

<div class='colour'><img src='media/recipe_save.jpg' id='showtime' onclick='javascript:getServerTime(this.id);'></div> 

function getServerTime(clicked_id) { 
    var thePage = 'ajax.recipesave.php'; 
    myRand = parseInt(Math.random()*999999999999999); 
    var theURL = thePage +"?rand="+myRand; 
    myReq.open("GET", theURL, true); 
    myReq.onreadystatechange = theHTTPResponse(clicked_id); 
    myReq.send(null); 
} 

function theHTTPResponse(clicked_id) { 
    alert(clicked_id); 
    if (myReq.readyState == 4) { 
    if(myReq.status == 200) { 
     var timeString = myReq.responseXML.getElementsByTagName("timestring")[0]; 
     document.getElementById(clicked_id).innerHTML = timeString.childNodes[0].nodeValue; 
    } 
    } else { 
    document.getElementById(clicked_id).innerHTML = '<img src="media/ajax-loader.gif"/>'; 
    } 
} 

Answer 1

myReq.onreadystatechangeに機能参照を割り当てる必要があります。あなたが機能を実行した結果、それを割り当てることはできません、それはあなたがこのラインでやっていることだ：

myReq.onreadystatechange = theHTTPResponse(clicked_id); 

これはすぐにtheHTTPResponse(clicked_id)を実行してmyReq.onreadystatechangeに（不定）の結果を割り当てています。したがって、onreadystatechangeのコールバックは終了しません。

変更し、これに上記の行：

myReq.onreadystatechange = function() {theHTTPResponse(clicked_id)}; 

この方法で、あなたはonreadystatechangeに、実際の機能を割り当てていると、状態はすぐに変更はなく、ときに、この関数が呼び出されます。