1. INNOV-2: Build a Better Web Interface Using AJAX Chris Morgan Pandora Software Systems ChrisMorgan@pandora-sys.com

2. 2 INNOV-2: Build a Better Web Interface Using AJAX Session Goals n Define and Explain AJAX n Demonstrate the benefits of AJAX in web interfaces n Provide basic tools for adding AJAX to web interfaces n Provide examples of AJAX web interfaces

3. 3 INNOV-2: Build a Better Web Interface Using AJAX Advantages of Web Interfaces n Thin Client n Easy Deployment n OS Independence

4. 4 INNOV-2: Build a Better Web Interface Using AJAX Disadvantages of Web Interfaces n User Interface is not as rich n Web pages don’t interact with databases JavaScript / DHTML AJAX

5. 5 INNOV-2: Build a Better Web Interface Using AJAX What is AJAX? n AJAX (Asynchronous JavaScript And XML) is an emerging methodology for adding interactivity between a web page and a server-side process. n AJAX is not a new technology, it is a method of using several existing technologies together, including –HTML/XHTML –CSS –JavaScript –DOM –XML*

6. 6 INNOV-2: Build a Better Web Interface Using AJAX Typical Web Application Architecture User Interface Browser Client Http Server Web Server OpenEdge® Database Database Server WebSpeed® PHP perl interface Etc

7. 7 INNOV-2: Build a Better Web Interface Using AJAX Client User Interface Typical Web Application Architecture Time Server User Activity Processing request html response

8. 8 INNOV-2: Build a Better Web Interface Using AJAX AJAX Application Architecture Http Server Web Server OpenEdge® Database Database Server User Interface Browser Client AJAX Engine

9. 9 INNOV-2: Build a Better Web Interface Using AJAX Client AJAX Engine User Interface AJAX Application Architecture Time Server html response xml response

10. 10 INNOV-2: Build a Better Web Interface Using AJAX Demo

11. 11 INNOV-2: Build a Better Web Interface Using AJAX Anatomy of an AJAX Engine 1 3 2 http request XML

12. 12 INNOV-2: Build a Better Web Interface Using AJAX JavaScript XMLHttpRequest Object req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null);

13. 13 INNOV-2: Build a Better Web Interface Using AJAX XMLHttpRequest Browser Support n Firefox n Safari n Netscape n Opera n Mozilla

14. 14 INNOV-2: Build a Better Web Interface Using AJAX What about Microsoft? Microsoft Internet Explorer still has a 85% market share* *As of Feb 2006

15. 15 INNOV-2: Build a Better Web Interface Using AJAX Microsoft’s XMLHTTP ActiveX Object req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(); }

16. 16 INNOV-2: Build a Better Web Interface Using AJAX Cross-Browser http request script // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null); // branch for IE/Windows ActiveX version } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(); }

17. 17 INNOV-2: Build a Better Web Interface Using AJAX A simple processReqChange script function processReqChange() { // only if req shows complete if (req.readyState == 4) { // only if OK if (req.status == 200 || req.status == 0) { xmlResponse = req.responseXML.documentElement; if (xmlResponse.tagName == 'something') {runSomething(xmlResponse);} } else { alert('There was a problem retrieving' + 'the XML data: ' + req.statusText); } } // processReqChange()

18. 18 INNOV-2: Build a Better Web Interface Using AJAX Putting it all Together: A Threadsafe AJAX Engine function ajaxRequest(url) { function processReqChange() {…} var req = null; // prevent browser caching... url += ((url.indexOf('?') > -1) ? '&' : '?') + 'ajaxid=' + new Date().valueOf(); // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { … // branch for IE/Windows ActiveX version } else if (window.ActiveXObject) { … } } // ajaxRequest( url )

19. 19 INNOV-2: Build a Better Web Interface Using AJAX Demo

20. 20 INNOV-2: Build a Better Web Interface Using AJAX AJAX Examples on the Internet n Google’s gmail interface Google’s gmail interface n Google Suggest Google Suggest n Yahoo! maps Yahoo! maps

21. 21 INNOV-2: Build a Better Web Interface Using AJAX Pros and Cons of AJAX Interfaces n Adds Interactivity n Portability n Easy to implement n Many resources available n Buzzword compliance n Increased server load n Need some JavaScript knowledge n Requires JavaScript or ActiveX

22. 22 INNOV-2: Build a Better Web Interface Using AJAX Summary n AJAX is an emerging methodology for adding interactivity between web pages and databases n AJAX is not difficult to implement! n AJAX Enabled web interfaces are the future of web applications

23. 23 INNOV-2: Build a Better Web Interface Using AJAX More Resources n Exchange n INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue (Ken Wilner) Wednesday, 1:15pm n Exploring User Interfaces BOF Tuesday, 2:15pm n Print n Manning Ajax In Action n O’Reilly JavaScript The Definitive Guide

24. 24 INNOV-2: Build a Better Web Interface Using AJAX More Resources n Internet n http://www.adaptivepath.com/publications/essa ys/archives/000385.php http://www.adaptivepath.com/publications/essa ys/archives/000385.php n http://www.xml.com/ http://www.xml.com/ n http://www.ajaxian.com/ http://www.ajaxian.com/ n http://script.aculo.us/ http://script.aculo.us/ n http://openrico.org/ http://openrico.org/ n http://www.openarchitect.com/pjx/pjax.html http://www.openarchitect.com/pjx/pjax.html

25. 25 INNOV-2: Build a Better Web Interface Using AJAX Questions?

26. 26 INNOV-2: Build a Better Web Interface Using AJAX Thank you ! http://www.pandora-sys.com/innov-2/