私のバックグラウンドは、C ++や.NETプログラミングなどの従来のコンパイル済みオブジェクト指向言語であり、現在、新しいプロジェクトのためにJavaScriptを少し使っています。私はAJAXに手を出していて、オブジェクトがブラウザーによってどのように管理されているかという混乱した側面に出くわしました。
[編集＃2]-アクティブコンテンツスクリプトの変更
<textarea>使用中XMLHttpRequestのオブジェクトをそれぞれ更新する3つのボタンがある練習ページがあります。
- ボタン1は、slowtime.phpからのテキストコンテンツでTextArea1を更新します
- ボタン2は、slowtime.phpからのテキストコンテンツでTextArea2を更新します
- ボタン3は、fasttime.phpからのテキストコンテンツでTextArea3を更新します
ここで、 slowtime.phpとfasttime.phpは、2つのタイムスタンプを持つテキスト/HTMLページを返す単純なスクリプトです。1つはページの読み込み時、もう1つは一定時間経過後です。
一度に1つずつクリックすると、各ボタンが正しく機能します。最初のリクエストが完了する前にボタン2をクリックしてからボタン3をクリックしても、更新は期待どおりに機能します。
最初のリクエストが完了する前にボタン1をクリックしてからボタン2をクリックすると、TextArea1とTextArea2は正しい値を受け取ります。ただし、onreadystatechangeイベントコールは同時に発生します。つまり、最初の応答が遅れ、2番目の応答が到着したときにのみ処理されます。
サンプルコード
Webサイト
<!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番目のリクエストを送信すると、最初のリクエストの応答タイミングにどのように影響しますか？これはサーバー側の問題でしょうか？