一种新的胖客户端技术——ajax(一)

1、一种新的胖客户端技术Ajax(一)一、选题目的和意义选题的目的：随着Web2.0时代的到来，Ajax已经成为人们谈论最多的技术术语。Ajax是异步java script 和XML（Asynchronous java script and XML）的英文缩写。它是2005年2月才诞生但是现在已经炙手可热的一项全新技术。这项新技术可以提供高度交互的Web应用，给予用户更丰富的页面浏览体验。Ajax也可以说是一种方法，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的java script、DHTML和与服务器异步通信的组合。而且启用这种方法非常简单：利用一个Ajax框

2、架构造一个应用程序，它直接从浏览器与后端服务进行通信。这样就可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。这项技术也改变了传统的瘦客户端存在的弊端。通过浏览器来部署应用的传统方式给服务器造成了很大的负担，代价是与服务器交互需要完全刷新页面，因此用户界面没有了丰富的交互性。而胖客户端的开发长期以来成了桌面应用程序的代名词，Ajax的出现，使我们改变了这种思维，Ajax是一种可以使Web应用程序实现胖客户端的一种技术。选题的意义：掌握Ajax，可以构建更为动态和响应更灵敏的Web应用程序，从而提升用户的浏览体验。在这项技术正在积极使用的今天，理解它的工作原理及技术实现方式，有着重要的意

3、义。因为自己对Web开发的浓厚兴趣，希望通过本次毕业论文课题的研究，加深对WEB开发体系的认识了解，培养自己的文章材料组织和分析能力。二、本选题在国内外的研究现状和发展趋势目前Ajax已经成为了Web应用的主流开发技术，大量的业界巨头已经采纳并且在大力推动这个技术的发展。 IBM、Oracle、Yahoo!、BEA、RedHat、Novell等页界领先的公司启动了Open Ajax项目。致力于为Ajax开发建造先进强大的的开发工具。 微软开发了自己的Ajax框架Altas，不过主要是和服务器端他们自己的ASP.NET框架配合工作。Sun也将Ajax技术列入了J2EE的blueprint(蓝图)

4、中，作为J2EE技术的有益的补充。另外，Google的很多产品都采用了Ajax技术，例如Orkut、Gmail、Google Suggest, Google Maps和Google Groups等。Amazon的A9 搜索引擎也采用了类似的技术。在国内，网易等公司已经将Ajax应用于实际产品之中，而且取得了很好的效果 Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统Web开发中采用form(表单)递交方式更新Web页面的趋势，提高了用户与界面的交互性，更新了传统的客户端的开发思维，可以算是一个里程碑。随着网络的发展，Ajax一定会被更广泛的使用，运用Ajax开发网络应用的最大挑

5、战并不在于技术，因为其所使用的技术都已经很成熟、稳定和易于理解，对于网络应用开发者来说，最大的挑战在于突破陈旧的思维方式，开始想象一个更加宽广的世界。三、课题设计方案 研究的基本内容：1引言：Web应用的发展与Ajax的由来。2Ajax的概念：定义、相关技术及工作原理。3流行的原因：从商业市场角度和技术实现角度上阐述分析原因。4目前的应用：应用场景、实例设计，应用分析。5结论：Ajax技术是一种胖客户端技术。采取的研究途径：在指导老师的指导下，阅读指导老师提供的有关书籍中的基本知识以及指导老师提供的一些个人的研究成果，并通过网络查阅相关论文数据库、借鉴国内大学往届优秀研究生论文，以及查阅相关国

6、外大学论文数据库的资料，搜索网络中多媒体网络教学的具体数据和资料，综合概括查询得到的有关知识，确定论文研究内容的可行性、完成开题目报告，积极与指导老师探讨研究方法、研究中疑惑的问题和论文的写作方法，针对指导老师对论文内容和格式等方面提出的意见和建议，修改论文，直到最终完成论文。四、计划进度安排 起止时间：2006年1月1日2005年1月10日 进度安排：搜集查阅毕业论文的有关资料，为选题做好必要的准备工作。起止时间：2006年1月10日2006年2月28日进度安排：通过查阅搜索的有关资料，确定毕业论文方向，完成开题报告。 起止时间：2006年3月1日2006年4月30日进度安排：毕业论文的具体

