I am trying to make a file upload progress bar using PHP’s PECL uploadprogress extension and AJAX. I found a little tutorial on how to do this using jQuery, and their methodology was to attach a listener to the submit event on the form containing the file to be uploaded, and this listener would fire periodic AJAX requests to a server-side script containing progress data and then update a progress bar. However, I cannot get any AJAX requests to work once the page has begun unloading.
I made a simple example to demonstrate this situation. Suppose I have an HTML file, a.html:
<!DOCTYPE html>
<html><head><title>Test</title></head><body>
<script type="text/javascript" src="code.js"></script>
<form action="b.php" onsubmit="doThis();"><input type="submit" value="Go to B"/></form>
</body></html>
and a JavaScript file, code.js:
function doThis(){
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if(req.readyState==4){
alert("Response Text: "+req.responseText+"\
\
Status: "+req.status+" ("+req.statusText+")");
}
}
req.open("GET", "foo.txt", true);
req.send(null);
}
and a PHP file, b.php:
<?php
sleep(10); // Wait 10 seconds before loading
?>
and a text file, foo.txt, containing the word “bar”, all in the same directory.
If I load up a.html and click the submit button, b.php begins loading. I then see an alert box indicating that there is no response text, no status, and no status text. Opera doesn’t show the alert box at all when the request is asynchronous. However, if I make the request synchronous by changing “true” to “false” in the “req.open” line, I see what I expect in the alert box, but then, of course, the page stops loading until I dismiss the alert box.
How do you run AJAX requests while the current page is unloading?