Network Computing Laboratory
Ajax- Rich User Experience Initiative -
Dec. 7. 2005
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 Studyhttp://nclab.kaist.ac.kr/soccer
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, 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.
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:
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
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)
Callingfunction
Local Model Serialization App. protocol Phy. transport App. protocol Serialization 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 http://nclab.kaist.ac.kr/soccer http://www.saberang.net/tt/index.php?pl=255
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
WebPage
WebPage
WebPage
ExitPage
Server
UserSession
SharedDataModel
BusinessLogic
User’sDataModel
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
ExitPage
Server
UserSession
SharedDataModel
BusinessLogic
User’sDataModel
ClientApp.
User’sPartialDataModel
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
New Page
New Page
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.)
http://nclab.kaist.ac.kr/google
Separated CSS & HTML Example http://nclab.kaist.ac.kr/soccer 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: http://nclab.kaist.ac.kr/soccer
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:
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;}
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.
http://nclab.kaist.ac.kr/soccer/index.xml Marine Blues http://blogs.law.harvard.edu/tech/rss
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”