Using AJAX Asynchronously with Progress Bar and Status

• Download source - 4.3 KB

Introduction

AJAX has been around for a while now, and an important feature of the AJAX implementation in the .NET space is the partial post back functionality of web pages. We can use this functionality asynchronously if our process takes time or our process is too bulky than a normal process, like creating multiple files through our software or sending mails to many clients. By using this process, we can show a progress bar which will be very useful to users who use our software or web application. This functionality has made online experience richer and smoother while decreasing bandwidth usage between the server and the browser.

Background

XMLHttpRequest is a DOM API. It can be used inside a web browser scripting language, such as JavaScript, to send an HTTP request directly to a web server without having to reload the entire page and handling the response from the server again within the scripting language. This data, in the form of XML or Text, can then be used to manipulate the page elements on the client side. Using this, we can call an ASPX page directly with filtration of query string and can do the processes which we want.

By doing so, we are preventing page refreshes and roundtrips of static data and content in web pages.

Essential Building Blocks

1. The XMLHttpRequest API

How the Code Works

When the button on the ASPX page has been clicked, a client side HTTP request is made using the XMLHttpRequest API. This request calls a page to do processing on the web server. The page receives the request, processes it, and sends back the response to the XMLHttp object on the ASPX page. The XMLHttp object in turn consumes the response and then we can manipulate the result as we want.

Using the Code

Using the below code by JS:

var iRequestType;
var dv=document.getElementById("dvContent");
var dvOut=document.getElementById("progressOuter");
var dvPBar=document.getElementById("progressBar");

function setProgressbar(iTotal,iComplete)
{
dvOut.style.display="";
var iWidth=dvOut.clientWidth;
var pBInt=((iComplete*iWidth)/iTotal);
dvPBar.style.width=pBInt+"px";
}
function showProgressbar()
{
dvPBar.style.width="0px";
dvOut.style.display="none";
}
function hideProgressbar()
{
dvOut.style.display="none";
}

function PageFunctionProcess(sResponse)
{
if(iRequestType==1)
{
setList(sResponse)
}
else if(iRequestType==2)
{
setSMS(sResponse)
}
else if(iRequestType==3)
{
setMail(sResponse)
}
}

function getList()
{
iRequestType=1;
requestXMLProcess("ajaxResponsePage.aspx?ReqType=GetList",1)
}
function setList(sResp)
{
dv.innerHTML=sResp; 
}
var roIdx=0;
var totalRows;
var currentRowIdx;
var tblDetail;
function sendSMS()
{
iRequestType=2;
roIdx=0;
tblDetail=dv.childNodes[0].childNodes[0];
totalRows=tblDetail.childNodes.length;
currentRowIdx=0;
showProgressbar();
sendNextSMS()
}
function sendNextSMS()
{
currentRowIdx++;
if(currentRowIdx>=totalRows)
{
hideProgressbar();
alert("Process Completed");
}
else
{
var srNo=tblDetail.childNodes[currentRowIdx].childNodes[0]. innerText;
var sMobileNo=tblDetail.childNodes[currentRowIdx].childNodes[3]. innerText;
tblDetail.childNodes[currentRowIdx].childNodes[5].innerText="Processing";
requestXMLProcess("ajaxResponsePage.aspx?ReqType=SendSMS&id="+ srNo +"&mobileno="+sMobileNo,1)
}
}
function setSMS(sRes)
{
tblDetail.childNodes[currentRowIdx].childNodes[5].innerText=sRes;
setProgressbar(totalRows,currentRowIdx);
sendNextSMS();
}

XMLHttpRequest API

This API makes a client side request to the handler without the need for a full postback by the ASPX page. The XML data is received by the XMLHttp object and used to populate a div element.

/////////////////////////////////////////////////////////////////
// JScript File
var _Request;
var _iResponseType;
function requestXMLProcess(pageUrl,iResponseType)
{
    _iResponseType=iResponseType;
    try 
    {
     _Request = new XMLHttpRequest();  //e.g. Firefox
     } catch(err1) {
       try {
       _Request = new ActiveXObject('Msxml2.XMLHTTP'); // some versions IE 
       } catch (err2) {
         try {
         _Request = new ActiveXObject("Microsoft.XMLHTTP"); // some versions IE 
         } catch (err3) {
          _Request = false;
         }
       }
     }
    var dt=new Date();
    var st = dt.getMilliseconds()
    pageUrl =pageUrl  + "&st="+ st;
    
    _Request.onreadystatechange = WebForm_Callback;
    _Request.open("GET", pageUrl ,true);
    _Request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    _Request.send(); 
}
    
function WebForm_Callback()
{
    if(_Request.readyState == 4) 
    {   
        if(_Request.status == 200) 
        {
            if(_iResponseType==2)
                PageFunctionProcess(_Request.responseXML)
            else
                PageFunctionProcess(_Request.responseText)
        }
    }
}
/////////////////////////////////////////////////////////////////

You can view the source code for an example.

Points of Interest

Interestingly enough, much of the functionality we see above has been due to the browser support for XMLHttpRequest. It is important to understand the various implementations of the XMLHttp object by different browsers.