Intro to Ajax
Fred Stluka
Jan 25, 2006
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 AjaxFred Stluka
2
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 AjaxFred Stluka
3
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 AjaxFred Stluka
4
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 AjaxFred Stluka
5
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 AjaxFred Stluka
6
How to use Ajax?
Simple!
Use the
XMLHttpRequest
Object
1/25/2006
Intro to AjaxFred Stluka
7
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 AjaxFred Stluka
8
XMLHttpRequest Properties
•
onreadystatechange
– Event handler (your code) that fires at each state change
•
readyState
0 = uninitialized
1 = loading
2 = loaded
•
3 = interactive (some data has been returned)
(broken in IE 6.0)
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 AjaxFred Stluka
9
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 AjaxFred Stluka
10
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 AjaxFred Stluka
11
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 AjaxFred Stluka
12
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
1/25/2006
Intro to AjaxFred Stluka
13