Intro to Ajax

What is Ajax?
"Asynchronous
New

JavaScript and XML"

name for an old technique:

JavaScript

+ DHTML + XMLHttpRequest
In use since at least 1997
I've used it since 2000
Finally someone gave it a name
Already enabled in your Web server and browser
Use

JavaScript asynchronously behind the

scenes to load additional data (typically XML)
without discarding and reloading the entire Web
page.

Why use Ajax?

Your

users will soon demand it

Not

just another cool (geeky) technology

Very user-visible effect
Rich UI experience in a Web page
Portable
Plus,

across browsers

all advantages of zero-install Web app

No

install done for this demo

No "DLL Hell

Continued

Why use Ajax?

Client/Server

Apps:

Dynamic data
Static forms, controls, code, etc.
Efficient, but not flexible

Traditional

Web Apps:

Dynamic data
Dynamic forms, controls, code, etc.
Flexible, but inefficient, and noticeably slow

Ajax

Apps:

Dynamic data
Static or dynamic forms, controls, code, etc.
Best of both worlds.

Continued

Why use Ajax?

Geeky

reasons:

Multithreaded

data retrieval from Web servers

Pre-fetch data before needed

Progress indicators
Appearance of speed
Avoids need for setTimeout()

Less

bandwidth required; less server load

Reload partial page, not entire page

Load data only, not even partial page

How much to use Ajax?

As

little or as much as you like

No

need to abandon what you already

do

One

more item in your "bag of tricks"

Start

by jazzing up your existing UI

How to use Ajax?

Simple!
Use the
XMLHttpRequest
Object

XMLHttpRequest Methods

open (method, URL, [async, username, password])

send (params)

Returns headers (name/value pairs) as a string

getResponseHeader (header)

Terminates current request

getAllResponseHeaders ()

Sends request including postable string or DOM object data

abort ()

Assigns destination URL, method, etc.

Returns value of a given header

setRequestHeader (label,value)

Sets Request Headers before sending

Continued..

XMLHttpRequest
Properties
onreadystatechange

Event handler (your code) that fires at each state change

readyState
0 = uninitialized 3 = interactive (some data has been returned)
1 = loading (broken in IE 6.0)
2 = loaded 4 = complete

status

responseText

String version of data returned from server

responseXML

HTTP Status returned from server: 200-299 = OK

XML DOM document of data returned

statusText

Status text returned from server

Simple Example
var req = new XMLHttpRequest();
req.onreadystatechange = myHandler;
req.open("GET", "servlet", true);
req.send("p1=abc");
...
function myHandler() {
if (req.readyState == 4) {
doSomethingWith(req.responseXML);
}
else if (req.readyState == 3) {
showProgressIndicator();
}
}

Demos
Simple
More

demo

demos
Google Suggest
Google Maps
Language translation
Mouse gesture as password
Typing speed as password
Classified ads tied to map
"Mashups"

Security Issues
Can

only hit domain the Web page came

from
Cannot

access a 3rd party Web Service

However:
You can wrap those requests through your own server
User can allow access to specific sites via browser security
settings
IFRAME can access any site (instead of XMLHttpRequest)

Advanced Topics
XSLT and XPath support (Sarissa)
Serializing Java Beans as XML

Serializing Java Beans as JavaScript objects

JSON -- JavaScript Object Notation

2-way Mapping of Java Beans to JavaScript objects

XMLBeans, JAXB, Zeus, Jbind, Castor, Betwixt

DWR -- Direct Web Remoting

Ajax Component Libraries and Toolkits:

Dojo, Prototype, HTC, XBL

Implemented as JSP tag libraries or pure JavaScript

Ajax Frameworks
Ajax Patterns

We also provide classroom and online training classes

For More Details

www.asit.amcsquare.com
Wise Machines India Pvt Ltd
#360, Sri Sai Padma Arcade,
Varthur Main Road,
Ramagondanahalli,
Whitefiled ,Bangalore 560066.
We also having Branches in Hyderabad &
Chennai