AJAX - The Complete Reference

PART II

Chapter 8: User Interface Design for Ajax 347

That handler would then get called every so often and could present the status of the

download for the user.

function handleProgress(e)

{

var percentComplete = (e.position / e.totalSize)*100;

document.getElementById("downloadStatus").style.display = "";

document.getElementById("downloadStatus").innerHTML =

Math.round(percentComplete) + "%";

}

This technique might also be performed using setTimeout() when the Content-

length header is set and if the browser allows you to look at the XHR’s responseText

before the readyState value becomes 4. See Chapter 3 for details on this approach to

monitoring progress. We present a Firefox-specific example at http://ajaxref.com/ch8/

downloadprogress.html shown in Figure 8-5.

FIGURE 8-5 Showing actual download progress