7、实施阶段，并填写中期检查表。起止时间：2006年4月30日2006年5月20日进度安排：在导师的指导建议下对论文进行全面修改，完成毕业论文。五、主要参考文献1 Ryan Asleson Nathaniel T.SchuttaAjax基础教程人民邮电出版社中文版20062 Avid Flanagan java script 权威指南第四版中国电力出版社中文版20053 Didier MartinXML 高级编程机械工业出版社中文版20054 Chelsea Valentine, Chris MinnickXHTML 教程(XHTML)人民邮电出版社中文版20065 施伟伟,张蓓征服AjaxWeb

8、 2.0快速入门与项目实践人民邮电出版社20066 Dave Crane AJAX IN ACTION人民邮电出版社中文版20067 Ajax技术概况与现状Ajax中国8 用Ajax开发智能Web应用程序蓝晶石博客9 Ajax与Atlas开发系列讲座Microsoft Technet10 Ajax: A New Approach to Web ApplicationsAdaptive path指导教师意见及建议： 摘要：随着Internet的迅速发展和其用户的增多，以及新型网络服务的研究、实施和应用，传统的基于Web的应用程序渐渐不能满足用户与Web页面高度交互的希望，它的弊端渐渐显露。Aja

9、x(异步java script和XML)是一种开发Web应用程序的方法，它通过提交Web页面内容的方法提高了用户界面的速度。在基于Ajax的应用程序中，页面的更新是有选择性的，可以在本地完成的，并且是异步的。客户端的java script将与服务器的交互减至最少，同时用户能连续与Web页面交互。Ajax的出现，使我们改变了传统的关于胖客户端的思维，经过分析可以得出，利用Ajax，也可以使基于的Web应用程序成为实现胖客户端的一种技术。关键词：Ajax，XML Request，MVC， RIA，Rich Client1 引言Internet经历了翻天覆地的重大变革。最初Internet实际上就是

10、让科学家们和学术机构交换文章和研究成果，也就是说，只有简单的文本浏览器和静态页面仅供科学家之间交流研究心得。时至今日，Internet已不可同日而语，它得到了巨大的发展，成为贸易和信息的中心，也成为大量应用的首选平台。因此伴随而来的Web开发显得尤为重要，而以前的那种简单的请求/响应模式已不能满足用户的需要。在Web开发领域，随着Internet的不断普及和深入发展，各种网络应用系统的开发也由过去的Client/Server 模式转向Browser/Server。这种基于Web应用系统的优点之一是免去了客户端的部署，统一使用浏览器即可。而对于这种系统的后台维护，开发人员和系统管理人员仍然要在服

11、务器端进行，如果系统服务器要是在异地的情况下，会浪费大量的人力和时间。于是胖客户应用的开发人员都饱受部署之苦，因为要把应用部署到数以千计的用户机器上，他们急切地希望Web能够减轻他们的负担。多年以来，已经出现了许多Web应用技术，有些是专用的，另外一些需要高超的编程能力。在用户体验方面，尽管这些技术有弱有强，但没有哪个技术能使瘦客户应用达到桌面应用的水平。不过，由于很容易部署，有更大的客户群体，而且维护开销更低，尽管浏览器存在一定的局限性，仍是许多应用的首选目标平台。所以开发人员往往使用一些技巧来绕过Internet对开发人员的麻烦限制。利用各种远程脚本方法和HTML元素，开发人员可以与服务器

12、异步地通信，但是直到主流浏览器对XML Request对象提供了支持，真正的跨浏览器方法才有可能。XML Request的出现为Web开发提供了一种全新的可能性，甚至整个改变了人们对于Web应用由什么来组成的看法。在这个技术出现之前，由于技术上的限制，人们认为Web应用就是由一系列连续切换的页面组成的。因此整个Web应用被划分成了大量的页面，其中大部分是一些很小的页面。用户大部分的交互都需要切换并刷新整个页面，而在这个过程中，也就是在下一个页面完全显示出来之前，用户只能傻等，什么都做不了。这就是人们所习以为常的Web应用。在传统的Web应用中客户端与服务器的交互只能通过表单的提交服务器的处理后

13、返回新的页面,最后客户端进行完全的页面刷新。这样的局面已经延续了相当长时间。随着Web应用程序复杂性越来越高，这种传统的Web应用程序已经渐渐不能满足Web浏览者更高的、全方位的体验要求了。Web应用与桌面应用程序相比，缺少了很多交互的特性，浏览器在Web应用中所处的角色仅仅是一个呈现HTML代码的容器，而不是一个独立应用程序的宿主。然而XML Request技术的出现使得我们可以打破这种笨拙的开发模式，以一种全新的方式来做Web开发，为用户提供更好的交互体验。大量的探索者以XML Request技术为基础，将一些原有的Web技术重新包装整合。经过了多年的不懈努力，终于在2005年出现了一个新

14、的术语Ajax，来描述这样一类的技术和开发方式。随着Web2.0时代的到来，Ajax已经成为人们谈论最多的技术术语。Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术。这项新技术能够极大地改善网站的用户体验。Ajax技术可以提供高度交互的Web应用，给予用户更丰富的页面浏览体验。当Ajax的出现给所有的Web开发人员，它对Web应用来说可以是革命性的，它使得开发人员得以摆脱原有单调的开发模式，从而开发出更易用、交互性更强的Web应用。 关键在于，Internet默认的请求/响应模式有了重大转变，这正是Ajax的核心所在，尽管这并非全新的内容。Web应用开发人员现在可以自由地与服务

15、器异步交互，这说明，他们可以完成许多原本只能在胖客户上完成的任务。Google、Yahoo和Amazon等公司已经走在前面，我们终于看到基于浏览器的应用也能与胖客户应用不相上下。利用Ajax，你可以尽享这两方面的好处：代码位于你能控制的服务器上，而且只要客户有浏览器，就能访问一个能提供丰富用户体验的应用。Web应用开发人员，可以应用某种或者多种服务器端技术来构建Web应用。在过去几年中，服务器端有了长足的发展，服务器端软件开发越来越容易，也越来越健壮，相比之下，客户端基本上被抛在了一边。Ajax技术的出现使这种状况有所改观，因为开发人员现在有了一个更丰富的客户端工具箱，有大量工具可以使用。Aj

16、ax技术从本质上说是属于客户端的技术。但它的应用是精彩之处在于客户端与服务器的异步交互。而它实现的，却是胖客户端的功能，所以我们也可以这么认为：Ajax是一种新的胖客户端技术。2 Ajax的概念2.1 Ajax的定义Ajax这个概念的最早提出者Adaptive Path公司的Jesse James Garrett认为：Ajax是异步java script 和XML（Asynchronous java script and XML）的英文缩写。而大力推广并使Ajax技术炙手可热的是Google。Ajax是指一种创建交互式应用的网页开发技术。Ajax的核心理念是使用java script对象Xml

17、 Request发送异步请求。最初为XML Request对象提供支持的是微软公司。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，Xml Request使您可以使用java script向服务器提出请求并处理响应，而不阻塞用户。 实际上，Ajax不只是一种技术，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：（1）基于XHTML和CSS标准的表示；对网页内容重新格式化，但不是使用HTML语言，因为HTML语法很不严格，匹配性也不好，使用性能差。（2）使用文档对象模型（Document Object Model）进行动态显示和交互；比

18、原来使用各种脚本和动态语言发好。 （3）使用XMLXSLT进行数据交换与处理；所有的数据的存取都XML完成。（4）使用XML Request与服务器进行异步通信；使用XML Request进行异步数据读取。（5）使用java script绑定将它们绑定在一起。使用java script整合上述技术，绑定和处理所在数据。2.2 Ajax的相关技术在基于Ajax的应用中， Ajax核心技术有java script、XML Request和DOM，如果所用数据格式为XML的话，还可以再加上XML这一项。2.1.1 XML RequestXML Request是Ajax技术的核心。它其实是XML 组件

19、的对象，通过此对象，可以做到无需提交表单就可以实现与服务器的连接；无需刷新整个页面，就可以动态更新页面中一部分的内容。这样，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。XML Request通常使用XML作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过XML Request发送信息给服务器，异步接收服务器处理并返回信息，然后通过java script动态更新页面的部分内容。XML Request具体作用是在客户端传递XML数据给远

20、程服务器端的。XmlDocument与Xml Request这两个技术是Ajax的核心。Ajax的关键是怎样把数据从远端获取回来。XmlDocument实际上是创建一个Document对象，这个对象是XML的Document对象。之所以要创建XML的Document对象，是因为互联网上XML格式的数据非常多，如果不创建XML的Document对象，取回来的数据就没法使用。这样就明确了,我们可以从客户端传递XML数据到服务器应用程序,然后处理。下面需要做的就是将要显示的内容(包括新的控件和HTML文本)和数据在服务器应用程序中处理成为XML数据，再以逆向传输发送给客户端,然后用客户端的响应代码更

21、新全部或部分页面区域而完成无刷新的功能。2.2.2 java scriptjava script是一在浏览器中大量使用的编程语言，它一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验，或是做一些小游戏等等。但事实上，它是一门真正的编程语言，有着自己的标准并在各种浏览器中被广泛支持。在Ajax技术应用中，可以通过java script操作XML Request，来与数据库进行交互。2.2.3 DOM（Document Object Model）DOM（即结构化的文本结构）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台。也就是说，它提供了文件的结构表述，并可以改变其中

22、的內容及可见物。它提供了标准的HTML和XML对象集，并有一个标准的接口来访问并操作它们。DOM被分为不同的部分（核心、XML和HTML）和不同的版本（DOM1/2/3），其中，HTML DOM 将HTML文档视为嵌其他元素的树型结构元素。所有的元素，它们包含的文字以及他们的树型都可以被DOM树所访问到。它们的内容可以修改和删除，并且可以通过DOM建成立新的元素。元素的文字和它们的属性被识别为点。DOM的本质是建立网页与 Script 或程序语言沟通的桥梁。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。这些对象可以由当今大多数的浏览器

23、以 Script 来取用。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM中，DOM提供了网页中各个对象的读写的支持。2.2.4 XML可扩展的标记语言（Extensible Markup Language）具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上传输的数据和文档符合统一的标准。它是用来描述数据结构的一种语言，可以使对某些结构化数据的定义更加容易，并且可以通过它与其它应用程序交换数据。用XML表述的数据和文档，可以很容易的让所有程序共享。XML是用于网络上数据交换的语言，具有与描述Web页面的“HTML”语言相似的格式。该语言有“可以利

24、用Web浏览器进行数据确认”以及“易于生成数据”等优点，因此主要用于在企业之间，或者在企业内部更加方便地进行数据交换和利用。XML是Extensible Markup Language的缩写，它是一种类似于HTML的标记语言。XML是用来描述数据的，它的标记不是在XML中预定义的，开发人员必须定义自己的标记。另外，XML使用文档类型定义(DTD)或者模式(Schema)来描述数据。而当它使用DTD或者Schema后就成为一种自描述的语言。2.2.5 CSSCSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借

25、助CSS的强大功能，可以把数据更有效的表现在网页上。CSS是一种用来显示方式描述的标记语言。对于Ajax来说，CSS的最大特性是它可以用来显示。我们在前面讨论过，Ajax技术有几部分组成，首先它有后台的引擎，把数据从服务器端取出来，前台取到数据以后有一种表示的方式，能把HTML取出来并在前台有条不紊的显示出来，这是一个重要的问题。网页的美感和可视化，是通过对CSS数据进行设定完成的。2.3 Ajax技术的实现原理介绍了它的相关技术后，我们来看一下它的实现原理。Ajax 这个名字代表了异步java script与XML Request，并且意味着你可以在基于浏览器的java script和服务器

26、之间建立通讯。这些用于现代浏览器中的若干成功技术的可能性组合的Ajax技术，使所有的Ajax应用程序实现了一种“丰富的”用户界面这是通过java script操作HTML文档对象模型并且经由XML Request实现的精确定位的数据检索来实现的。（1）原理简介Ajax的工作原理相当于在用户和服务器之间加了个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求(主要是读取XML格式的数据)。Ajax是使用XML和java script两部分，在客户端向服务

27、器端提出请求。从原理上看，主要是Ajax可以通过调用XML Request实现与服务器的异步通讯，并最终在网页中实现丰富友好的用户界面。应用Ajax的流程如下：（1）定义一个事件处理器 。（2）获取XML Request，并将事件处理器注册给它。（3）与服务器连接。（4）发送信息。（5）服务器返回处理完毕的信息。（6）每当XML Request的状态发生变化，自动触发事件处理器。（7）事件处理器动态更新页面。技术的关键是Ajax引擎，它实际上是一个比较复杂的java script应用程序，用来处理用户请求，读写服务器和更改DOM内容。在客户端多出来一个 Ajax engine，而且服务器传给客

