Click here to Skip to main content
12,955,959 members (63,858 online)
Click here to Skip to main content
Add your own
alternative version


10 bookmarked
Posted 12 Jun 2012

Using AJAX Asynchronously with Progress Bar and Status

, 8 Jul 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This process can be used for management of bulky and long processes.


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.


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)
var iWidth=dvOut.clientWidth;
var pBInt=((iComplete*iWidth)/iTotal);"px";
function showProgressbar()
function hideProgressbar()

function PageFunctionProcess(sResponse)
else if(iRequestType==2)
else if(iRequestType==3)

function getList()
function setList(sResp)
var roIdx=0;
var totalRows;
var currentRowIdx;
var tblDetail;
function sendSMS()
function sendNextSMS()
alert("Process Completed");
var srNo=tblDetail.childNodes[currentRowIdx].childNodes[0]. innerText;
var sMobileNo=tblDetail.childNodes[currentRowIdx].childNodes[3]. innerText;
requestXMLProcess("ajaxResponsePage.aspx?ReqType=SendSMS&id="+ srNo +"&mobileno="+sMobileNo,1)
function setSMS(sRes)

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)
     _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;"GET", pageUrl ,true);
    _Request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
function WebForm_Callback()
    if(_Request.readyState == 4) 
        if(_Request.status == 200) 

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.


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


About the Author

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#
- SQL Server 2005
- XML Webservices
- Payment systems

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

40 members

You may also be interested in...


Comments and Discussions

SuggestionSuggestion regarding content Pin
Member 1123338913-Nov-14 23:20
memberMember 1123338913-Nov-14 23:20 
GeneralCode Layout Issues Pin
Tim Corey7-Jul-12 5:24
memberTim Corey7-Jul-12 5:24 
GeneralRe: Code Layout Issues Pin
Technoses9-Jul-12 3:25
groupTechnoses9-Jul-12 3:25 
this problem occurs during when i copy code from my js file and when i paste it to the content box..
i shows like this
how can i paste it as-it-was

please help me about this
my other tips also looks like this ...

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

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

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