AJAX progress bar

With few lines of JavaScript and CSS you can make simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with XML. Progress value should be extracted from the XML and displayed as width of the DIV element. To start progress bar in this example, please click on the Start button and wait for a second to begin. If you have installed Firebug, open Net tab and watch how this page sends request to the Web server.

More precisely, every 1500ms send_request() function sends request to the server (see setInterval line - button actions). ajax-progress-bar.php returns XML and request_handler() processes received XML. Progress value from XML has meaning of percentage completion of a job.

In the following JavaScript source, please focus to the sending and handling requests. Initialization of the XMLHttpRequest is written in the cross-browser manner and there's nothing more to add. The onreadystatechange property is a function that receives the feedback. It is important to note that the feedback function must be assigned before each send, because upon request completion the onreadystatechange property is reset. This is evident in the Mozilla and Firefox source.

var progress;   // progress element reference
var request;    // request object
var intervalID; // interval ID

// button actions
function polling_start() {intervalID = window.setInterval('send_request()',1500)}
function polling_stop()  {window.clearInterval(intervalID)}

// define reference to the progress bar and create request object
window.onload = function (){
	progress = document.getElementById('progress');
	request  = initXMLHttpClient();
}

// create an XMLHttpClient in a cross-browser manner
function initXMLHttpClient(){
	var xmlhttp;
	try {xmlhttp=new XMLHttpRequest()} // Mozilla/Safari/IE7 (normal browsers)
	catch(e){ 												 // IE (?!)
		var success=false;
		var XMLHTTP_IDS=new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
															'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP');
		for (var i=0; i<XMLHTTP_IDS.length && !success; i++)
			try {success=true; xmlhttp=new ActiveXObject(XMLHTTP_IDS[i])}	catch(e){}
		if (!success) throw new Error('Unable to create XMLHttpRequest!');
	}
	return xmlhttp;
}

// send request to the server
function send_request(){
	request.open('GET','/my/ajax-progress-bar.php', true); // open asynchronus request
	request.onreadystatechange = request_handler;          // set request handler
	request.send(null);                                    // send request
}

// request handler
function request_handler(){
	if (request.readyState == 4){ // if state = 4 (the operation is completed)
		if (request.status == 200){ // and the HTTP status is OK
			// get progress from the XML node and set progress bar width and innerHTML
			var level=request.responseXML.getElementsByTagName('PROGRESS')[0].firstChild;
			progress.style.width = progress.innerHTML = level.nodeValue + '%';
		}
		else{ // if request status is different then 200
			progress.style.width = '100%';
			progress.innerHTML='Error: ['+request.status+'] '+request.statusText;
		}
	}
}

Here you can see the source of ajax-progress-bar.php (how is job progress emulated for this example). In your case you will have to calculate percentage of completion and return it as the XML document.

<?php
header('Content-type: text/xml'); // define XML content type
print '<?xml version="1.0"?>';    // print XML header
?>
<DOCUMENT><PROGRESS><?= mktime() % 100 ?></PROGRESS></DOCUMENT>

Related posts

• JavaScript Drag and Drop example 4
• JavaScript Drag and Drop example 3
• JavaScript Drag and Drop example 2
• Autocomplete without AJAX
• Image hover using Javascript

This entry was posted on Thursday, 14.05.2009. at 11:49and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.