Click here to Skip to main content
Click here to Skip to main content

Using AJAX Asynchronously with Progress Bar and Status

By , 8 Jul 2012
Rate this:
Please Sign up or sign in to vote.

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.

JS function
/////////////////////////////////////////////////////////////////
// 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Technoses
Software Developer (Senior) Super Eminent Softwares
India India
My name is Peeyush Shah and I am working with Microsoft.Net Framework at Jaipur, India with a Taxaction Software Development Company Named Professional Softec Pvt. Ltd.
 
My main focus is the development of online application.
We also develop custom software solutions for our customers and are able to support developers in using the following technologies, because we use them every day

- .NET Framework 2.0
- C#
- ASP.NET
- ASP.NET AJAX
- SQL Server 2005
- ADO .NET
- XML Webservices
- Payment systems

Feel free to take a look at the website and see Microsoft's new technologies in action
Group type: Organisation

7 members


Comments and Discussions

 
GeneralCode Layout Issues PinmemberTim Corey7-Jul-12 5:24 
GeneralRe: Code Layout Issues PingroupTechnoses9-Jul-12 3:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 8 Jul 2012
Article Copyright 2012 by Technoses
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid