Meet Arun

After a small introduction in Ajax, lets try out a small sample application. I’m using Ajax with php, but one can use any other language he is familiar with. (there is even an OS build with the help of Ajax).

Consider you have two files, index.php (or index.asp, whatever you like) and getAction.php. The first file (index.php) is used to display the contents to the user and the other one (getAction.php) is used to get details from the server or backend to be displayed in the index.php to the user. All you need to do is this:

Step1:
Open you index.php file in a text editor and add the following code to it.


<script language="javascript" type="text/javascript">
<!--
function createRequestObject() {
var ro;
var browser = navigator.appName;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
ro = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
return ro;
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('displayMyName').innerHTML = response;
}
}
// -->
</script>

Here’s the detailed explanation of all the functions used in the javascript.
createRequestObject():
This function is the one that creates the request object which has to be sent to the getAction.php file. This object is browser dependant. In case of IE, it must be of type ‘ActiveXObject’, but in ohter cases, like Opera or Firefox etc, it must be of type XMLHttpRequest. There’s no need to go in detail of these objects as this is more than enough.

sendReq(action)
This is the function that is used to send the request to the next page. For the newbies, web is purely dependant on the Request and Response. Its more like an enquiry counter. You ask a query at the counter, that is the Request. And you get the answer from the counter, that is the Response. Similarly, data is sent to the next page using Request and data is received using Response.
‘action’ is the String variable used to pass somee data to the function. Inside the function, the http request is sent to the server using the sequence of cammands like open and send. The open() function takes in two parameters here. The first one is the method by which the data has to be sent (can be post or get). We have used get method. The second parameter is the page to which request is being sent (here its getAction.php). The page has been appended with the query string since in a ‘get’ method of data sending, the data is sent using a query string.
The send() function is used to actually send the request to the server.

handleResponse()
This function is used to get the Response from the server and display the data in the screen. The function first checks if the Response is ready and seent by the server by checking if http.readyState value is 4. If it is 4, then that means the server has replied with some data. Inside the if loop, we get the data from the response object and set this text to the Div element (explained later) to be displayed.

Step2:
On any control (button or a radio or a checkbox) add an onClick event as shown.

<input type=button name=GetMyName value=GetMyName onClick="javascript:sendReq('getMyName');" />

It just means that when the user clicks on the button, the function sendReq() is called.

Step3:
Open the index.php file again and add the following HTML code to it.

<div id="displayMyName">
</div>

The Div element is nothing but a layer which groups a part of layout in the screen and applies same properties (css) to all of them. The Div element that we are using is just used to display the Response that we get from the server.

Step4:
Open the getAction.php file and add the following php code to it.

<?
switch($_REQUEST['actionStr']) {
case 'getMyName':
echo "Arun Prakash";
}
?>

This is a simple switch case statement. First we get the request from the query string using $_REQUEST[] and check if it is ‘getMyName’. If it is, then we just return the text ‘Arun Prakash’ (my name ). You can add some other manipulation here like some calculation or database connection and get some data from the database and return the data.

Thats it. All you now need to do is put these two files (index.php and getAction.php) inside one directory. Now access index.php and you are ready to go.

Here’s my working example: Ajax Test

Note: This is a very simple Ajax example. You can add lot of features to it to make it look cool.

First and foremost, its pronounciation. The word is most commonly pronounced as simply ‘Ajax’ or with a little tounge twister as ‘Ay-ax’. I prefer the second one but there’s no proper method to pronounce it, its all upto the person who says the word. Ajax is said to be a Greek Trojan war hero (thats what i heard), and there’s a Dutch soccer team named after him too! Well lets not get into a lot of soccer now.

AJAX stands for Asynchronus Javascript and XML, the concept that was there in the industry from a long time but not given proper recognition and a good name till 2005.

The concept involves sending and recieving only small of data to and from the server, instead of posting the whole page and sending the FULL web page and its data. So, there’s no actual posting being done, and so there’s no history maintained by the browser (will come to this later). In my next post we will try out a sample application in Ajax.