Network Computing Laboratory Ajax - Rich User Experience Initiative - Dec Inseok Hwang

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

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

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

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, er, 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.

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.

Network Computing Laboratory | 7 Korea Advanced Institute of Science and Technology Rich User Experience Initiatives ActiveX Macromedia Flash Java Applets More upcoming.. Ajax: OpenLaszlo: Macromedia Flex

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.

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

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

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

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

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

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

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

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

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

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

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.) Separated CSS & HTML Example My own blog

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 …

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

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:

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.

Network Computing Laboratory | 24 Korea Advanced Institute of Science and Technology Ajax: Asynchronous Javascript and XML XMLHttpRequest Example Code: 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; }

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); }

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 }

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

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

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.

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. Marine Blues

Network Computing Laboratory | 31 Korea Advanced Institute of Science and Technology References “Ajax in Action”