1. Network Computing Laboratory Ajax - Rich User Experience Initiative - Dec. 7. 2005 Inseok Hwang

2. Network Computing Laboratory | 2 Korea Advanced Institute of Science and Technology Outline Web as Application Limitation of Conventional HTML & HTTP Rich User Experience Initiatives “Interaction” and I/O models Ajax = Asynchronous Javascript & XML Javascript CSS DOM XMLHttpRequest References Case Study http://nclab.kaist.ac.kr/soccer

3. Network Computing Laboratory | 3 Korea Advanced Institute of Science and Technology Web as Application The Web was to read and write.

4. Network Computing Laboratory | 4 Korea Advanced Institute of Science and Technology Web as Application The Web is turning into a place to do something

5. Network Computing Laboratory | 5 Korea Advanced Institute of Science and Technology Web as Application It is becoming more and more application. Transient application vs. Sovereign application (by Alan Cooper) Transient: might be used everyday, but in short bursts and mostly for secondary activities Dictionary, emailer, instant messenger, etc. Sovereign: Gets user’s full attention for a long time Word processor, Eclipse, Photoshop, etc. Many of currently established web-hosted applications are transient. Shopping malls, Search engines, eBanking, etc. Solutions based on web-pages are not enough for sovereign uses.

6. Network Computing Laboratory | 6 Korea Advanced Institute of Science and Technology Limitation of Conventional HTML & HTTP HTML is basically for presenting documents. HTTP is basically for requesting & delivering documents. The “Units” of documents are “pages”. (so is HTTP) Documents are static. HTML is declarative. HTTP is synchronous.

7. Network Computing Laboratory | 7 Korea Advanced Institute of Science and Technology Rich User Experience Initiatives ActiveX Macromedia Flash Java Applets More upcoming.. Ajax: www.zimbra.com http://reader.google.com www.live.com www.meebo.com http://panic.com/goods/ www.writely.com OpenLaszlo: http://www.laszlosystems.com/lps/sample-apps/amazon/amazon2.lzx?lzt=html http://www.laszlosystems.com/lps/sample-apps/amazon/amazon2.lzx?lzt=html Macromedia Flex

8. Network Computing Laboratory | 8 Korea Advanced Institute of Science and Technology Interaction and I/O models Interaction in Real Worlds Action  Reaction “A successful computer UI needs to mimic our expectations of the real world at the very basic level.” We expect “immediate response” when we push, pull, touch, etc. Slight delays can be annoying, distracting user’s attention.

9. Network Computing Laboratory | 9 Korea Advanced Institute of Science and Technology Interaction and I/O models A typical remote procedure call (HTTP, too) Calling function Local ModelSerializationApp. protocolPhy. transportApp. protocolSerialization Local Model

10. Network Computing Laboratory | 10 Korea Advanced Institute of Science and Technology Interaction and I/O models Blocking I/O Non-blocking I/O

11. Network Computing Laboratory | 11 Korea Advanced Institute of Science and Technology Interaction and I/O models Multiplexed I/O Signal-driven I/O

12. Network Computing Laboratory | 12 Korea Advanced Institute of Science and Technology Interaction and I/O models Asynchronous I/O

13. Network Computing Laboratory | 13 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML Ajax is not a new technology, but a synergy of existing technology. Ajax = Asynchronous I/O between server and client (XMLHttpRequest) Client-side dynamicity by DHTML (Javascript, CSS, DOM) XML-formatted data delivery Two Self-developed Ajax Examples http://nclab.kaist.ac.kr/soccer http://www.saberang.net/tt/index.php?pl=255

14. Network Computing Laboratory | 14 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML Four defining principles of Ajax 1. The browser hosts an Application, not Content. Web Browser Web Page Web Page Web Page Exit Page Server User Session Shared Data Model Business Logic User’s Data Model

15. Network Computing Laboratory | 15 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML Four defining principles of Ajax 1. The browser hosts an Application, not Content. (cont’d) Web Browser Exit Page Server User Session Shared Data Model Business Logic User’s Data Model Client App. User’s Partial Data Model Deliver Application

16. Network Computing Laboratory | 16 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML Four defining principles of Ajax (cont’d) 2. The server delivers data, not content Time Data New Page Time Data New Page Content Branding Data Logic Presentation Data

