9

我的背景是传统的编译型面向对象语言，例如 C++ 和 .NET 编程，现在我正在为一个新项目涉足一些 JavaScript。我正在涉足 AJAX，并遇到了一个令人困惑的方面，即浏览器如何管理对象。

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

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

  1. 按钮 1 使用来自slowtime.php的文本内容更新 TextArea1
  2. 按钮 2 使用来自slowtime.php的文本内容更新 TextArea2
  3. 按钮 3 使用来自fasttime.php的文本内容更新 TextArea3

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

4

2 回答 2

2

除非在对象上显式调用 delete，否则永远不会删除 XMLHttpRequest 的上下文。在这种情况下：xmlhttp。如果您希望您的应用程序运行精简和干净，您真的应该以某种方式跟踪该 var 并清理它。Javascript 最初是为网页设计的，因此它往往会让事情变得疯狂，除非你自己阻止它。

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

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

这是您在我的服务器上的示例，有一些细微的变化： http ://www.seijohki.net/test.php

于 2012-12-24T19:37:59.853 回答
1

这是一个浏览器问题。

  • Chrome 23&26 会以这种方式运行。
  • Opera 12 没有
  • IE 9 没有
  • Firefox 17 没有

如果您使 url 独一无二，例如slowtime.php?1然后slowtime.php?2chrome 不再以这种方式运行。

顺便说一句-在我的测试 chrome 中使用相同的值更新两个文本区域 - 第一个请求中的值。并且它们都在第一个请求完成时更新，而不是在第二个请求完成时更新。这肯定是一个错误，因为它完全是错误的。我通过网络服务器日志验证了第二个请求永远不会被发送。

于 2012-12-24T19:53:48.537 回答