ajax - rich user experience initiative -

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



Web as Application

The Web was to read and write.



Web as Application

The Web is turning into a place to do something



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.



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.



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



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.




A typical remote procedure call (HTTP, too)

Callingfunction

Local Model Serialization App. protocol Phy. transport App. protocol Serialization Local Model




Blocking I/O

Non-blocking I/O




Multiplexed I/O

Signal-driven I/O




Asynchronous I/O



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




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




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




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




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




CSS (Cascading Style Sheet)

style.css……

index.html……

Defines Look & Feel

Defines Structure




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




DOM (Document Object Model) A structural representation of a document

document html

head title meta

body div text div …




DOM (Document Object Model)




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




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.




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




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




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}




XMLHttpRequest Server-side program

Little difference from conventional server program

Example NIFA




XMLHttpRequest Is this something special??

It’s nothing more than HTTP itself!!!




XMLHttpRequest Common Mistakes

XMLHttpRequest is “Asynchronous”. XMLHttpRequest receives “XML”-formatted response.



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



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”