Ajax技术简介与应用.pptVIP

参考资料 [1] Dave Crane Eric Pascarello著.Ajax实战.人民邮电出版社.2006 [2]刘晓华　张健　周慧贞　著.JSP应用开发详解(第三版).电子工业出版社.2007 [3] /wiki/AJAX [4]/index.php/2006/03/29/ajaxasbasncn_erd_ac [5] .Ajax——JS与XML的精彩组合: /blog/index.php/archives/199.html [6] ajax/31503.shtml  * Web应用中用户交互数据都是通过客 * * 引言 如果目前有什么交互设计可以称之为“富有魅力的”，那就是创建Web应用，你能否记起，上一次听到某人被某个产品的交互设计所倾倒，并且不是发生在Ｗeb之上，那是什么时候呢？所有酷的、创新的新项目都是在线的。 －Jesse James Gareett(Ajax之父) 主要内容 Ajax诞生背景 Ajax定义 Ajax有什么不同 Ajax的工作原理 Ajax优点与缺点 Ajax技术应用 Ajax相关技术 Ajax技术诞生背景 World Wide Web最先开始出现的时候，还只不过是科学家用来交流研究成果的场所。如今，它经成为了信息和商务的中心。基于浏览/服务器结构的应用大行其道，甚至连MSN都有了Web版本。 但由于受到ＨＴＭＬ语言和浏览器功能限制，桌面应用所具有的丰富性与响应，似乎是Ｗeb无法实现的。在用户体验上与桌面应用之间的差距一直是Web应用的薄弱环节。 但这种差距正在消失。Google的Google Suggest和Google Maps及Ｍicrosoft MSN Space 做出了相当好的示范。当你在Google Suggest输入时，推荐条目及其有哪些信誉好的足球投注网站到的结果条数几乎立刻显示出来。再看一看Ｇoogle Maps,当你进行放大或缩小操作时，毋顺等待刷新页面，所有的变化立刻显示了出来。　所有这些改变都要归功于Ajax技术的出现。 Ajax的定义 Ajax的定义 Ajax的定义 AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 对Ajax的第一印象 Ajax是新的名字，肯定是一门新技术 Ajax的定义 Ajax不是一项新技术，事实上它是几种各自发展的技术的有力集合。主要包含了以下几种技术 基于web标准（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。 Ajax应用与传统web应用的比较 传统web应用 传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。  传统C/S和N层架构 逻辑 逻辑 服务器（例如：数据库） 数据模式 数据模式 逻辑 逻辑 数据模式 数据模式 中间件层 “服务器” Ajax的定义 传统的Web模型的工作方式： 界面中大部分的用户行为触发一次返回Web服务器的HTTP请求。服务器进行一些处理----获得数据、运行、与不同的系统会话－--然后返回一个HTML页面给客户端。这种方式来自于将Web作为超文本媒体的最初用法。但是对于崇尚用户体验的人来说，适用于超文本的方法不一定适用于软件开发。 在技术上，这种方法很有意义。但它并不有助于友好的用户体验。当服务器在做它的事情的时候，用户在做什么？ 对，等待。而且每进行一步操作，就要等待一次。 录找解决办法： 很明显，假如我们设计含有Web表单的应用，我们不会让用户在那里空等。