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 ap¬proach has changed.
Instead of a new page opening up, a con¬firmation 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 con¬firmation 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 communicat¬ing 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 retriev¬ing 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 Start the in¬stallation by double clicking on the down¬loaded file and then follow the onscreen instructions. Once you are through with instal¬lation, then create a small test database. For this, execute the following set of commands:
# mysql
# create database test; # use test;
# create table testl ( name text );
# insert into testl values ("PCQuest"); # select' from testl;
These commands are used to get MySQL prompt, then create a database named "test" and then in "test" database make a table named "test 1". After the table is created then insert some values and to check whether cor¬rect values are correctly entered, use the last command.
Implementing AJAX using XMLH ttpRequest
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 direc¬tory is under the'/var/www/html/'folder. Write the following code inside the 'index.html'file and save it:
<html>
<title> This is a test for Ajax</title> <script language-"JavaScript">
var xmlHttp - new XMLHttpRequestO if (xmlHttp -- null)
alert("error ... ") function showresponseO
var url- "query.php" xmlHttp.open("GET" ,urt true) xmlHttp.onreadystatechange - state-
Changed xmlHttp.send(null)
if(xmlHttp.readyState--4 " xmlHttp.status -- 200) {
Svar = xmlHttp.responseText
doc u m e nt. getEle men t By Id ('s h ow¬div').innerHTML - Svar
</script> <body>
<a href-"#" onClick-showresponseO>Click Here<ja>
<span id-"showdiv"></span> </body> </html>
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:
<?php

Slink• mysql_connect ("localhost", "root", "pwd");

if (!Slink) echo "Can't connect to the database ";
mysqUelect_db ("test".Slink); Sresult - mysql_query ("select • from
testl". Slink);

Name: 65498.jpg Views: 80 Size: 30.5 KB

Srow. mysqUetch_row(Sresult); mysql_close(Slink);
echo Srow[O];
Please note, in the above code that you're connecting to the MySQL database called test that's runni~g on local host as 'root' user hav¬ing password of'pwd'. You can change the password to whatever you've assigned for root. While testing the Transport method, open 'in¬dex.htm!' 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 in¬formation from other servers as wel!. Let us understand this with an example. Make a file named 'abcd.htm!' and write the following code into it:
<html>
<title>Example for IFrame</title> <body>
<iframe width•"800" height-"600" src •. "> </iframe>
</body>
</html>
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:
<html>
<title>Implementation of AJAX using IFrames</title>
<head>
<script language-"javascript">
function requestresponseO { alert("this function in called from server") </head> <body>
<iframe id •. "result" name="result"
style="width:Opx; height:Opx; border: Opx" src-"blank.html">
</iframe>
<a href-"server.html" target-"result">Click Here</a>
</body> </html>
Now make a file 'server.html', write the following code and save the me.
<html> <head>
<script type •• "text/javascript">
wi n dow. pa re nt. req uestres po n se () </script>
</head>
</html>
Open the index.html in a Web browser and click on the provided link. This will dis¬play an alert'this function is called from server'. Here the function 'requestresponseO' is defined at the client side i.e. in 'index.htm!' and the function is called from the server i.e. from server.htm!.

Both XMLHttpRequest and IFrames are good for building websites having AJAX capa¬bilities, but the latter is usually preferred be¬cause 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 ini¬tial page then it is fine, but if you want to ac¬cess information from any other server other than the host server, then it is not possible.