INNOV-2: Build a Better Web Interface Using AJAX Chris Morgan Pandora Software Systems

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 INNOV-2: Build a Better Web Interface Using AJAX Advantages of Web Interfaces n Thin Client n Easy Deployment n OS Independence

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 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 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 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 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 INNOV-2: Build a Better Web Interface Using AJAX Client AJAX Engine User Interface AJAX Application Architecture Time Server html response xml response

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

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

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 INNOV-2: Build a Better Web Interface Using AJAX XMLHttpRequest Browser Support n Firefox n Safari n Netscape n Opera n Mozilla

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 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 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 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 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 INNOV-2: Build a Better Web Interface Using AJAX Demo

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 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 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 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 INNOV-2: Build a Better Web Interface Using AJAX More Resources n Internet n ys/archives/ php ys/archives/ php n n n n n

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

26 INNOV-2: Build a Better Web Interface Using AJAX Thank you !