AJAX means Asynchronous JavaScript and XML.

This is a way to present data in page without submitting the page to server.

Here is a JS AJAX method call for all browsers:

GET REQUEST

function CreateAjaxCall(){

// Prepare request URL
var strUrl=”<PROTOCOL>://<SERVER-ADDRESS>/<PAGE>?<QUERY STRING(S)>”

// Here you will initiate the XML DOM object to initiate AJAX call, also place at argument an callback method name as method pointer.
var objXmlHttpRequest=GetXmlHttpObject(CheckXmlResponseStatus);

// Check the request object status and proceed
if (null != objXmlHttpRequest) {

// Process GET request, Last parameter true means request is Async and if you place it false then it indicated request is Sync
// Async means this processing will not depends on any other request. All the process before and after this request will execute according to their time frame.
// Sync means, all the process after this request will wait until this AJAX request complete.
objXmlHttpRequest.open(“GET”, strUrl , true);

// Send the request. This is GET request so we are not sending any value as post.
objXmlHttpRequest.send(null);

}

}

POST REQUEST

function CreateAjaxCall(){

// Prepare request URL
var strUrl=”<PROTOCOL>://<SERVER-ADDRESS>/<PAGE>?<QUERY STRING(S)>”

// Here you will initiate the XML DOM object to initiate AJAX call, also place at argument an callback method name as method pointer.
var objXmlHttpRequest=GetXmlHttpObject(CheckXmlResponseStatus);

// Check the request object status and proceed
if (null != objXmlHttpRequest) {

// Process POST request, Last parameter true means request is Async and if you place it false then it indicated request is Sync
objXmlHttpRequest.open(“POST”, url, true);

// Set the content type at header
objXmlHttpRequest.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

// Set the content/data length
objXmlHttpRequest.setRequestHeader(“Content-length”, <CONTENT>.length);

// Send the request. This is POST request so we are sending content containing object.
objXmlHttpRequest.send(<CONTENT>);

}

}

//—————————————————————————————————————————————————–

// This method create xml DOM relative to client or browser or user agent

function GetXmlHttpObject(handler) {

var xmlHttp = null;

// Firefox, Opera 8.0+, Safari, IE7+
if (typeof XMLHttpRequest != “undefined”) {

xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = handler;

}
else if (window.ActiveXObject) {

// Internet Explorer 5 and 6
var versions = [ “MSXML2.XMLHttp.6.0”, “MSXML2.XMLHttp.3.0”, “MSXML2.XMLHTTP” , “Microsoft.XMLHTTP” ];
var xmlHttp;
for (var i = 0; i < versions.length; ++i) {

try {

xmlHttp = new ActiveXObject(versions[i]);
xmlHttp.onreadystatechange = handler;

}
catch(e) {

// Do nothing

}

}

}

return xmlHttp;

}

//—————————————————————————————————————————————————–

// Now develop the call back method

function CheckXmlResponseStatus(){

// Check the status
if (4 == objXmlHttpRequest.readyState || “complete” == objXmlHttpRequest.readyState) {

//Do your action here.

}

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s