28、户端的已经不再是 HTML/CSS，而是纯的 XML 数据，客户端通过 XML 向服务器端发送请求。所有的表示逻辑在客户端通过 java script 脚本来执行，然后通过修改 DOM 来完成展现。 由于有了位于客户端这个中间层，可以把原先必须在服务器端完成的很多交互工作放在了客户端完成，而客户端的 Ajax engine 的响应是即时的，因此用户的交互体验得到了极大的改善。Ajax是传统Web应用程序的一个转变。以前是服务器每次生成HTML页面并返回给客户端（浏览器）。在大多数网站中，很多页面中大部分内容都是一样的，比如：结构、格式、页头、页尾、广告等，所不同的只是一小部分的内容，但每次服务

29、器都会生成所有的页面再返回给客户端，这无形之中是一种浪费，不管是对于用户的时间、带宽、CPU耗用，还是对于ISP的高价租用的带宽和空间来说。而Ajax可以所为客户端和服务器的中间层，来处理客户端的请求，并根据需要向服务器端发送请求，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于纯后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序，所以Ajax对于用户和ISP来说都是很有利的。Ajax使Web中的界面与应用分离（也可以说是数据

30、与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的Web应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。（2）交互模式在同步工作方式中，当我们需要改变页面中的一些数据，并要求服务器端做一些变化时，要等整个页面被传过去然后再传回来，才能被看到。而使用Ajax技术之后，我们只需要把有变化的那部分的请求发过去，服务器端获取之后，处理并只将这部分传回来，因此性能大大提高显著。具体来说，首先，我们不必传那么多的数据，其次，可以增加服务的针对性。比如，页面有

31、好多东西，而我们只想看一下天气预报，那么要做的事，提交给服务器我们所位置，想看一下这里的天气，返回所有数据是传统的服务器端交互机制和原来的FORM提交机制的应用方式。使用Ajax后，我们只提交且只获得关于天气的新数据。具体地进行分析一下它们的区别：在传统的Web应用同步交互方式中，用户首先发送一个 请求到Web服务器，然后Web服务器根据用户请示的内容，相应的任务，对其进行处理后再返回一个新的HTML页到客户端,如图所示。这是一种不连贯的用户体验，每当服务器处理客户端提交的请求时,客户都只能空闲等待, 此时浏览器显示的页面是空白的，这也就是通常所说的“白屏”现象，并且哪怕只是一次很小的交互、只

32、需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。 图1同步的工作方式自采用HTML进行Web传输和呈现以来，无论是基于哪种服务器技术(ASP、ASP.NET、JSP或PHP)，Web应用中采用的都是如图中所示的处理模式。当页面内容比较少，或者服务器处理时间较短时，采用这种模式似乎没有什么不妥。但是，如果页面内容较多，服务器的响应时间较长，对于用户来说就难以接受了。根据调查，一个网页加载的时间如果超过45秒，那么大多数用户将不会等待，可能会选择切换到其他窗口或者直接关闭该页面。此外，用户在某些时候仅仅需要改变页面中的某部分的数据，但

33、是他不得不刷新整个页面。尤其在人机交互较为频繁的应用系统中，这种现象屡见不鲜，这显然是和人性化的软件设计原则相违背的。减少用户的等待时间，提高系统的可用性的途径除了优化代码、调整服务器配置之外，还可以选择使用Ajax技术。使用Ajax后，用户感觉几乎所有的操作都会很快响应没有页面重载的等待。因为与传统的Web应用不同，Ajax采用了异步交互方式。它在用户和服务器之间引入了一个中间媒介，从而改变了同步交互过程中的“处理-等待-处理-等待“模式。用户的浏览器在执行任务时即装载了Ajax引擎。该引擎是用java script语言编写的，通常位于一个隐藏的框架中，负责转发用户界面和服务器之间的交互。A

34、jax引擎允许用户和应用系统之间的交互以异步的方式进行，独立于用户与Web服务器之间的交互。现在，可以用java script调用Ajax引擎来产生一个 的用户请求，数据编辑、页面导航和数据验证等操作不再需要重新加载整个页面，可以通过Ajax引擎向Web服务器发送请求。基于Ajax的Web应用模式如图所示：图2异步工作方式3 流行的原因Ajax技术是从2005年2月诞生，到现在已非常流行，另外它并不是一门新技术，业内人士称其为“新瓶装旧酒”，那为什么它会这样流行？我们从环境角度和技术角度来两个方面来分别分析一下Ajax技术流行起来的原因。3.1 环境角度阐述分析(1)Web的发展历程的需要We

