1ax技术介绍 Characteristic Customized System 复旦太平洋金融05软工设计开发 2008 農歷戊子年
Characteristic Customized System ——复旦太平洋金融05软工 设计开发
Ajax的诞生 LOGO ☆2005年2月, Adaptive Path公司的 Jesse James Garret在网上发表 了一篇名为《Ajax:一种Web应用程序开发的新方法》 Google Suggest和 Google Maps就是这种新型Web应用程序的两 个例子,在 Adaptive Path公司,我们将这种理念称为Ajax。这就是 Asynchronous(异步) JavaScript XML的简写,它预示着Web可 能将发生一次根本性的变革。 o可 2 www.nordridesign.com
LOGO www.nordridesign.com ☆ 2005年2月，Adaptive Path公司的Jesse James Garrett在网上发表 了一篇名为《Ajax：一种Web应用程序开发的新方法》 ——Google Suggest和Google Maps就是这种新型Web应用程序的两 个例子，在Adaptive Path公司，我们将这种理念称为Ajax。这就是 Asynchronous（异步）JavaScript + XML的简写，它预示着Web可 能将发生一次根本性的变革。 2 Ajax的诞生
两个例子 LOGO ☆ Google Suggest:搜索词条提示功能 在搜索框里输入关键词(中英文皆可)的时候,会以下拉菜单的形 式岀现关键词扩展提示,词条是按照关键词的流行程度进行排序的。 flash games 141.000,000 results flashget 11.600. 000 results flash player download 106,000000 results flash player 385.000000 results flash game 120,000000resu|t flash earth 48 400.000 results flash tutorials 64.600,000 results flash flash revolution 6,730,000resu|ts ☆ Google Map: 3 www.nordridesign.com
LOGO www.nordridesign.com ☆ Google Suggest：搜索词条提示功能 在搜索框里输入关键词（中英文皆可）的时候，会以下拉菜单的形 式出现关键词扩展提示，词条是按照关键词的流行程度进行排序的。 两个例子 3 ☆ Google Map：
Ajax技术 LOGO Asynchronous JavaScript and XML 一异步 JavaScript-与XML ☆它不是一种单独的技术,实际上它是几种技术的结合使用。每种技术 本身都有其独特之处,把它们结合在一起就成为了一个功能强大的 “新技术”—Ajax ☆Aax特点 1.基于标准的表示技术,使用 XHTML与CSS 2.动态显示和交互技术,使用 Document Object Model(文档对象模型 3.数据互换和操作技术,使用XML与XSLT 4.异步数据获取技术,使用 XmlhTtpreqUes 5而 Java Script将以上的一切都结合在一起 www.nordridesign.com
LOGO 4 www.nordridesign.com Ajax 技术 ——Asynchronous JavaScript and XML ——异步JavaScript与XML ☆它不是一种单独的技术，实际上它是几种技术的结合使用。每种技术 本身都有其独特之处，把它们结合在一起就成为了一个功能强大的 “新技术”——Ajax ☆Ajax特点： ⒈ 基于标准的表示技术，使用XHTML与CSS ⒉ 动态显示和交互技术，使用Document Object Model(文档对象模型) ⒊ 数据互换和操作技术，使用XML与XSLT ⒋ 异步数据获取技术，使用XMLHttpRequest ⒌ 而JavaScript 将以上的一切都结合在一起
传统Web应用模型 VS Ajax模型 LOGO 客户端浏览器 客户端浏览器 用户界面 用户界面 Java Script call HTML+CSS data Http request Transport HTML+CSS data Ajax引擎 Http request Transport Xml data Web服务器 Web和/或XML服务器 数据存储,支持 数据存储,支持 处理,遗留系统 处理,遗留系统 服务器端系统 服务器端系统 传统的Web应用模型 Ajax Web应用模型 www.nordridesign.com
LOGO www.nordridesign.com 传统Web应用模型 VS Ajax模型 5
传统Web应用模型(同步) 客户端 用户行为 用户行为 用户行为 传统Web 89g 同步交互 系统处理 系统处理 服务器 与 Ajax Web应用模型(异步) 客户端 Aj browser用户界面 lax 用户行为 异步交互 Ajax引擎 客户端处理 时间 服务器 服务器 服务器 服务器 服务器 端处理 端处理 端处理 端处理
LOGO 6 www.nordridesign.com 同步交互与异步交互 传统Web Ajax
Ajax的优势 LOGO 减轻服务器的负担。AJAX的原则是“按需取数据”,可以最大程度 的减少冗余请求,和响应对服务器造成的负担。 无刷新更新页面,减少用户心理和实际的等待时间。特别的,当要读 取大量的数据的时候,不用像 Reload那样出现白屏的情况,AJAX使 用 XmlhtTp对象发送请求并得到服务器响应,在不重新载入整个页 面的情况下用 Javascript操作DOM最终更新页面。所以在读取数据 的过程中,用户所面对的不是白屏,是原来的页面内容,只有当数据 接收完毕之后才更新相应部分的内容。这种更新是瞬间的,用户几乎 感觉不到。 带来更好的用户体验。 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的 能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。 可以调用外部数据。 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。 进一步促进页面呈现和数据的分离。 www.nordridesign.com
LOGO www.nordridesign.com Ajax 的优势 • 减轻服务器的负担。AJAX 的原则是“按需取数据”，可以最大程度 的减少冗余请求，和响应对服务器造成的负担。 • 无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读 取大量的数据的时候，不用像Reload 那样出现白屏的情况，AJAX 使 用XMLHTTP 对象发送请求并得到服务器响应，在不重新载入整个页 面的情况下用Javascript 操作DOM 最终更新页面。所以在读取数据 的过程中，用户所面对的不是白屏，是原来的页面内容，只有当数据 接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎 感觉不到。 • 带来更好的用户体验。 • 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的 能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。 • 可以调用外部数据。 • 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 • 进一步促进页面呈现和数据的分离。 7
谁在用Ajax LOGO Google当仁不让是表率: Suggest、Gmai、Maps、Okut Amazon的A9com搜索引擎 微软: MSN Space、 Atlas Framework( ASP. NET 垂 English Deutsch ASPnet Home Get Started Lel Clickriver Home AJAX Innovations in Search Technologies A9 can helps peopl find what th行ywan年 wddd的Q<m的计 www.nordridesign.com
LOGO www.nordridesign.com 谁在用Ajax • Google 当仁不让是表率：Suggest、Gmail、Maps、Orkut ... • Amazon 的A9.com 搜索引擎 • 微软：MSN Space、Atlas Framework（ASP.NET） 8
Ajax的缺陷 LOGO AJAX大量使用了 Javascript和AJAX引擎,而这个取决于浏览器的 支持。E5.0及以上、Mo训ia1.0、 Netscape7及以上版本才支持 Mozl|a虽然也支持AJA,但是提供 XmlhTtpreqUest的方式不 样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。 你不应该仅仅因为一个产品目前的市场占有率,就相信他能够永远垄断这个市 场。《网站重构》 AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后 退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是 已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 对流媒体的支持没有 FLASH、 Java Applet好。 些手持设备(如手机、PDA等)现在还不能很好的支持Aax www.nordridesign.com
LOGO www.nordridesign.com Ajax 的缺陷 • AJAX 大量使用了Javascript 和AJAX 引擎，而这个取决于浏览器的 支持。IE5.0 及以上、Mozilla1.0、NetScape7 及以上版本才支持， Mozilla 虽然也支持AJAX，但是提供XMLHttpRequest 的方式不一 样。所以，使用AJAX 的程序必须测试针对各个浏览器的兼容性。 —— 你不应该仅仅因为一个产品目前的市场占有率，就相信他能够永远垄断这个市 场。《网站重构》 • AJAX 更新页面内容的时候并没有刷新整个页面，因此，网页的后 退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是 已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 • 对流媒体的支持没有FLASH、Java Applet 好。 • 一些手持设备（如手机、PDA 等）现在还不能很好的支持Ajax。 9
XmlhTtpreqUest对象 LOGO XmlhTtpreqUesT是 XmlhtTp组件的对象,通过这个对象,AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用 每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做 这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的 时间。 E50开始:使用ⅩMlhttpActivex组件扩展自身的功能,不用 从当前的Web页面导航就可以直接传输数据到服务器或者从服务器 接收数据。 Mozilla1.0以及 NetScape7:是创建继承XML的代理类 ⅩMlhttpRequEst; The hello World of ajax 10 www.nordridesign.com
LOGO www.nordridesign.com XMLHttpRequest对象 • XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用 每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做 ；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的 时间。 • IE5.0 开始：使用 XMLHTTP ActiveX 组件扩展自身的功能，不用 从当前的Web 页面导航就可以直接传输数据到服务器或者从服务器 接收数据。 • Mozilla1.0 以及NetScape7：是创建继承XML 的代理类 XMLHttpRequest； • The Hello World of AJAX 10