Intro to Ajax

Fred Stluka
Jan 25, 2006
1/25/2006 Intro to Ajax Fred Stluka 2
What is Ajax?
"Asynchronous JavaScript and XML"
New 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.
1/25/2006 Intro to Ajax Fred Stluka 3
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 across browsers
Plus, all advantages of zero-install Web app
No install done for this demo
No "DLL Hell"
1/25/2006 Intro to Ajax Fred Stluka 4
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
1/25/2006 Intro to Ajax Fred Stluka 5
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
1/25/2006 Intro to Ajax Fred Stluka 6
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
1/25/2006 Intro to Ajax Fred Stluka 7
How to use Ajax?

Simple!

Use the
XMLHttpRequest
Object
1/25/2006 Intro to Ajax Fred Stluka 8
XMLHttpRequest Methods
open (method, URL, [async, username, password])
Assigns destination URL, method, etc.
send (params)
Sends request including postable string or DOM object data
abort ()
Terminates current request
getAllResponseHeaders ()
Returns headers (name/value pairs) as a string
getResponseHeader (header)
Returns value of a given header
setRequestHeader (label,value)
Sets Request Headers before sending
1/25/2006 Intro to Ajax Fred Stluka 9
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
HTTP Status returned from server: 200-299 = OK
responseText
String version of data returned from server
responseXML
XML DOM document of data returned
statusText
Status text returned from server
1/25/2006 Intro to Ajax Fred Stluka 10
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();
}
}
1/25/2006 Intro to Ajax Fred Stluka 11
Demos
http://bristle.com/~fred/#ajax
Simple demo
More demos
Google Suggest
Google Maps
Language translation
Mouse gesture as password
Typing speed as password
Classified ads tied to map
"Mashups"
1/25/2006 Intro to Ajax Fred Stluka 12
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)
1/25/2006 Intro to Ajax Fred Stluka 13
Advanced Topics
http://bristle.com/~fred/#ajax
XSLT and XPath support (Sarissa)
Serializing Java Beans as XML
XMLBeans, JAXB, Zeus, Jbind, Castor, Betwixt
Serializing Java Beans as JavaScript objects
JSON -- JavaScript Object Notation
2-way Mapping of Java Beans to JavaScript objects
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