Ajax loading progress

Question

Hey guys, i need to track progress of an async ajax request for some file downloads. Is this possible and in what browsers?

Answer 1

This is how I do it most of the time

var req = new XMLHttpRequest(); 

req.addEventListener("progress", onUpdateProgress, false); 
req.addEventListener("load", onTransferComplete, false); 
req.addEventListener("error", onTransferFailed, false); 
req.addEventListener("abort", onTransferAborted, false); 

req.open("GET", ..., true); 

... 

req.send() 

function onUpdateProgress(e) { 
  if (e.lengthComputable) { 
    var percent_complete = e.loaded/e.total; 
    document.getElementById("progressMessage").value = Math.round(percentComplete*100) +"% [ " + Math.round(e.loaded / 1000) + " KB ]"; 
    ... 
  } else { 
    // Length not known, to avoid division by zero 
  } 
} 

function onTransferComplete(e) { ... } 

function onTransferFailed(e)   { ... } 

function onTransferAborted(e)  { ... } 

And as far as "crossbrowsering" is concerned IE doesn't implement progress support while Firefox and Chrome do.