私の背景は、C++や.NETプログラミングなどの従来のコンパイル済みオブジェクト指向言語で書かれており、新しいプロジェクト用のJavaScriptに慣れています。私はAJAXに手を貸していて、オブジェクトがブラウザによってどのように管理されているのか混乱していました。Javascriptでxmlhttprequestオブジェクトを作成、マージ、破棄する方法
- ボタンテキストを持つ1更新TextArea1： -
[編集]＃2]アクティブコンテンツスクリプトの変更
私は
<textarea>がXMLHttpRequestオブジェクトを使用して、各アップデート三つのボタンとの練習ページを持っていますコンテンツfrom slowtime.php - ボタン2は、テキストコンテンツをslowtime.phpから更新します。テキストの内容と
- ボタン3つの更新TextArea3 fasttime.php
slowtime.phpとfasttime.phpからが、2つのタイムスタンプで、テキスト/ HTMLページを返す簡単なスクリプトです：1しばらくしてからページが読み込まれます。
各ボタンは、一度に1つずつクリックすると正しく動作します。最初の要求が完了する前にボタン2をクリックしてからボタン3をクリックすると、アップデートは引き続き正常に機能します。
最初のリクエストが完了する前にボタン1をクリックしてからボタン2をクリックすると、TextArea1とTextArea2が正しい値を受け取ります。ただし、onreadystatechangeイベントコールは同時に発生します。つまり、最初に応答し、2番目のイベントが到着したときにのみ処理されます。
サンプルコード
サイト
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url,target)
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(target).value=xmlhttp.responseText;
}
}
xmlhttp.open("POST",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="button" value="Button 1" onClick="loadXMLDoc('slowtime.php','TextArea1')"/>
<input type="button" value="Button 2" onClick="loadXMLDoc('slowtime.php','TextArea2')"/>
<input type="button" value="Button 3" onClick="loadXMLDoc('fasttime.php','TextArea3')"/>
<div><textarea id="TextArea1"></textarea></div>
<div><textarea id="TextArea2"></textarea></div>
<div><textarea id="TextArea3"></textarea></div>
</form>
</body>
</html>
PHPコード（slowtime.php）
<?php
echo date('h:i:s') . "\n";
sleep(5);
echo date('h:i:s') . "\n";
?>
質問[改訂]
ブラウザはどのようにXMLHttpRequestオブジェクトを管理していますか？ボタン2と3を押すと、押すたびに新しいオブジェクトがインスタンス化され、それぞれに独立したイベントハンドラがあります。オブジェクトが初期関数呼び出しを過ぎても（それらのイベントハンドラが生き残っているので）、メモリから消去されたとき/破壊されたとき？
XMLHttpRequestsが別々のオブジェクトである場合、同じURLに2番目のリクエストを送信すると、最初のリクエストの応答タイミングにどのように影響しますか？これはサーバー側の問題でしょうか？
あなたの 'xmlhttp.onreadystatechange'関数で' xmlhttp.responseText'の代わりに 'this.responseText'を使うべきでしょうか？ –
@ JoshuaD.Boydこれは、 'xmlhttp'変数が' loadXMLDoc'の内部のローカルスコープにあるので、何もしてはいけません。 – Tyilo
'onreadystatechange'関数で' xmlhttp'へのすべての参照を 'onreadystatechange'関数に変更すると、同じ動作をします。 – nicholas