高级Meb技术 Ajax Introduction
高级Web技术 Ajax Introduction
Characteristics of Conventional web Applications “ Click,wait, and refresh” user interaction Page refreshes from the server needed for all events, data submissions, and navigation The user has to wait for the response Synchronous request/response communication model Page-driven: Workflow is based on pages Page-navigation logic is determined by the server
Characteristics of Conventional Web Applications ◼ “Click, wait, and refresh” user interaction ◼ Page refreshes from the server needed for all events, data submissions, and navigation ◼ The user has to wait for the response ◼ Synchronous “request/response” communication model ◼ Page-driven: Workflow is based on pages ◼ Page-navigation logic is determined by the server
Issues of Conventional Web Application Slow response Loss of operational context during refresh a Loss of information on the screen Loss of scrolled position a No instant feedback' s to user activities a user has to wait for the next page These are the reasons why Rich Internet Application(RIA) technologies were born
Issues of Conventional Web Application ◼ Slow response ◼ Loss of operational context during refresh ◼ Loss of information on the screen ◼ Loss of scrolled position ◼ No instant feedback's to user activities ◼ A user has to wait for the next page ◼ These are the reasons why Rich Internet Application (RIA) technologies were born
AJAX Ajax: A New Approach to Web Applications .http://www.adaptivepath.com/publications/essayslarchives/000385.php adaptive path blog about us services events publications products contact home publications eports latest essay essay archives newsletter reading list Ajax: A New Approach to Web Applications by Jesse James Garrett ecent Essays Sarah Nelson Interviews If anything about current interaction design can be Scott Berkun at MX San called"glamorous, it's creating Web applications After all, when was the last time you heard someone February 22, 2007 rave about the interaction design of a product that Nine Adaptive Pathers Share Resolut cool, innovative new projects are online January 4, 2007 Despite this, Web interaction designers can't help be nterview with Tim Brown, feel a little envious of our colleagues who create desktop software, Desktop applications have a anwary 3, 2007 richness and responsiveness that has seemed out of Tagging ys. Cataloging each on the Web. The same city that enable What It's All About the Web's rapid proliferation also creates a g November 30, 2006 ovide and th esse James Garrett is resident and a founder of experiences users can get from a desktop Corporate Intranet Adaptive Path. He is the author November 10 2006 of the wide/y -referenced book at gap is closing. Take a look at Google Suggest. Essay Archives》
AJAX ◼ Ajax: A New Approach to Web Applications ◼ http://www.adaptivepath.com/publications/essays/archives/000385.php
AJAX Asynchronous JavaScript XML standards-based presentation using XHTML and CSS dynamic display and interaction using the Document object Model; data interchange and manipulation using xml and xslt asynchronous data retrieval using XmlhTtprequEst; and JavaScript binding everything together
AJAX ◼ Asynchronous JavaScript + XML ◼ standards-based presentation using XHTML and CSS; ◼ dynamic display and interaction using the Document Object Model; ◼ data interchange and manipulation using XML and XSLT; ◼ asynchronous data retrieval using XMLHttpRequest; ◼ and JavaScript binding everything together
Web浏览器 AJAX 定义外观,CS*样式 Javascript 逻辑 与Web服务 定义内容 器通讯 和层 XmlhttPrequest DOM 对象 web服务 器
AJAX Web浏览器 Javascript 逻辑 CSS样式 XMLHttpRequest DOM 对象 Web 服 务 器 与 Web服 务 器通讯 定义外观 定义内容 和层
AJAX 客户端浏览器 客户端浏览器 用户界面 用户界面 Java Script call HTML+CSS data Http request Transport HTML+CSS data Aax引擎 Http request Transport Xml data Web服务器 Web和或XML服务器 数据存储,支持 数据存储,支持 处理,遗留系统 处理,遗留系统 服务器端系统 服务器端系统 传统的Web应用模型 Ajax Web应用模型
AJAX
classic web application model(synchronous) client user activity user activity user activity AJAX Ime system processing system processing server Ajax web application model (asynchronous) client i browser UI 二== Ajax engine dient-side processing time server-side server-side server-side processing processing server
AJAX
AJAX DHTML plus Asynchronous communication capability through XmlhTtpreQuesT Pros Most viable Ria technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No need to download code& no plug-in required Cons Still browser incompatibilit JavaScript is hard to maintain and debug
AJAX ◼ DHTML plus Asynchronous communication capability through XMLHttpRequest ◼ Pros ◼ Most viable RIA technology so far ◼ Tremendous industry momentum ◼ Several toolkits and frameworks are emerging ◼ No need to download code & no plug-in required ◼ Cons ◼ Still browser incompatibility ◼ JavaScript is hard to maintain and debug
Why AJAX? a Intuitive and natural user interaction No clicking required Mouse movement is a sufficient event trigger Partial screen update"replaces the"click, wait, and refresh"user interaction model Only user interface elements that contain new information are updated (fast response) The rest of the user interface remains displayed without interruption(no loss of operational context) Data-driven(as opposed to page-driven) Ul is handled in the client while the server provides data
Why AJAX? ◼ Intuitive and natural user interaction ◼ No clicking required ◼ Mouse movement is a sufficient event trigger ◼ "Partial screen update" replaces the "click, wait, and refresh" user interaction model ◼ Only user interface elements that contain new information are updated (fast response) ◼ The rest of the user interface remains displayed without interruption (no loss of operational context) ◼ Data-driven (as opposed to page-driven) ◼ UI is handled in the client while the server provides data
