1 / 31

A j ax - Rich User Experience Initiative -

A j ax - Rich User Experience Initiative -. Dec. 7. 2005 Inseok Hwang. 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.

MartaAdara
Download Presentation

A j ax - Rich User Experience Initiative -

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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. Web as Application • The Web was to read and write.

  4. Web as Application • The Web is turning into a place to do something

  5. 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. 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. 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

  8. 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. Interaction and I/O models • A typical remote procedure call (HTTP, too) Local Model Serialization App. protocol Phy. transport App. protocol Serialization Local Model Calling function

  10. Interaction and I/O models • Blocking I/O • Non-blocking I/O

  11. Interaction and I/O models • Multiplexed I/O • Signal-driven I/O

  12. Interaction and I/O models • Asynchronous I/O

  13. 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. Ajax: Asynchronous Javascript and XML • Four defining principles of Ajax • 1. The browser hosts an Application, not Content. Web Browser Server Business Logic User Session Web Page User’s Data Model Web Page Web Page Shared Data Model Exit Page

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

  16. Ajax: Asynchronous Javascript and XML • Four defining principles of Ajax (cont’d) • 2. The server delivers data, not content Data Data Data Presentation Branding Logic Content New Page New Page New Page New Page Time Data New Page Time

  17. 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. Ajax: Asynchronous Javascript and XML • CSS (Cascading Style Sheet) style.css … … Defines Look & Feel index.html … … Defines Structure

  19. 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. 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. Ajax: Asynchronous Javascript and XML • DOM (Document Object Model)

  22. 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

  23. 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. 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. 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. 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. Ajax: Asynchronous Javascript and XML • XMLHttpRequest • Server-side program • Little difference from conventional server program • Example • NIFA

  28. Ajax: Asynchronous Javascript and XML • XMLHttpRequest • Is this something special?? • It’s nothing more than HTTP itself!!!

  29. Ajax: Asynchronous Javascript and XML • XMLHttpRequest • Common Mistakes • XMLHttpRequest is “Asynchronous”. • XMLHttpRequest receives “XML”-formatted response.

  30. 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. 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”

More Related