Advertisment

AJAX Implementation Primer

author-image
PCQ Bureau
New Update

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.

Advertisment

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.

Direct Hit!

Applies To: Ajax developers



USP: Different data transferring techniques in AJAX


Primary Link: //ajaxpatterns.org/ XMLHttpRequest_Call


Keywords: Ajax data transfer methods


On CD: NA


Advertisment

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.

Advertisment

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.

Advertisment

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:






This is a test for Ajax








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.

Advertisment

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:






Example for IFrame




















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:





In the XMLHttpRequest method,

when you click on a link, a PHP script runs at the server, queries the

database and returns data on the same page itself





Implementation of AJAX using IFrames





















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.

Advertisment