AJAX Implementation Primer

BANGALORE, INDIA: Typically, when you fill up an online form and click the 'submit' button, then a new page confirming its submission is displayed. But now, this traditional approach has changed.

Instead of a new page opening up, a confirmation message gets displayed on the same page. Here, only a part of the page displaying confirmation message gets refreshed, instead of the whole page. You would have experienced it on many sites.

Take Orkut for instance. When you click on the 'post scrap' button, your scrap gets posted on your friend's scrap book and a confirmation message gets displayed on the same page. Not only does it save time, but it also saves a lot of bandwidth.

In general, AJAX is used for communicating between the server and client, as well as updating the webpage without refreshing the whole page.

Have you ever wondered how this thing works? Let's quickly explain it. Initially the client sends a request to the server for retrieving some information. The server then sends back an HTML page embedded with some JavaScript code. This code further requests for the information that is needed by the client using XML, and hence displays or updates the webpage.

If your website doesn't have too much server-client data transfers happening, and will used mostly for displaying information, then the classic build up method is fine.

However, for sites where a lot of server-client data transfer is involved, one must go for AJAX. There are two ways to implement AJAX: XMLHttp Request and IFrames. We will discuss both in this article.

Prerequisites
We'll use a server that's running LAMP (Linux, Apache, MySQL, and PHP/Perl). If you don't have one, then you can download the executable file from http://www.wamp server.com/en /down load.php. Start the installation by double clicking on the downloaded file and then follow the onscreen instructions. Once you are through with installation, then create a small test database. For this, execute the following set of commands:
# mysql
# create database test;
# use test;
# create table test1 ( name text );
# insert into test1 values (“PCQuest”);
# select * from test1;

These commands are used to get MySQL prompt, then create a database named “test” and then in “test” database make a table named “test1”. After the table is created then insert some values and to check whether correct values are correctly entered, use the last command.

Implementing AJAX using XMLHttpRequest
Now, we will create a simple html file, which will be loaded at the client side and a PHP file, which will reside on the server. This PHP file will query the database and return the result to the client.

For this, create a file named 'index.html' in your Web root directory. The default root directory is under the '/var/www/html/'folder. Write the following code inside the 'index.html'file and save it:




Click Here



Now, make another file named 'query.php', write the following code and save it under the same directory where the 'index.html' file is saved:
$link = mysql_connect ("localhost","root","pwd");
if (!$link) echo "Can't connect to the database ";
mysql_select_db ("test",$link);
$result = mysql_query ("select * from test1", $link);
$row = mysql_fetch_row($result);
mysql_close($link);
echo $row<0>;
?>

Please note, in the above code that you're connecting to the MySQL database called test that's running on localhost as 'root' user having password of 'pwd'. You can change the password to whatever you've assigned for root. While testing the Transport method, open 'index.html' in your Web browser (preferably Firefox) and click on the provided link. In our case it must show the word 'PCQuest'beside the link.

Implementing AJAX using IFrames
The advantage of using this method is that unlike 'XMLHttpRequest', you can access information from other servers as well. Let us understand this with an example. Make a file named 'abcd.html' and write the following code into it:






View this in any Web browser. It will show you the PCQuest website within a frame of 800 x 600. Now for IFrames we will take a simple example where a function is defined at the client side, but the function is called by the server on client's request. Go through the code once to understand it better. Now, similar to our previous example, make an 'index.html' file, and write the following code and save it:

name="result"
style="width:0px; height:0px; border: 0px"
src="blank.html">

Click Here


Now make a file 'server.html', write the following code and save the file.





Open the index.html in a Web browser and click on the provided link. This will display an alert 'this function is called from server'. Here the function 'requestresponse()' is defined at the client side i.e. in 'index.html' and the function is called from the server i.e. from server.html.

Both XMLHttpRequest and IFrames are good for building websites having AJAX capabilities, but the latter is usually preferred because XMLHttpRequest support is there only in the new Opera and Safari browsers, and further, ActiveX needs to be enabled for IE 5 and 6.

'XMLHttpResquest' method is in general used for querying. Another drawback of using 'XMLHttpRequest' is that if you want to access information from the host that served the initial page then it is fine, but if you want to access information from any other server other than the host server, then it is not possible.