35、b的发展经历了纯静态页面的Web1.0时代，应用“CMS+数据库”模式的Web1.5时代，然后到了由用户导向的社会化网络为特征的Web2.0时代。Web1.0时代即纯静态页面时代，Web1.5时代的主要技术是数据库加上页面生成机制。这两个时代的特点是页面上的信息是由人来不断在后台的更新，没有一种把所有的信息推到你面前的机制。在Web2.0时代，出现了一种很好的方法可以把这些信息取过来放在面前：比如说，一个用户每天要看博客堂的博客，要上BBC的新闻，要看一下E-mail信箱的邮件，看一些相关的专业的网站，而且每天的工作就这几个网站。传统的方式使用户不得不打开N个浏览器窗口，一一输入网址进行查询。

36、但是在Web2.0时代我们不需要这种单调重复的操作了。例如我们只需使用Google的个性化界面，就可以定制自己所需的内容。另外，以前我们登录网站，看到的是一些静态的文本或是动态生成的数据，这些大量的数据需要我们人工来选择。如果想查询某一项内容,必须通过搜索引擎,进行分类搜索。比如说喜欢体育栏目，那可以去新浪或是TOM的体育频道,但这些大的门户网站不仅提供体育信息，也提供大量关于经济、金融信息。你要想找到你所需要的，往往需要费点精力。传统的网页开发方式中，这些信息是靠后台的编辑们每天不停地搜索信息，然后做成网页，发布到服务器上，不仅增加了访客的操作量，同时也增加了后台人员的工作量。这是Web2.

37、0以前的客户体验及后台操作情况。Web2.0与Web1.0的主要区别如图下表所示：表1 Web2.0与Web1.0对比表Web1.0 (19932003)通过浏览器浏览大量网页 Web2.0（2003）网页，加上很多通过Web分享的其他内容，更加互动，更像一个应用程序而非一个网页模式“读”“写”和贡献主要单元内容“网页”“贴子/记录”形态“静态”“动态”浏览方式浏览器浏览器、RSS阅读器、其他体系结构“客户端服务器”“Web Services”内容创建者网页编写者任何人 主导者少数人“大量业余人士”时代，我们需要自己去找自己想要的信息，而在Web2.0时代是将东西推到你面前，让你选择你来看什么

38、。可以把别处的信息拿过来聚集在一起放。让我们可以很容易地从各种网站拿到最想要的信息，这是Ajax最大的魅力所在。Ajax的创新使Web2.0时代的互联网有了更专业网站，这些站点的开发人员只需将这些原来编好的东西整合在一起，也就是利用Ajax技术将互联网上各类资源网站的内容整合起来，就可以在互联网上广泛使用。（2）Web发展趋势的必然结果业内人士进行这种预测：随着Web的发展，有一天，你浏览网站时不需要进行任何搜索，只使用一个类似副表现形式客户端，就可在桌面上看到平时需要登陆各个网站看到的东西，从后台获取你需要的信息。Web的发展趋势更注重智能化和人性化，它将向以下几方面的趋势进行发展：（1）用

39、户操作非常友好，注重用户体验。（2）去中心化,用户主导，用户参与，用户建设。（3）社会化网络，内容开放和共享，支持API。（4）内容通过聚合来组织。（5）分散化的微内容网站受欢迎。Web2.0时代的来临使Ajax这项技术更能其发展的巨大潜力和空间，Web的发展趋势也让我们看到了Ajax应用的前景。Web2.0时代的优越性是促使Ajax流行的主要原因之一。32 技术实现角度阐述分析321 Ajax的特性图3传统的与基于Ajax的Web开发模式上图右边显示了使用Ajax技术后的开发模式，原来的网上应用模型即左边的那一部分，客户端和Web服务器是直接进行交互的。当你请求一个数据返回的时候，会将整个页

40、面全都发回去从用户那里收到的所有数据，经过处理，再把所有的数据都发回来，不论你想刷新页面的哪一个部分，整个页面都需要刷新，使用Ajax技术后，情况不一样了，中间有一个XML数据缓冲区，这个缓冲区和Ajax引擎负责处理一部分数据。当需要和服务器端再次发送数据时，只需要发送一小部分请求，而服务器端只需要返回那一小部分请求就可以了。相比把所有请求发过去，所有页面发回来的那种传统的方式，大大的提高了性能。322 Web与Ajax的技术结合点（1）Ajax通过RSS/ATOM同步数据；通过RSS/ATOM聚合数据；使用友好的URL（即好记的域名，比如 ：/ State Transfer）的API或者XM

