What does Ajax mean?
Well it basically stands for Asynchronous JavaScript and XML and basically allows you to interact with your webserver using javascript on the fly (without having to refresh your page).
What can Ajax do?
AJAX can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page! AJAX technique makes Internet applications smaller, faster and more user-friendly!!
How do I communicate with my webserver on the fly?
Create the XMLHttpRequest object
Like I said, AJAX can communicate directly with the server using the XMLHttpRequest object. To create a XMLHttpRequest object you need to use the following code snippet
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
else {
alert(”Your browser does not support XMLHTTP!”);
}
Send the request to the web server
To send a request to the web server you need to use two methods from the XMLHttpRequest object, open (which tells the object which file on the server you are requesting) and send (which sends the request out to the server). See the example below
xmlhttp.open(”GET”,”test.php”,true);
xmlhttp.send(null);
Get the response from the web server
Now you need to use the onreadystatechange method of the XMLHttpRequest object, which gets called to process the response from the server.
Inside the onreadystatechange method you need to retrieve the response from the web server. Before you do, you need to check to see if the response has been sent (ie. the XMLHttpRequest object is in a ‘ready’ state).
// Gets called to process the response from server
xmlhttp.onreadystatechange=function() {
// Check the status of the response
if (xmlhttp.readyState==4) {
// Data sent back from the web server
responseFromWebServer=xmlhttp.responseText;
}
}
Final Code
function ajaxFunction() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Your browser does not support XMLHTTP!");
}
// Gets called to process the response from server
xmlhttp.onreadystatechange=function() {
// Check the status of the response
if (xmlhttp.readyState==4) {
// Data sent back from the web server
responseFromWebServer=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send(null);
}
Practical example
Below is a practical example using AJAX to retrieve the current time from the webserver, once the user has started entering there username.
The Webpage Form
The form has two fields, the first is the username, and the second is for the current time. As you can see, once you start typing in the username field the ajaxFunction(); will be called, this is where the ajax will go.
form name="myForm">
Name: input type="text" name="username" onkeyup="ajaxFunction();" >
Time: input type="text" name="time" >
/form>
The Ajax code
This is the ajax/javascript function which will retrieve the date from the server and place it in the date text field we made in the form. Its essentially the same as the previous example in the tutorial except we are now doing something with the data we retrieve from the server.
function ajaxFunction() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Your browser does not support XMLHTTP!");
}
// Gets called to process the response from server
xmlhttp.onreadystatechange=function() {
// Check the status of the response
if (xmlhttp.readyState==4) {
// Data sent back from the web server is now being stored into the date text field
document.myForm.time.value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","date.php",true);
xmlhttp.send(null);
}
The Server code
This file is called from the Ajax code and its output is sent back as a response to the browser (which is given by xmlhttp.responseText in the ajax code). All I am doing here is outputting a date using PHP, nothing complicated at all 
. Note you can make the server file as complicated as you like, for example many people use it to retrieve records from the database, allowing users to make database interactions on the fly!
echo date("Y/m/d");
And thats it! For more comprihensive tutorials on Ajax visit some links below which I strongly reccommend.
http://www.w3schools.com/Ajax
http://www.tizag.com/ajaxTutorial/
