Ajax Utility methods

XMLHttpRequest Factory

/* XMlHttpRequest Factory  */
function XMlHttpRequestFactory()
{
    var xmlHttp = null;
    
    if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
        //alert(xmlHttp + '[Status = ' + xmlHttp.readyState + ']' );
    }
    else if(window.ActiveXObject)
    {
        try
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            //alert(xmlHttp + '[Status = ' + xmlHttp.readyState + ']');
        }
        catch(e)
        {
           
        }
    }     
    
    return xmlHttp;  
}

 

Send Asynchronous Request to Server

/* Send Asynchronous Request to Server  */
/* URL : reqested URL; callBackMethod: method to be called when the response is ready */
function SendAsynchronousRequest(xmlHttp, URL, callBackMethod, httpVerb, contentType)
{
    
    
    if(xmlHttp != null)
    {
            
        xmlHttp.open(httpVerb,GenerateUniqueURL(URL),true);
        
        xmlHttp.onreadystatechange = callBackMethod;
        
        xmlHttp.setRequestHeader('Content-type',contentType);
        
        xmlHttp.setRequestHeader("Cache-Control", "no-cache"); 

        
        xmlHttp.send(null);
        
    }
    else
    {
        throw new Error('Can Not send a Request from the browser, no XMlHttpRequest object found');
    }
}

 

Toggeling Request Status

/* Request Status */
/* XMlHttpRequest Object */
function RequestStatus(xmlHttp)
{
    var status = false;
    if(xmlHttp.readyState == 0)
    {
        //alert("Request UNSENT");   
    }
    else if(xmlHttp.readyState == 1)
    {
        //alert("Request OPENED");       
    }
    else if(xmlHttp.readyState == 2)
    {
        //alert("Request HEADERS_RECEIVED");
    }
    else if(xmlHttp.readyState == 3)
    {
        //alert("Request LOADING");
    }
    else if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
        alert("Response DONE SUCCESSFULLY");
        status = true;
    }
    
    return status;
    
}

 

Hide UpdateProgress Image

* Show Update Progress  */
/* xmlHttp : XMlHttpRequest Object; imageID : Image to show/hide */
function ShowUpdateProgress(xmlHttp, imageID)
{
    var loader = document.getElementById(imageID);
    
    if(loader != null)
    {   
        
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
            loader.style.visibility = "hidden";       
        }   
    }
}

 

Generate Unique URL to avoid caching problems :

/* Generate Unique URL */
/* URL : Uniform Resource Locator */
function GenerateUniqueURL(URL)
{
    var sep = (-1 < URL.indexOf("?")) ? "&" : "?";
    URL = URL + sep + "__=" + encodeURIComponent((new Date()).getTime());
    
    return URL;
}

 

Add Client Side PageLoad

/* AddClientPageLoad */
/* scriptManager : SYS.Application */
/* loadFuntion : function to be called at page load */
function AddClientPageLoad(scriptManager, loadFuntion)
{
    scriptManager.add_load(loadFuntion);
}
 
 
Add Client Side PageLoad
/* AddClientPageUnLoad */
/* scriptManager : SYS.Application */
/* UnloadFuntion : function to be called at page load */
function AddClientPageUnLoad(scriptManager, UnloadFuntion)
{
    scriptManager.add_load(UnloadFuntion);
}

Enjoy it!

Published Sunday, February 03, 2008 7:37 PM by Joseph Ghassan

Comments

# re: Ajax Utility methods

Sunday, February 03, 2008 7:12 PM by Joe Chung

Is there a reason why you chose to rewrite functionality that already exists in the Microsoft AJAX Script Library?

# re: Ajax Utility methods

Monday, February 04, 2008 3:48 AM by Joseph Ghassan

Yes, to make working with XMlHttpRequest much easier by creating abstract method that hide away the complexity from developers.

# re: Ajax Utility methods

Thursday, May 28, 2009 2:34 PM by tperri

Is it possible to use this method of loading an .aspx page into a div, and on the loaded .aspx page, have a "Submit" button that performs an action when clicked?

# re: Ajax Utility methods

Wednesday, September 23, 2009 10:36 AM by Marc

Nice utility methods. One thing missing though is the use of the function RequestStatus which is required in the method SendAsynchronousRequest otherwise the callback funtion is called several times.

Leave a Comment

(required) 
(required) 
(optional)
(required)