1. Intro to Ajax
Fred Stluka
Jan 25, 2006

2. Intro to Ajax Fred Stluka
1/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 Ajax Fred Stluka

3. Intro to Ajax Fred Stluka
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. Intro to Ajax Fred Stluka
Why use Ajax?
Client/Server Apps:
Dynamic data
Static forms, controls, code, etc.
Efficient, but not flexible
Traditional Web Apps:
Dynamic forms, controls, code, etc.
Flexible, but inefficient, and noticeably slow
Ajax Apps:
Static or dynamic forms, controls, code, etc.
Best of both worlds
1/25/2006
Intro to Ajax Fred Stluka

5. Intro to Ajax Fred Stluka
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. Intro to Ajax Fred Stluka
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. Intro to Ajax Fred Stluka
1/25/2006
How to use Ajax?
Simple!
Use the
XMLHttpRequest
Object
1/25/2006
Intro to Ajax Fred Stluka

8. XMLHttpRequest Methods
1/25/2006
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
1/25/2006
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: = 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. Intro to Ajax Fred Stluka
1/25/2006
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. Intro to Ajax Fred Stluka
Demos
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. Intro to Ajax Fred Stluka
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. Intro to Ajax Fred Stluka
Advanced Topics
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 Ajax Fred Stluka