AJAX (Asynchronous JavaScript and XML) is a programming language. AJAX is using to exchange data with a server, and update the webpage without reloading the whole webpage. AJAX provides a robust foundation in designing and developing web applications. Such as AJAX increase interactivity, speed and usability. The technologies have encouraged more affluent and sociable practice for the user as web applications are planned to reproduce ‘conventional’ desktop applications. As such example of AJAX are Google Docs and Spreadsheets, Google Maps and Yahoo! Mail.
How AJAX works:
Ajax engine is written in JavaScript. The Ajax engine is loaded at the start of a web session. AJAX acts as a middleman to communicate between client browser and server. To exchange data between client browser and server AJAX use XMLHttpRequest object.
In the next steps we will see how to create an XMLHttpRequest and receive response from the server.
1. Initialize XMLhttpRequest Object
Different browsers use different methods to create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, while other browsers use the built-in JavaScript object called XMLHttpRequest.
To create this object, and deal with different browsers, we can use a “try and catch” statement.
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
2. Sending request to the server
The open() and send() method is used to send a request. The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server.
xmlHttp.open(“GET”,”time.php”,true);
xmlHttp.send(null);
3. Server side script writing
The responseText will store the data returned from the server. Here we want to send back the current date. The code in “time.php” looks like this:
<?php
$cdate=date();
echo $cdate;
?>
4. Get the response
Now we need to consume the response received and display it to the user.
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
5. Complete the code
Now we must decide when the AJAX function should be executed. We will let the function run “behind the scenes” when the user types something in the username text field. The complete code looks like this:
<html>
<body>
<script type=”text/javascript”>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.php”,true);
xmlHttp.send(null);
}
</script>
<form name=”myForm”>
Name: <input type=”text”
onkeyup=”ajaxFunction();” name=”username” />
Time: <input type=”text” name=”time” />
</form>
</body>
</html>
Conclusions
AJAX are used for sophisticated and interactive website design. AJAX enriches web design works.
