How To Create Ajax Progress Bar ...

In this tutorial you will know how to create an AJAX progress bar using javascript , In the following JavaScript source:

   1. var progress;   // progress element reference 
   2. var request;    // request object 
   3. var intervalID; // interval ID 
   4.  
   5. // button actions 
   6. function polling_start() {intervalID = window.setInterval( isend_request(),1500)} 
   7. function polling_stop()  {window.clearInterval(intervalID)} 
   8.  
   9. // define reference to the progress bar and create request object 
  10. window.onload = function (){ 
  11.   progress = document.getElementById(progress); 
  12.   request  = initXMLHttpClient(); 
  13. } 
  14.  
  15. // create an XMLHttpClient in a cross-browser manner 
  16. function initXMLHttpClient(){ 
  17.   var xmlhttp; 
  18.   try {xmlhttp=new XMLHttpRequest()} // Mozilla/Safari/IE7 (normal browsers) 
  19.   catch(e){                          // IE (?!) 
  20.     var success=false; 
  21.     var XMLHTTP_IDS=new Array(MSXML2.XMLHTTP.5.0,MSXML2.XMLHTTP.4.0, 
  22.                               MSXML2.XMLHTTP.3.0,MSXML2.XMLHTTP,Microsoft.XMLHTTP); 
  23.     for (var i=0; i<XMLHTTP_IDS.length && !success; i++) 
  24.       try {success=true; xmlhttp=new ActiveXObject(XMLHTTP_IDS[i])} catch(e){} 
  25.     if (!success) throw new Error(Unable to create XMLHttpRequest!); 
  26.   } 
  27.   return xmlhttp; 
  28. } 
  29.  
  30. // send request to the server 
  31. function send_request(){ 
  32.   request.open(GET,/my/ajax-progress-bar.php, true); // open asynchronus request 
  33.   request.onreadystatechange = request_handler;          // set request handler 
  34.   request.send(null);                                    // send request 
  35. } 
  36.  
  37. // request handler 
  38. function request_handler(){ 
  39.   if (request.readyState == 4){ // if state = 4 (the operation is completed) 
  40.     if (request.status == 200){ // and the HTTP status is OK 
  41.       // get progress from the XML node and set progress bar width and innerHTML 
  42.       var level=request.responseXML.getElementsByTagName(PROGRESS)[0].firstChild; 
  43.       progress.style.width = progress.innerHTML = level.nodeValue + \%; 
  44.     } 
  45.     else{ // if request status is different then 200 
  46.       progress.style.width = 100%; 
  47.       progress.innerHTML=Error: [+request.status+] +request.statusText; 
  48.     } 
  49.   } 
  50. } 

Here is the source of ajax-progress-bar.php:

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

 Original Source: