1. Ajax ( Asynchronous JavaScript + XML ) Information Science and Knowledge Systems: Semantic Web Spring 2006 / Dr. Don Turnbull Presented by David Kim

2. April 17, 2006 2Ajax Pushing desktop software functionality into the browser Pushing desktop software functionality into the browser Interactive, state-dependent controls & functionality Interactive, state-dependent controls & functionality “Save As…” inside the browser “Save As…” inside the browser Jesse James Garrett says: Jesse James Garrett says: standards-based presentation using XHTML and CSS standards-based presentation using XHTML and CSS dynamic display and interaction using the Document Object Model dynamic display and interaction using the Document Object Model data interchange and manipulation using XML and XSLT data interchange and manipulation using XML and XSLT asynchronous data retrieval using XMLHttpRequest asynchronous data retrieval using XMLHttpRequest JavaScript binding everything together. JavaScript binding everything together. ( Source: class material ) ( Source: class material )

3. April 17, 2006 3 AJAX Model

4. April 17, 2006 4 How AJAX is different Classic Model Classic Model Source: developer.com Source: developer.comdeveloper.com

5. April 17, 2006 5 How AJAX is different (cont’d) Ajax Model Ajax Model Source: developer.com Source: developer.comdeveloper.com eg

6. April 17, 2006 6History Microsoft’s Remote Scripting Microsoft’s Remote Scripting Microsoft.XMLHTTP COM Microsoft.XMLHTTP COM e.g.) Outlook Web Access e.g.) Outlook Web AccessOutlook Web AccessOutlook Web Access Mail2Web.com Mail2Web.comMail2Web.com Hidden Frame Hidden Frame Hidden IFrame Hidden IFrame BigRedChair BigRedChair BigRedChair

7. April 17, 2006 7 Browsers that support Ajax Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported) Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported) MicrosoftInternet Explorer MicrosoftInternet Explorer Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon and Netscape version 7.1 and above Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon and Netscape version 7.1 and above GeckoMozilla Firefox SeaMonkeyCaminoFlockEpiphanyGaleon Netscape GeckoMozilla Firefox SeaMonkeyCaminoFlockEpiphanyGaleon Netscape Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, Apple Safari version 1.2 and above, and Nokia's Web Browser for S60 version 3rd edition and above Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, Apple Safari version 1.2 and above, and Nokia's Web Browser for S60 version 3rd edition and aboveKHTMLAPIKonqueror AppleSafariNokiaWeb Browser for S60KHTMLAPIKonqueror AppleSafariNokiaWeb Browser for S60 Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above Opera Mobile Browser Opera Mobile Browser

8. April 17, 2006 8 Browsers that do not support Ajax Opera 7 and below Opera 7 and below Microsoft Internet Explorer 4.0 and below Microsoft Internet Explorer 4.0 and below Text-based browsers like Lynx and Links Text-based browsers like Lynx and LinksLynxLinksLynxLinks Browsers for the visually impaired (speech-synthesising, braille) Browsers for the visually impaired (speech-synthesising, braille)visually impairedvisually impaired

9. April 17, 2006 9 Why is it popular Google helped popularize Google helped popularize Increase Usability of Web Applications Increase Usability of Web Applications Rich Internet Applications without Flash Rich Internet Applications without Flash Save Bandwidth Save Bandwidth Download only data you need Download only data you need Faster Interfaces (sometimes) Faster Interfaces (sometimes)

10. April 17, 2006 10 Why is it bad? Breaks back button support Breaks back button support URL’s don’t change at state changes URL’s don’t change at state changes Cross Browser Issues can be pain Cross Browser Issues can be pain Can’t access domains other than the calling domain Can’t access domains other than the calling domain May be disabled (for security reasons) or not available on some browsers May be disabled (for security reasons) or not available on some browsers

11. April 17, 2006 11 How and When to Use AJAX Highly interactive applications Highly interactive applications Parts of pages Parts of pages Intranets Intranets Online wizards Online wizards Data input & validation Data input & validation Data visualization Data visualization

12. April 17, 2006 12 Examples of Ajax GMail / Google Maps/Suggest/Personalized Home GMail / Google Maps/Suggest/Personalized Home Flickr Flickr Backpack Backpack Amazon Diamond Search / Amazon A9 Amazon Diamond Search / Amazon A9 Basecamp Basecamp map.search.ch map.search.ch map.search.ch Writely Writely Writely Instant Domain Search Instant Domain Search Instant Domain Search Instant Domain Search Netflix top 100 Netflix top 100 Netflix top 100 Netflix top 100

13. April 17, 2006 13 Flash vs. Ajax No plug-in needed for Ajax No plug-in needed for Ajax Flash development cost more momey Flash development cost more momey Flash generally has slower page load time Flash generally has slower page load time ActionScript doesn’t have cross browser issues ActionScript doesn’t have cross browser issues Flash can access other domain with crossdomain.xml file Flash can access other domain with crossdomain.xml file Flash example Flash example The Broadmoor The Broadmoor The Broadmoor The Broadmoor Laszlo Laszlo Laszlo

14. April 17, 2006 14XMLHttpRequest A JavaScript Class that lets us make asynchronous HTTP requests from JavaScript A JavaScript Class that lets us make asynchronous HTTP requests from JavaScript Make an HTTP request from a JavaScript event Make an HTTP request from a JavaScript event A callback JavaScript function is invoked at each state of the HTTP request and response A callback JavaScript function is invoked at each state of the HTTP request and response Take three arguments Take three arguments xmlhttp.open (Request Type, URL, Async) xmlhttp.open (Request Type, URL, Async) e.g.) xmlhttp.open (“GET”, “test.html”, true);

15. April 17, 2006 15 XMLHttpRequest (cont’d) xmlhttp.open(“GET”,”test.html”,false); xmlhttp.send(null); xmlhttp.open(“GET”,”test.html”,false); xmlhttp.send(null); if(xmlhttp.status == 200){ alert(xmlhttp.responseText); } xmlhttp.open(“GET”,”test.html”,true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { alert(xmlhttp.responseText); xmlhttp.open(“GET”,”test.html”,true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { alert(xmlhttp.responseText); } } } xmlhttp.send(null); xmlhttp.send(null);

16. April 17, 2006 16 XMLHTTPRequest methods void abort() void abort() String getAllresponseHeaders() String getAllresponseHeaders() String getResponseHeader (String key) String getResponseHeader (String key) void open (String method, String URL, ashynchronous boolean) void open (String method, String URL, ashynchronous boolean) void send(String body) void send(String body) void setRequestHeader (String key, HTTPString value) void setRequestHeader (String key, HTTPString value)

17. April 17, 2006 17 XMLHTTPRequest properties onreadystatechange onreadystatechange readystate readystate 0 = unintilaized 0 = unintilaized 1 = loading 1 = loading 2 = loaded 2 = loaded 3 = interactive 3 = interactive 4 = complete 4 = complete responseText responseText responseXML responseXML Status Status statusText statusText

18. April 17, 2006 18 Third-party libraries and frameworks Cross-browser libraries Cross-browser libraries X library X library X library X library Sarissa Sarissa Sarissa Prototype Prototype Prototype Widgets and widget suites Widgets and widget suites Scriptaculous Scriptaculous Scriptaculous Rico Rico Rico Application frameworks Application frameworks DWR, JSON, JPSpan (down), and SAJAX DWR, JSON, JPSpan (down), and SAJAX DWRJSONSAJAX DWRJSONSAJAX Backbase Backbase Backbase Echo2 Echo2 Echo2 Ruby on Rails Ruby on Rails Ruby on Rails Ruby on Rails Ajax.Net Ajax.Net Ajax.Net

19. April 17, 2006 19Conclusion Ajax can be a Rich UI solution for the Semantic Web as either being a View/Controller or being one whole MVC itself Ajax can be a Rich UI solution for the Semantic Web as either being a View/Controller or being one whole MVC itselfMVC Alternatives Alternatives Flash / Java (web start) Flash / Java (web start)Java (web start)Java (web start) Decide whether to use Ajax with what tools Decide whether to use Ajax with what tools

20. April 17, 2006 20References Wikipedia Wikipedia Wikipedia Professional Ajax Professional Ajax Professional Ajax Professional Ajax Adaptive Path Adaptive Path Adaptive Path Adaptive Path Ajax Presentation Outline Ajax Presentation Outline Ajax Presentation Outline Ajax Presentation Outline Ajax vs. Flash Ajax vs. Flash Ajax vs. Flash Ajax vs. Flash IBM developerWorks IBM developerWorks IBM developerWorks IBM developerWorks Telerik.com Telerik.com Telerik.com Jibbering.com Jibbering.com Jibbering.com

21. April 17, 2006 21 Questions ?