Ajax - Rich User Experience Initiative -
-
Upload
sampetruda -
Category
Documents
-
view
452 -
download
3
description
Transcript of Ajax - Rich User Experience Initiative -
![Page 1: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/1.jpg)
Network Computing Laboratory
Ajax- Rich User Experience Initiative -
Dec. 7. 2005
Inseok Hwang
![Page 2: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/2.jpg)
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
![Page 3: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/3.jpg)
Network Computing Laboratory | 3
Korea Advanced Institute of Science and Technology
Web as Application
The Web was to read and write.
![Page 4: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/4.jpg)
Network Computing Laboratory | 4
Korea Advanced Institute of Science and Technology
Web as Application
The Web is turning into a place to do something
![Page 5: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/5.jpg)
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.
![Page 6: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/6.jpg)
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.
![Page 7: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/7.jpg)
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
![Page 8: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/8.jpg)
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.
![Page 9: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/9.jpg)
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
![Page 10: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/10.jpg)
Network Computing Laboratory | 10
Korea Advanced Institute of Science and Technology
Interaction and I/O models
Blocking I/O
Non-blocking I/O
![Page 11: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/11.jpg)
Network Computing Laboratory | 11
Korea Advanced Institute of Science and Technology
Interaction and I/O models
Multiplexed I/O
Signal-driven I/O
![Page 12: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/12.jpg)
Network Computing Laboratory | 12
Korea Advanced Institute of Science and Technology
Interaction and I/O models
Asynchronous I/O
![Page 13: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/13.jpg)
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
![Page 14: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/14.jpg)
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
![Page 15: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/15.jpg)
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
![Page 16: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/16.jpg)
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
![Page 17: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/17.jpg)
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
![Page 18: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/18.jpg)
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
![Page 19: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/19.jpg)
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
![Page 20: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/20.jpg)
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 …
![Page 21: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/21.jpg)
Network Computing Laboratory | 21
Korea Advanced Institute of Science and Technology
Ajax: Asynchronous Javascript and XML
DOM (Document Object Model)
![Page 22: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/22.jpg)
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
![Page 23: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/23.jpg)
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.
![Page 24: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/24.jpg)
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;}
![Page 25: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/25.jpg)
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); }}
![Page 26: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/26.jpg)
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}
![Page 27: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/27.jpg)
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
![Page 28: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/28.jpg)
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!!!
![Page 29: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/29.jpg)
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.
![Page 30: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/30.jpg)
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
![Page 31: Ajax - Rich User Experience Initiative -](https://reader033.fdocuments.in/reader033/viewer/2022061212/5495c691ac79593b2e8b4f23/html5/thumbnails/31.jpg)
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”