Thursday, November 12, 2009

AJAX handler for your application

We can have our own AJAX handler javascripts in our application.
Following are the steps to achieve them.

First create a callback object
this.XmlHttp;
var method = 'GET';
function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
CallBackObject.prototype.GetHttpObject = function()
{
var xmlhttp;

try
{
if ( window.XMLHttpRequest )
{
xmlhttp = new XMLHttpRequest();
}
else if ( window.ActiveXObject )
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e2)
{
xmlhttp = false;
}
}
}
}catch (e)
{
xmlhttp = false;
}


return xmlhttp;
}

Next step is creating a function which will send details to the server
Here eventTarget is the control raised ajax post back event and eventArgument is the argument to be passed with the data. data is the url query string and loadviewstate is a boolean denotes if need to send viewstate also.
Mirrorpage is alos a boolean if it is true all the values in the form will be send to the server

CallBackObject.prototype.DoCallBack = function(eventTarget, eventArgument, data, loadviewstate, mirrorpage)
{

var theData = data;
var theform = document.forms[0];
var thePage = window.location.pathname + window.location.search;
var myDateTime = new Date()

if(window.location.search == "")
thePage = thePage + "?tm=" + myDateTime.getMilliseconds();
else
thePage = thePage + "&tm=" + myDateTime.getMilliseconds();
var eName = '';
theData += '__EVENTTARGET=' + escape(eventTarget.split("$").join(":")) + '&';
theData += '__EVENTARGUMENT=' + eventArgument + '&';
if( loadviewstate == true )
{
theData += '__VIEWSTATE=' + escape(theform.__VIEWSTATE.value).replace(new RegExp('\\+', 'g'), '%2b') + '&';
}
theData += 'IsCallBack=true&';
if( mirrorpage == true )
{
for( var i=0; i<theform.elements.length; i++ )
{
eName = theform.elements[i].name;
if( eName && eName != '')
{
if( eName == '__EVENTTARGET' || eName == '__EVENTARGUMENT' || eName == '__VIEWSTATE' )
{
// Do Nothing
}
else
{
theData = theData + escape(eName.split("$").join(":")) + '=' + theform.elements[i].value;
if( i != theform.elements.length - 1 )
theData = theData + '&';
}
}
}
}
if(method.toUpperCase() == 'GET')
{

thePage += ((thePage.indexOf('?') == -1)?'?':'&') + theData;
}
else if(method.toUpperCase() == 'POST')
{
postData = postData?this._sFormData + "&" + postData:this._sFormData;
}

if( this.XmlHttp )
{
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
{

try
{
var oThis = this;
this.XmlHttp.open(method, thePage, true);
this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); };
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.XmlHttp.send(theData);
}
catch(err)
{

}
}}}
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
this.XmlHttp.abort();
}
// Loading
CallBackObject.prototype.OnLoading = function(){}
// Loaded
CallBackObject.prototype.OnLoaded = function(){}
// Interactive
CallBackObject.prototype.OnInteractive = function(){}
// Complete
CallBackObject.prototype.OnComplete = function(responseText, responseXml)
{

}
// Abort
CallBackObject.prototype.OnAbort = function(){}
// Error
CallBackObject.prototype.OnError = function(status, statusText){}

CallBackObject.prototype.ReadyStateChange = function()
{
if( this.XmlHttp.readyState == 1 )
{
this.OnLoading();
}
else if( this.XmlHttp.readyState == 2 )
{
this.OnLoaded();
}
else if( this.XmlHttp.readyState == 3 )
{
this.OnInteractive();
}
else if( this.XmlHttp.readyState == 4 )
{

if( this.XmlHttp.status == 0 )
this.OnAbort();

else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )
this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
else
this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);
this.XmlHttp.close;

}
}

No comments:

Post a Comment

...

Obstacles are those frightful things you see when you take your eyes off your goal.------> by Henry Ford