Tuesday, October 9, 2007

JavaScript function to make an AJAX call

How many times have you had to go to the web, to look how to make a proper AJAX call? Many? Well.. Not anymore. Use this JavaScript function to make an AJAX call and process the response.

/**
* Purpose: to make a client-side request to the server, and obtain the response
*
* Input Params:
* 1. pURL - string - request URL
* 2. pPostVars - string - POST variables
* 3. pCallbackFunc - function reference - function that is to be called on
* successful response
* 4. pAsync - int - if request to be asynchronous - 1/0
*
* Output Params: none
*
* Return Value:
* on success - string - the response from the server
* on failure - bool - false
*
* Notes:
* 1. By default the request will *NOT* be asynchronous.
* This behaviour can be changed by the param pAsync.
* 1 is for asynchronous, and 0 is for synchronous.
* 2. By default the request method is GET. If however pPostVars is passed to the
* func, then the request method will be POST.
* pPostVars will a set of post variables as
* "var1=val1&var2=val2&var3=val3&varn=valn"
* 3. pCallbackFunc is a reference to a JS function. If specified, this function must
* mandatorily take a parameter to which the response string will be passed.
* 4. In most cases, if the request is going to be asynchronous, then it is always
* better to pass a callback function to do needful scripting after the response
*/
function GetServerResponse ( pURL, pPostVars, pCallbackFunc, pAsync )
{
var http_request = false;
var http_method = "GET";
var request_type = false;
var server_response;

if (pPostVars && pPostVars != "") var http_method = "POST";
if (pAsync && pAsync == 1) request_type = true;

// Browser - IE
if (window.ActiveXObject)
{
try { http_request = new ActiveXObject ("Msxml2.XMLHTTP"); }
catch (e)
{
try { http_request = new ActiveXObject ("Microsoft.XMLHTTP"); }
catch (e) {}
}
}

// Browser - Mozilla, ...
else if ( window.XMLHttpRequest )
{
http_request = new XMLHttpRequest ();

// some versions of Mozilla browsers won't work properly if
// response from server doesn't have xml mime-type header
if (http_request.overrideMimeType)
{
http_request.overrideMimeType("text/xml");
}
}

// unable to create xmlhttp obj
if (!http_request)
{
alert('Error : Cannot create an XMLHTTP instance');
return false;
}

// return server output on successful retrieval
http_request.onreadystatechange = function() {
if ( http_request.readyState == 4 )
{
// successfully got response
if ( http_request.status == 200 )
{
// case : if callback function specified,
// pass on the server response string to it as a parameter
if ( pCallbackFunc && typeof(pCallbackFunc) == "function")
{
pCallbackFunc(http_request.responseText);
}

server_response = http_request.responseText;
}

else
{
var err = 'Error : Server returned a status code : ';
err += http_request.status;
alert ( err );
server_response = false;
}
}
};

// GET method
if ( http_method == "GET" )
{
http_request.open ( "GET", pURL, request_type );
http_request.send ( null );
}

// POST method
else if ( http_method == "POST" )
{
http_request.open ( "POST", pURL, request_type );
var post_ctype = "application/x-www-form-urlencoded";
http_request.setRequestHeader ( "Content-Type", post_ctype );
http_request.send ( pPostVars );
}

return server_response;
}