41、L的Web Service；具有社会性；能把东西分享给朋友等；（2）Ajax使用CSS+XHTML的方式控制网页元素，这样做的好处是页面更小，加载更快；页面更规范，减少了和程序的交互；而且可以轻松支持多种样式，提供更个性化服务。但这种技术也存在一定的局限，它还没有好的可视化编辑器，从加大了美术设计师的工作。（3）使用格式化输出的一个规范即XML格式。在Web与Ajax的技术结合点方面，因为Ajax是一种客户端请求通过异步调整服务器数据,实现页面无刷新操作的技术，所以在基于Ajax技术的Web应用程序中，它的好处主要表现在用户不需要刷新页面就可以完成异步的数据交换，在Smart Client技术

42、成熟之前，可以比较完美地实现富客户端（RIA）。3.3 综述使用Ajax可以带来的好处有以下几个方面：（1）服务器的负担。Ajax的原则是“按需取数据“，可以最大程度地减少冗余请求，减轻服务器的负担。（2）无需刷新页面，减少用户心理和实际的等待时间。特别是在读取大量数据时，不会像刷新页面那样出现白屏的情况，Ajax使用XML Request对象发送请求并且得到服务器响应，在不重新载入整个页面的情况下，用java script操作DOM更新页面。因此在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容(也可以加一个“正在读取中”的提示框让用户知道目前正在读取数据)只有在数据接收完毕之后才更

43、新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。（3）带来更好的用户体验。（4）可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器负担，充分利用带宽资源，节约空间和宽带租用成本。（5）可以调用外部数据。（6）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。（7）进一步促进页面呈现与数据的分离。4目前的应用4.1 应用场景Ajax的特点在于异步交互、动态更新Web页面，因此客观存在的适用范围是交互较多、频繁读取数据的Web应用。它在以下几个场景中经常使用。（1）数据验证。在填写表单内容时，需要保证数据的惟一性(例如新用户注册填写的用户名)，因此必

44、须对用户输入的内容进行数据给以验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将整个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担。第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。而使用Ajax技术，可以由XML Request对象发出验证请求，根据返回的 响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。（2）按需取数据。分类树或树形结构在Web应用系统中使用得非常

45、广泛，例如部门结构、文档的分类结构常常使用树形控件呈现。以前每次对分类树的操作引起页面重载，为了避免这种情况出现，一般不采用每次调用后台的方式，而是一次性将分类结构中的数据全部读取出来并写入数组，然后根据用户的操作，用java script来控制节点的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，如果用户不对分类树进行操作或者只对分类树中的一部分数据进行操作的话，那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂、数据量庞大的情况下，这种弊端就更加明显了。现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且

46、显示；当用户点开一级分类的某一节点时，页面会通过Ajax向服务器请示当前分类所属的二级子分类的所有数据；如果再继续请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩减了用户的等待时间。（3）自动更新页面在Web应用中有很多数据的变化是十分迅速的，例如最新的热点新闻、天气预报以及聊天室的聊天内容等。在Ajax出现之前，用户为了及时了解相关的内容必须不断刷新页

47、面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能。有可能会发生这种情况：有一段时间网页的内容没有发生任何变化。但是用户并不知道仍然不断地刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此时有新消息出现，这样就错过了第一时间得知消息的机会。应用Ajax可以改善这种状况，页面加载后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是java script的强项）。这样既

48、避免了用户不断手工刷新页面的不便，也不会因为重复刷新页面造成资源浪费。4.2 网页中的Ajax应用Ajax针对网站开发起着更重要的作用，而且目前应用最广是网站开发。下面我们来分析一下它在网页中的简单应用：即基于MVC架构的应用。4.2.1 Ajax的MVC三个部分在网页应用中，我们要解决的问题是如何在网页中设定真正有效的Ajax应用，即在Ajax中如何设计M，V，C。Ajax的MVC架构分为M，V，C三个部分：(1) M：（modal）即实体，是Ajax中用来传载数据或承载的的一个基础部分。我们在Ajax网页设计中，如果要涉及到一些特殊的东西，比如需要建立一个 XMLRequest 对象，那就