17. Network Computing Laboratory | 17 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML Four defining principles of Ajax (cont’d) 3. User interaction with the application can be fluid and continuous 4. This is real coding and requires discipline

18. Network Computing Laboratory | 18 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML CSS (Cascading Style Sheet) style.css … index.html … Defines Look & Feel Defines Structure

19. Network Computing Laboratory | 19 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML CSS (Cascading Style Sheet) Advantages Cleaner, Compacter HTML High Reusability of HTML codes More Program-friendly Easy maintenance and upgrades Higher readability, intuitive HTML Examples Classic Example (mixed HTML & styles, table as layout, etc.) http://nclab.kaist.ac.kr/google Separated CSS & HTML Example http://nclab.kaist.ac.kr/soccer My own blog

20. Network Computing Laboratory | 20 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML DOM (Document Object Model) A structural representation of a document document html head title meta body div text div …

21. Network Computing Laboratory | 21 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML DOM (Document Object Model)

22. Network Computing Laboratory | 22 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML DOM (Document Object Model) DOM manipulation by Javascript document.getElementById(“id”) document.getElementByTagName(“tag”) something.childNodes something.parentNode document.createElement(“...”) document.createTextNode(“…”) something.appendChild() something.className something.style (Dark Side ^-_-^) something.innerHTML Example: http://nclab.kaist.ac.kr/soccerhttp://nclab.kaist.ac.kr/soccer

23. Network Computing Laboratory | 23 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest Enabler of asynchronous request & response An API member of XMLHTTP object History Originally designed by M$ as an ActiveX object since IE 5.0, enabled with Javascript, Vbscript, etc. Others followed: Mozilla 1.0, Safari 1.2, Opera 8.0 General step: 1. Create an XMLHttpRequest object 2. Register a callback handler 3. Make a asynchronous request to server 4. When completed, the callback handler is invoked.

24. Network Computing Laboratory | 24 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest Example Code: http://nclab.kaist.ac.kr/soccer Fun with Google Map API More Formally, function getXMLHTTPRequest(){ var xRequest = null; if (window.XMLHttpRequest){ xRequest = new XMLHttpRequest();// Mozilla, Safari }else if (typeof ActiveXObject != “undefined”){ xRequest = new ActiveXObject(“Microsoft.XMLHTTP”);// IE } return xRequest; }

25. Network Computing Laboratory | 25 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest More Formally, var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOADING=1; var READY_STATE_LOADED=2; var READY_STATE_INTERACTIVE=3; var READY_STATE_COMPLETE=4; var req; function sendRequest(url, params, HttpMethod){ if (!HttpRequest){ HttpRequest=“Get”; } req = getXMLHTTPRequest(); if (req){ req.onreadystatechange = onReadyStateChange; req.oepn(HttpMethod, url, true); req.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); req.send(params); }

26. Network Computing Laboratory | 26 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest More Formally, In NIFA example, we do presentation of the received information by visualizing hidden layer. function onReadyStateChange(){ var ready=req.readyState; var data=null; if (ready==READY_STATE_COMPLETE){ data=req.responseText; }else{ data=“loading…[“ + ready + “]”; } // do something with the data }

27. Network Computing Laboratory | 27 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest Server-side program Little difference from conventional server program Example NIFA

28. Network Computing Laboratory | 28 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest Is this something special?? It’s nothing more than HTTP itself!!!

29. Network Computing Laboratory | 29 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest Common Mistakes XMLHttpRequest is “Asynchronous”. XMLHttpRequest receives “XML”-formatted response.

30. Network Computing Laboratory | 30 Korea Advanced Institute of Science and Technology Bonus RSS (Really Simple Syndication) “Push” has been a dream in web technology community for a long time. However, HTTP is basically “Pull” technology. RSS is a trick to implement push technology as conventional HTTP. http://nclab.kaist.ac.kr/soccer/index.xml Marine Blues http://blogs.law.harvard.edu/tech/rss

31. Network Computing Laboratory | 31 Korea Advanced Institute of Science and Technology References http://www.devguru.com http://www.w3schools.com/ http://del.icio.us/saber97/ajax http://del.icio.us/saber97/css http://del.icio.us/saber97/javascript “Ajax in Action”