Question

我的背景是使用传统的编译面向对象语言，例如C ++和.NET编程，现在我正在尝试使用一些新项目的JavaScript。我正在讨论AJAX，并且对浏览器如何管理对象感到困惑。

[编辑＃2] - 更改活动内容脚本

我有一个带有三个按钮的练习页面，每个按钮使用<textarea>个对象更新XMLHttpRequest：

按钮1使用 slowtime.php
按钮2使用 slowtime.php
按钮3使用 fasttime.php

其中 slowtime.php 和 fasttime.php 是简单的脚本，它返回带有两个时间戳的文本/ HTML页面：一个页面加载时，一个一段时间后过去。

每次单击一个按钮时，每个按钮都能正常工作。如果在第一个请求完成之前单击按钮2然后单击按钮3，则更新仍然按预期工作。

如果在第一个请求完成之前单击按钮1然后单击按钮2，TextArea1和TextArea2将收到正确的值;但是，onreadystatechange事件调用同时发生，即第一个响应延迟，仅在第二个响应到达时处理。

示例代码

网站

<!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发送第二个请求会如何影响第一个请求的响应时间？这可能是服务器端问题吗？

Answer 1

除非在对象上显式调用delete，否则永远不会删除

XMLHttpRequest的上下文。在这种情况下：xmlhttp。如果你希望你的应用程序运行精简和清洁，你真的应该以某种方式跟踪var并清理它。 Javascript最初是为网页设计的，因此除非你自己预防，否则它往往会让事情变得疯狂。

否则，一旦对象不再可被其他任何函数使用或者有剩余的回调，浏览器的垃圾收集器就会消除该对象。

至于你同时发生的事件的问题，我不能自己重现这个问题，这让我相信你的php配置有问题。您的服务器是否可能不允许一次运行多个脚本？

以下是我服务器上的示例，稍作修改： http://www.seijinohki.net/test.php

Answer 2

这是一个浏览器问题。

Chrome 23＆amp; 26就是这样的。
Opera 12不
IE 9不
Firefox 17不

如果您将网址设为唯一网址，例如slowtime.php?1和slowtime.php?2，那么Chrome就不会再这样了。

btw-在我的测试版中，使用相同的值更新两个textareas - 来自第一个请求的值。它们都在第一个请求完成时更新，而不是在第二个请求完成时更新。这肯定是一个错误，因为它只是错误的。我通过网络服务器日志验证了第二个请求永远不会被发送。

如何在Javascript中创建，合并和销毁xmlhttprequest对象

2 个答案: