AJAX: Intro

AJAX is one of the newest and post popular technologies. AJAX [Asynchronous JavaScript and XML] allows you to send a request to the server and view the results without having to refresh the page. This enables you to create a more "windows-like" applications. This tutorial will explain the basics of AJAX.

The heart behind AJAX is the JavaScript XMLHttpRequest object. Since all browsers react differently to JavaScript creating a cross browser application can be difficult. The core code I always use is below:

[highlight="JavaScript"]<script type="text/javascript">
function ajax()
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("AJAX is not supported by your browser.");
return false;
}
}
}
}
</script>[/highlight]

This code works with FireFox, Internet Explorer, Opera, and many more. To send information to a server, I use the open() and send() functions. Open accepts three parameters, the "connection" type (either POST or GET), the file location, and a boolean value which determines whether the connection should be asynchronous. The send() function "sends" the request. The code will look like this:

[highlight="JavaScript"]xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);[/highlight]

Now before you actually submit data to a file you should actually make sure data needs to be submitted, and we do that by making sure the "state" was changed.

Which might look like this:

[highlight="JavaScript"]xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.formName.elementName.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);
}[/highlight]

The ready state has five "states": 0, 1, 2, 3, and 4. Ill tell you more about them in future tutorials when they are needed, but for this tutorial all we are concerned with is state four, which means the request is complete. So essentially what the code above does, is - if the request was complete, the web page is going to update the, lets say input box, named elementName inside the form named formName with the response from the server - which is a value echoed plain text. For example if ajax.php had this code:

echo date('l dS \of F Y h:i:s A');

And you had an html file like this:

[highlight="HTML4Strict"]<html>
<head>
<title>Ajax Time</title>
<script type="text/javascript">
function ajax()
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Ajax is not supported by your browser.");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.formName.elementName.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="formName">
Anything: <input type="text"
onkeyup="ajax();" name="anything" />
Time: <input type="text" name="elementName" />
</form>
</html>
[/highlight]

Assuming you setup everything properly, each time you type something in the "anything" input box the "elementName" input box should update with the current time.