Guided By

Er.-----------------------------

Submitted By

-----------------------------
 What is AJAX?
 Benefits
 Real world examples
 How it works
 Code review
 Samples
 Asynchronous JavaScript and XML(AJAX)

 Web development technique for creating web

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

 Improve bandwidth utilization

 Only data which is required is retrieved from the
server
 Google Maps (http://maps.google.com/)
(slidable maps)

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

windows)
 BROSWER CLIENT BROSWER CLIENT
USER INTERFACE USER INTERFACE
JavaScript Call
HTML + CSS data
HTTP request
AJAX ENGINE

HTML+CSS data HTTP request

http transport
XML data
WEB BROSWER
Web and/or XML server

DATA
STORES,BACKEND DATA STORE,BACKEND
PROCESSING PROCESSING

SERVER SITE SERVER SITE

SYSTEM SYSTEM
CLASSIC AJAX
WEB APPLICATION MODEL WEB APPLICATION MODEL
 AJAX runs in your browser

 Works with asynchronous data transfers(HTTP

requests) between the browser and the web server

 Http requests are sent by javascript calls without

having to submit a form

 XML is commonly used as the format for receiving

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

 The javascript function must create an XMLHttpRequest

object which is used to contact the server

 Javascript must determine whether the client is IE or

Firefox

 http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)

 http = new XMLHttpRequest(); (Mozilla)

 Once the XMLHttpRequest object has been created it
must be set up to call the server

 http.open("GET", serverurl, true);

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

 The code above utilizes the XMLHttpRequest object to

contact the server and retrieve server data

 When the response returns the javascript method

jsMethodToHandleResponse can update the page
 Implementation of the javascript method which will be
used to handle the response (Event Handler)

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

 Now the page has communicated with the server without

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

 Possible values for the readyState

State Description

0 The request is not initialized

1 The request has been setup

2 The request has been submitted

3 The request is in process

4 The request is completed

 Usually we are usually only concerned with state 4

 Simply unzip the sample code into a JSP Location
and go to index.jsp

 There are various examples that show some AJAX

functionality

 It is all JSP to make it easy to setup and easy to see

the code.

 The JSPs are generic enough to be easily to

converted to other technologies (.NET or PHP)
 http://en.wikipedia.org/wiki/Ajax_%28progr
amming%29
 http://www.w3schools.com/ajax/default.asp