atom feed8 messages in com.googlegroups.jquery-enRe: AJAX download progress
FromSent OnAttachments
GordonJul 18, 2007 2:32 am 
GordonJul 18, 2007 4:04 am 
GordonJul 18, 2007 6:59 am 
GordonJul 18, 2007 7:30 am 
Jonathan SharpJul 18, 2007 9:17 am 
GordonJul 18, 2007 2:58 pm 
GordonJul 18, 2007 11:20 pm 
GordonJul 19, 2007 1:49 am 
Subject:Re: AJAX download progress
From:Gordon (
Date:Jul 19, 2007 1:49:43 am

It would seem that what I want to do is simply not possible in IE, because readyState 3 (interactive mode) is not fully interactive in Explorer's implementation of XHR. The other browsers will expose partial data but IE won't. In fact it throws an exception if you do attempt to access responseText while in interactive mode.

It would seem that the only solution is to test for browser.msie and only run the download progress code if the browser is anything other than MSIE. If it is then simply provide a basic loading message instead.

Finally got my net access on my dev machine back. :) Here's my code.

var myTrigger; var progressElem = $('#progressCounter'); $.ajax ({ type : 'GET', dataType : 'xml', url : 'somexmlscript.php' , beforeSend : function (thisXHR) { myTrigger = setInterval (function () { if (thisXHR.readyState > 2) { var totalBytes = thisXHR.getResponseHeader
('Content-length'); var dlBytes =
thisXHR.responseText.length; (totalBytes > 0)? progressElem.html (Math.round ((dlBytes
/ totalBytes) * 100) + "%"): progressElem.html (Math.round (dlBytes /
1024) + "K"); } }, 200); }, complete : function () { clearInterval (myTrigger); }, success : function (response) { // Process XML }


It produces the desired results in Firefox 1.5, Safari3/Win and Opera 9. But Internet Explorer produces no result at all. It doesn't even throw an error. While it's not strictly necessary for there to be a download progress report I'd personally like to see it used far more often in AJAX apps than it actually is, and I really want to make this code 1005 cross-browser.

On Jul 18, 2:59 pm, Gordon <> wrote:

Okay, I've got some code now that works well in all the major browsers except for IE. I can't post the code just now but I'll put it up as soon as I get proper net access back on the other computer. Oddly it doesn't throw any errors in IE, it simply doesn't produce any results.

I have been thinking about how to do this all morning. At first I thought it wouldn't be possible because the XHR object doesn't seem to have a property for the amount of data downloaded. But I have come up with a possible work around. I have jotted some pseudocode down and am researching how well this approach might work, but unfortunately something's gone wrong with the firewall at work and my ability to browse and find practical solutions is badly compromised just now. Anyway, here's my pseudocode:

On (XHR enters stage 3) { Create an interval timer; } On (XHR enters stage 4) { Destroy timer; } On (Timer event) { If (fetching XML) Get ResponseXML length; else Get ResponseText length; If (Content-length header set) return (percent downloaded); else return (bytes downloaded); }

I am trying to figure out a way of displaying how far along an AJAX download is. Assuming I know the size of the file being downloaded (this will require the server to send a content-length header) then if I can check the number of bytes downloaded thus far I should be able to work out the download progress.

So what I need to know, how can you get the value of the content- length header if it is set, and how can you check the number of bytes sent periodically? I can then display a percentage for the case where both are known, or simply a count of downloaded bytes when I don't know the content length.