49、需要一个实体来承载它。(2) V：（View）即视图，主要介绍用户界面如何显示。在显示网页时，一般不建议使用HTML来做，而使用XHTML+CSS+java script这样一个方式来做。网页上有什么内容，只需用XML来表示出有什么内容，具体这些内容的位置，显示效果如何，并不需要用网页内部的HTML语言来实现。简单的说，首先不用使用TABLE来做定位，而是使用CSS来做定位。所有的显示外观和效果都不使用HTML来实现，而是需要使用CSS来实现，即用CSS来定义网页显示的效果。如果实在需要某种元素的显示绘制，也使用java script添加，而不是一次性的早早的把它绘制好，因此这种方式比较灵活。

50、(3)C：（Controller），即控制器。如果在页面上有一个元素，需要对它做出响应时，我们如何的获取它，不是简单地使用一个Document的对象，而是使用java script将它封装起来，并且最好是一个封装的事件，那么就使用的Lessoner模式，即监视者或监听的模式，用它来主动监听这种事件，并用它来进行处理。4.2.2 Web中的MVC传统模式的MVC架构：数据流是传统MVC的视图部分，CGI或者其他交互性的Web应用就是传统MVC的控制器部分。我们现在看到的大多数的Web应用都是传统模式的，比如ASP，PHP，JSP。MVC是三个英文字母的缩写，即Model，View，Control

51、ler。MVC是将网页应用分成三个部分来做介绍，以便开发时好分工。在传统的MVC架构中，网页就是视图，控制器是中间的数据流，后台有服务器。它们的传输模式如图所示。图4传统的MVC在传统的MVC的开发过程中，前台人员只负责定义一些模板页的模式，所有的数据都是通过ASP后台生成的。在这种情况下，当需要客户端与服务器交互时，一定要把数据传到后台去，后台接收数据后做响应然后再传回来。Ajax中的MVC与传统的大不一样，浏览器中的MVC图如下：图5浏览器中的MVC在这种模式下，View负责显示HTML代码和一些特效,它的主要应用是：提供可视化界面，负责监视界面的操作；提供通过和Controller交互更

52、新Model的数据并传送显示。Controller负责监视视图上呈现的各种控件的动作，一旦有动作以后，它便会处理。Server传出一些模型的原型，传给控制器，由控制器根据这些模型的原形传给视图。Ajax在设计时一定要按照MVC架构来设计网页这一段，这样的好处是：首先它会对性能有很好的提高。其次它在开发过程中的分工特别明确。对开发人员的要求比较明确，对美工等各方面的人要求比较明确。而且对复用性有很好的支持。从软件工程的角度来讲，MVC的架构是符合正确的开发道路的。在传统的开发模式中，经常会出现美工人员，编辑和技术人员意见不统一，而原来开发方式要求这些人必须要协作，必须按同步的思维来做。美工人员进

53、行设计多从艺术性和创造性考虑，编辑更多地是希望内容吸引人的眼球，程序员则希望循规蹈矩，后台数据库却希望实现更容易一些，这样就使协调起来比较麻烦。使用MVC架构后，将View视图分开了。美工只需和编辑去沟通就可以了，不需要与程序员做任何沟通，而程序员只需拿到需求文档就可以了，因此按照MVC架构进行更有助于分工。4.2.3 设计实例下面通过一个虚拟音乐键盘的实例来加深对MVC架构的认识。我们要实现的效果是如图6所示，页面中有不同颜色的方框，用鼠标点击不同的方框，会在下边的框中出现do，ra，mi，fa，等不同的字符，就是一个虚拟的音乐键盘。图6 音乐键盘实例下面我们来看一下这个实例的代码部分：表示

54、层的代码如下：music.html：1 html2 head3 titleKeyboard/title4 link rel= stylesheet type=text/css href=/5 script type=text/java script src=/script6 script type=text/java script7window.onload=assignKeys;8 /script9 /head10 body11div id=keyboard class=musicalKeys12div class=do musicalButton/div13div class=re mus

55、icalButton/div14div class=mi musicalButton/div15div class=fa musicalButton/div16div class=so musicalButton/div17div class=la musicalButton/div18div class=xi musicalButton/div19div class=do musicalButton/div20/div21div id=console class=console22/div23/body24/html代码解释：我们在表示层里定义了界面，你会发现显示全部是用CSS完成的。4行引用了一个CSS，6行引用了一个java script，注意7行这里的代码是在window.onload中加入一个java script程序,它在MVC中属于控制器那一部分的内容。11行至19行显示视图部分的代码，仅仅几行简洁的代码，便添加了musicalButton。然后我们在CSS中定义了一个显示模式：