m What is AJAX?

m Benefits
m Real world examples
m How it works
m Code review
m Samples
m Asynchronous JavaScript and XML(AJAX)

m Web development technique for creating web

applications
m Makes web pages more responsive by
exchanging small amounts of data
m Allows the web page to change its content without
refreshing the whole page
m A web browser technology independent of web
server software
m mproves the user experience
3 Analyzing information typed into browser in real time
3 Provide a richer experience
3 ncreases responsiveness of web pages

m mprove bandwidth utilization

3 xnly data which is required is retrieved from the server
m roogle Maps (http://maps.google.com/) (slidable
maps)

m My Yahoo! (http://my.yahoo.com/) (shuffling

windows)
m AJAX runs in your browser

m Works with asynchronous data transfers(HTTP

requests) between the browser and the web server

m Http requests are sent by javascript calls without

having to submit a form

m XML is commonly used as the format for receiving

server data but plain text may be used as well
m A page element must make a javascript call

m The javascript function must create an

XMLHttpRequest object which is used to contact the
server

m Javascript must determine whether the client is  or

Firefox

m http = new ActiveXxbject("Microsoft.XMLHTTP");

( )

m http = new XMLHttpRequest(); (Mozilla)

m xnce the XMLHttpRequest object has been created it
must be set up to call the server

m http.open("r T", serverurl, true);

m http.onreadystatechange = jsMethodToHandleResponse;
m http.send(null);

m The code above utilizes the XMLHttpRequest object to

contact the server and retrieve server data

m When the response returns the javascript method

jsMethodToHandleResponse can update the page
m mplementation of the javascript method which will be
used to handle the response ( vent Handler)

m function jsMethodToHandleResponse(str)
m {
m //simply take the response returned an update an html
element with the returned value from the server
m document.get lementByd("result").innerHTML = str;
m }

m Now the page has communicated with the server without

having to refresh the entire page
m The XMLHttpRequest readyState property defines the
current state of the XMLHttpRequest object

m Possible values for the readyState

@
  

D The request is not initialized

1 The request has been setup

2 The request has been submitted

3 The request is in process

m Usually
4
we are usually only concerned with state 4
The request is completed
m Simply unzip the sample code into a JSP Location
and go to index.jsp

m There are various examples that show some AJAX

functionality

m t is all JSP to make it easy to setup and easy to

see the code.

m The JSPs are generic enough to be easily to

converted to other technologies (.N T or PHP)
m http://en.wikipedia.org/wiki/Ajax_%28programming
%29
m http://www.w3schools.com/ajax/default.asp