c




   
 



m

 

Ajax is of the most important technologies for the development of highly interactive web
application and due to its features it has become extremely popular these days.

Asynchronous JavaScript and XML or Ajax for short is new web development technique used for the
development of most interactive website. Ajax helps you in making your web application more
interactive by retrieving small amount of data from web server and then showing it on your application.
You can do all these things without refreshing your page.
Usually in all the web applications, the user enters the data into the form and then clicks on the submit
button to submit the request to the server. Server processes the request and returns the view in new
page ( by reloading the whole page). This process is inefficient, time consuming, and a little frustrating
for you user if the only the small amount of data exchange is required. For example in an user
registration form, this can be frustrating thing for the user, as whole page is reloaded only to check the
availability of the user name. Ajax will help in making your application more interactive. With the help of
Ajax you can tune your application to check the availability of the user name without refreshing the
whole page.

u  

  

   
Ajax is not a single technology, but it is a combination of many technologies. These technologies are
supported by modern web browsers. Following are techniques used in the Ajax applications.

½ ÷

JavaScript is used to make a request to the web server. Once the response is returned by the
webserver, more JavaScript can be used to update the current page. DHTML and CSS is used to
show the output to the user. JavaScript is used very heavily to provide teh dynamic behavior to
the application.

½ 
   


  
Most of the Ajax application used the XMLHttpRequest object to send the request to the web
server. These calls are Asynchronous and there is no need to wait for the response to come
back. User can do the normal work without any problem.

½ a

XML may be used to receive the data returned from the web server. JavaScript can be used to
process the XML data returned from the web server easily.
 ÷a
When user first visits the page, the Ajax engine is initialized and loaded. From that point of time user
interacts with Ajax engine to interact with the web server. The Ajax engine operates asynchronously
while sending the request to the server and receiving the response from server. Ajax life cycle within
the web browser can be divided into following stages:

½ u




  User visits the URL by typing URL in browser or clicking a link from
some other page.

½ m 

   

When the page is initially loaded, the Ajax engine is also initialized. The Ajax engine can also be
set to continuously refresh the page content without refreshing the whole page.

½ ‘


 

* Browser event may instruct the Ajax engine to send request to server and receive the response
data
* Server response - Ajax engine receives the response from the server. Then it calls the
JavaScript call back functions
* Browser (View) update - JavaScript request call back functions is used to update the browser.
DHTML and css is used to update the browser display.

 


Ajax is new very promising technology, which has become extremely popular these days. Here are the
benefits of using Ajax:

½ Ajax can be used for creating rich, web-based applications that look and works like a desktop
application

½ Ajax is easy to learn. Ajax is based on JavaScript and existing technologies like XML, CSS,
DHTML. etc. So, its very easy to learn Ajax

½ Ajax can be used to develop web applications that can update the page data continuously without
refreshing the whole page

Y m




According to Wikipedia Rich Internet Applications (RIA) are web applications that have the features
and functionality of traditional desktop applications. RIA's transfer the processing necessary for the
user interface to the web client but keep the bulk of the data back on the application server.
Traditional web applications centered all activity around a client-server architecture with all processing
done on the server, and the client only displaying static content. The biggest drawback with this system
is that all interaction must pass through the server, which requires data to be sent to the server, the
server to respond, and the page to be reloaded on the client with the response. Most traditional web
applications have clumsier and difficult to use interfaces compared to desktop ones. The primary
difference between a RIA and traditional web applications is the amount and quality of interaction
 between the user and the interface. An RIA can use a wider range of controls to improve users¶
interaction allowing efficient interactions, better error management, feedback and overall user
experience. Another benefit of RIAs is that data can be cached in the client, allowing a vastly more
responsive user interface and fewer round trips to the server.
Some of the features and benefits delivered by RIA's are listed below
a) Allows feedback, confirmation and errors messages to be displayed on same page/view.
b) Wider variety of controls e.g. sliders, date pickers, windows, tabs, spinners etc.
c) No installation, just an AJAX enabled browser required
d) Higher immunity to viruses and piracy.
e) Reduced load on server resources as processing is distributes over server and client
f) Lowered application development and deployment costs
g) Reduction in network traffic due to more intelligent client and selective data request

The most common technologies used for building RIA's are Java applets and web start, Adobe Flash and
Flex, and AJAX. Efforts are being made to make AJAX work with the other mentioned technologies.
Adobe Systems has released libraries to help developers bridge Adobe Flash and Flex technology
with AJAX. Similarly libraries are available to integrate AJAX with Java,.NET,PHP,Python,Perl,Ruby and
other backend technologies.

Source Code
HelloWorld.html
<html>
<head>
<title>The Hello World of AJAX</title>
<script language="JavaScript" type="text/javascript">
function getXmlHttpRequestObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Betterupgrade to Firefox.");
}
 }

var receiveReq = getXmlHttpRequestObject();

function sayHello()
{
if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
{
receiveReq.open("GET", 'SayHello.html', true);
receiveReq.onreadystatechange = handleSayHello;
receiveReq.send(null);
}
}
function handleSayHello()
{
if (receiveReq.readyState == 4)
{
document.getElementById('span_result').innerHTML = receiveReq.responseText;
}
}
</script>
</head>
<body>
<a href="javascript:sayHello();">Say Hello</a><br /><span id="span_result"></span>
</body>
</html>

SayHello.html

hello, world
Ê