Hi, lets see how to use AJAX in classic JavaScript and jQuery.

:::::::::::::::::::::::::::::: In Classic JavaScript ::::::::::::::::::::::::::::::

Step 1: Create Xml Http Object

var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
// try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
try
{
XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttpObj = null;
}
}
// if unable to create using IE specific code then try creating for Mozilla (FireFox)
if(!XmlHttpObj && typeof XMLHttpRequest != "undefined")
{
XmlHttpObj = new XMLHttpRequest();
}
}

Step 2: Function that uses above object to make a AJAX call.

function ajax()
{
var requestUrl;
requestUrl = "gettext.php";

CreateXmlHttpObj();

// verify XmlHttpObj variable was successfully initialized
if(XmlHttpObj)
{
// assign the StateChangeHandler function ( defined below in this file)
// to be called when the state of the XmlHttpObj changes
// receiving data back from the server is one such change

XmlHttpObj.onreadystatechange = StateLoadHandler;

// define the iteraction with the server -- true for as asynchronous.
XmlHttpObj.open("GET", requestUrl, true);

// send request to server, null arg when using "GET"
XmlHttpObj.send(null);
}
}

Step 3: Function that is called when response from above call arrives.

// this function called when state of XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateLoadHandler()
{
// state ==4 indicates receiving response data from server is completed
if(XmlHttpObj.readyState == 4)
{
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttpObj.status == 200)
{
// here write the code that uses the response and make changes on page
alert("XmlHttpObj in Text"+ XmlHttpObj.responseText);
}
else
{
alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
}
}
}

:::::::::::::::::::::::::::::: In jQuery ::::::::::::::::::::::::::::::

Just use below code in script tags.....

function ajax(){
{

$.ajax({
type: "POST",
url: "gettext.php",
success: function(msg)
{
//alert(msg);
}
});

}


Note:
1. All the above steps should be places between script tags...
2. Function in step two should be called from any HTML tag.
3. Download samples here

Comments (0)