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
- 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
var _Request;
var _iResponseType;
function requestXMLProcess(pageUrl,iResponseType)
{
_iResponseType=iResponseType;
try
{
_Request = new XMLHttpRequest();
} catch(err1) {
try {
_Request = new ActiveXObject('Msxml2.XMLHTTP');
} catch (err2) {
try {
_Request = new ActiveXObject("Microsoft.XMLHTTP");
} 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.