Menu
My background is in traditional compiled object-oriented languages such as C++ and .NET programming, and I am now dabbling into a bit of JavaScript for a new project. I was dabbling with AJAX and came upon a confusing aspect of how objects are managed by the browser.
[Edit #2] - Change in active content scripts
I have a practice page with three buttons which each update a <textarea> using XMLHttpRequest objects:
Where slowtime.php and fasttime.php are simple scripts which return a text/HTML page with two timestamps: one when the page loads, one after some time has elapsed.
Each of the buttons works correctly when clicked one at a time. If I click Button 2 and then Button 3 before the first request is complete, the updates still work as expected.
If I click Button 1 and then Button 2 before the first request is complete, TextArea1 and TextArea2 receive the correct values; however, the onreadystatechange event calls occur at the same time, i.e., the first response it late and is only processed when the second one arrives.
Sample Code
Website
<!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 Code (slowtime.php)
<?php
echo date('h:i:s') . "\n";
sleep(5);
echo date('h:i:s') . "\n";
?>
Questions [Revised]
How does the browser manage the XMLHttpRequest objects? Pressing buttons 2 and 3 indicate that each press instantiates a new object, and each of these have independent event handlers. If the objects live past the initial function call (since their event handlers survive) when are they cleared from memory / destructed?
If the XMLHttpRequests are separate objects, how does sending a second request to the same URL affect the response timing of the first? Might this be a server-side issue?
965
context to XMLHttpRequest is never deleted unless delete is explicitly called on the object. In this case: xmlhttp. You really should be tracking that var somehow and cleaning it up if you want your application to run lean and clean. Javascript was originally designed for web pages, thus it tends to let things run wild unless you prevent it yourself.
Otherwise, it is possible that once the object is no longer usable by any other functions or has any remaining call backs, the garbage collector of the browser will eliminate the object.
As for your issue with the events happening simultaneously, I can not reproduce the issue myself, which does leave me to believe you have an issue with your php configuration. Is it possible your server is not allowing multiple scripts to run at once?
Here is your example on my server, with a couple of slight changes: http://www.seijinohki.net/test.php
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
