Intro to Ajax Fred Stluka Jan 25, 2006

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

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

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

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

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

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

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

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: 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

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

Intro to Ajax Fred Stluka 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

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

Intro to Ajax Fred Stluka 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 Ajax Fred Stluka