基于敏捷软件开发方法的Web2.0网站开发—— Ajax在拼客网站的应用---毕业论文

本 科 毕 业 论 文基于敏捷软件开发方法的Web2.0网站开发 Ajax在拼客网站的应用The Web2.0 website development based on Agile programming The Application of Ajax in PinKe Website姓 名：学 号：学院：软件学院系：软件工程专 业：软件工程年 级： 指导教师： 教授 年 月摘要WEB 应用现已经进入 WEB2.0 “草根”时代，用户成为网络内容的主体。每天都有无数的新想法诞生，“拼客”就是近年来出现的新兴群体。这里的“拼”是拼凑，拼合的意思，而“客”代表一群人。因而，“拼客”指的就是集中在一起共同完成一件事或活动，实行 AA 制消费的一群人。Ruby on Rails 提供一种快速的网站开发方法，只要有想法，就能很快地把它实现，使得我们可以把主要的精力放在创造想法和满足需求上。ROR 所代表的一类动态的、自由的程序设计语言和开发思想让我们拥抱变化，更好地适应敏捷开发。Ajax 作为 Web2.0 的重要组成部分，避免了页面频繁刷新，让用户感受到一种连续的体验。同时 Rails 提供了对 Ajax 高层次的封装，只要指定几个请求参数，就可以实现整个交互细节，以达到无须编写任何 JavaScript 脚本即可实现 Ajax 功能的目的。本文依据实际开发完成的项目，浅析了 Web2.0 网站页面的设计，展示并分析 Ajax 在拼客网中的具体应用，对基于 ROR 的 Web2.0 网站设计与开发以及 Ajax 在 ROR 中的具体运用有一定的指导和借鉴意义。关键词：拼客网；Ruby On Rails；Web2.0；AjaxABSTRACTAt the current time, web applications have already entered web2.0 “grassroots” period, the user has become the subject of web content. Everyday many new ideas appear. “Pin Ke” is an emerging group in recent years. The “Pin” means “gather” or “collect”, and “Ke” means “People”. Thus, “Pin Ke” refers to the “Dutch Treatment” consumption group, which completes one thing or activities together. Ruby on Rails provides a rapid development methodology to develop web site, as long as there is the idea, it soon will be able to achieve so that we can focus on the creation of the ideas and meeting the demand. ROR represent a class of dynamic, the freedom of programming languages and development of thinking so that we are better able to embrace change and adapt to agile development. Ajax as an important part of Web2.0 to avoid page refresh frequently, so that users feel a continuous experience. Rails provide a high-level encapsulation for Ajax, as long as the specified request parameter, it can be achieved throughout the interactive details, in order to achieve Ajax without writing any JavaScript.In this paper, basing on an actual development project, it makes an analysis on the Web2.0 website page design, displays and analyses the specific application of Ajax in the “Pin Ke” website. It makes a certain use of guidance and references for development and design of Web2.0 website and Ajax in ROR.Key words: PinKeWeb; Ruby on Rails; Web2.0; Ajax目录第一章 引言11.1 课题背景及意义11.2 课题要求11.3 相关技术概述21.3.1 开发环境21.3.2 Ruby 和 Rails介绍21.4 术语定义3第二章 总体设计52.1 Rails框架52.1.1 Rails框架主要特色52.1.2 MVC设计模式62.2 数据库102.2.1 数据库配置102.2.2 模型设计122.2.3 迁移任务12第三章 网站页面设计143.1 总体设计理念143.2 CSS + xHTML183.3表现层解决方案21第四章 Web2.0 和 Ajax 技术234.1 Web2.0234.2 Ajax 的定义与关键技术244.2.1 Ajax 定义244.2.2 Ajax 与传统B/S 架构的比较244.2.3 实现Ajax 的关键技术28第五章Ajax 在拼客网的应用295.1 Rails的Ajax支持295.2 拼客网中的Ajax315.2.1 Ajax的核心模块：PrototypeHelper315.2.2 Ajax的效果模块：ScriptaculousHelper435.3 Rails 中 Ajax 的其他用法465.4 小结49第六章 总结和展望506.1 总结506.2 展望50致谢语53参考文献54ContentsChapter 1 Introduction11.1 Background11.2 Assignment11.3 Technology Summarize21.3.1 Development Condition21.3.2 Synopsis for Ruby and Rails21.4 Terminology Definition List3Chapter 2 General Design52.1 Rails Framework52.1.1 Main Features of Rails Frame52.1.2 MVC Design Pattern62.2 Database102.2.1 Databa Configure102.2.2 Model Design122.2.3 Migration Task12Chapter 3 Web Page Design143.1 Design Methodology143.2 CSS + xHTML183.3 The Solution Project of View Layer21Chapter 4 Web2.0 and Ajax234.1 Web2.0234.2 The Definition amd Key Technology of Ajax244.2.1 Definition244.2.2 Compare Ajax with Traditional B/S Framework244.2.3 The Key Technologies28Chapter 5 The Application of Ajax295.1 Ajax in Rails295.2 Ajax in PinKe Web315.2.1 Core Module: PrototypeHelper315.2.2 Effect Module: ScriptaculousHelper435.3 Others465.4 Conclusion49Chapter 6 Summarize and Expectation506.1 Summarize506.2 Expectation50Acknowledgements53References54VI基于敏捷软件开发方法的Web2.0网站开发 Ajax在拼客网站的应用第一章 引言1.1 课题背景及意义WEB 应用已经进入 WEB2.0 “草根”时代，用户成为网络内容的主体。每天都有无数的新想法诞生，Ruby on Rails 提供给我们一种快速的网站开发方法，只要你有想法，你就能很快的把它实现，使得我们可以把主要的精力放在创造想法和满足需求上，Ruby所代表的一类动态的、自由的程序设计语言和开发思想将占有越来越重要的地位。目前，Ruby on Rails 正在成为 Web 应用程序开发的新途径。 Ruby on Rails 是基于 Ruby 语言的轻型Web开发架构，不仅开发效率高（部署容易）、功能丰富（支持Ajax、Web Services等最新应用），而且性能方面表现相当出色。该架构的支持者们声称 ROR 开发人员的生产效率最多是使用传统 J2EE 架构的十倍，网上也有相关测试资料显示，该架构性能比轻量级的J2EE 架构 Struts + Hibernate 高 15%30%。拼客是近年来出现的新兴群体。这里的“拼”不是拼命，拼刺，拼抢，拼争，而是拼凑，拼合。“客”代表一群人，因此，“拼客”指的就是集中在一起共同完成一件事或活动，实行AA制消费的一群人。这样，既可以分摊成本、共享优惠、又能享受快乐并从中交友、识友。“AA拼客”们，倡导的就是一种“节约、时尚、快乐、共赢”的新型生活方式。目前的拼客有：拼房（合租）、拼饭（拼餐）、拼玩、拼卡、拼用、拼车（顺风车）、拼游（拼团或自助游）、拼购（团购）等等。AA拼客是一种时尚、一种潮流、一种理念、一种生活的态度、一种生活的方式。 “拼”，简而言之就是：联合更多的人，形成更大的力量，花更少的钱，消耗更少的精力，做成我们想做的事情，获得更多的快乐，享受更好的生活。1.2 课题要求使用Ruby语言在Rail平台上采用敏捷软件开发方法构建一个具有Web2.0特性的拼客网站。学习并使用Ajax技术，通过异步发送请求，改善用户体验。架构方法： Rails 框架的 MVC 架构。测试方法： 代码严格按照 Rails 提供的测试功能测试。整个项目开发采用测试驱动方法在Internet Explorer 7.0浏览器下进行开发以及测试。1.3 相关技术概述1.3.1 开发环境硬件环境：普通个人电脑软件环境：操作系统： Microsoft Windows XP SP3开发语言： Ruby1.8.6，JavaScript，HTML，CSS 开发工具： Eclipse3.4，Aptana插件, RadRails插件框架： Rails1.2.2数据库： MySQL Database 5.0浏览器： IE7.0 / GreenBrowser4.9项目管理平台：TortoiseSVN 1.4.5 1.3.2 Ruby 和 Rails介绍（1） Ruby是一种解释型的方便快捷的面向对象的脚本语言，由日本人松本行弘（Yukihiro Matsumoto，外号 matz）开发，遵守GPL协议和Ruby License 。Ruby的作者于1993年2月24日开始编写Ruby，直至1995年12月才正式公开发布于fj （新闻组）。之所以称为Ruby，是因为Perl的发音与6月的诞生石pearl（珍珠）相同，因此Ruby以7月的诞生石 ruby （红宝石）命名。Ruby的作者认为Ruby (Smalltalk + Perl) / 2，因为Ruby是一个语法像Smalltalk一样完全面向对象、脚本执行、又有Perl强大的文字处理功能的编程语言。1（2） Rails 是用Ruby编写的一款完整的、开放源代码的Web 框架，目的是用更简单而且更少的代码编写Web应用。诞生于2004年7月，Rails 的创始人David Heinemeier Hanson从 37signals 公司的项目管理工具 Basecamp 里面分离出 Ruby on Rails，并且以开源方式发布。Rails 当中有很多规矩从一开始就按照David的意见制定好了，所以在Rails上开发应用程序时，开发人员可以专注于应用程序自身的设计，省却那些花在了解及配置基础框架上面的时间。这也正是Rails很重要的精神“惯例优于配置”（Convention over Configuration），开发人员遵照Rails本身的惯例便可以省却配置组态（例如JavaEE应用中的大量的配置文件）的时间；此外，Rails虽然强调惯例的重要及便利性，但针对不同的需求，Rails也提供修改的空间让开发人员可以进行自订的组态，定义自己的配置来覆盖Rails配置。1（3） Ruby on Rails是一种结合Ruby语言与Rails平台的一种网页编程语言，Ruby语言以自然、简洁、快速著称，全面支持面向对象程序设计，而Rails则是Ruby广泛应用方式之一，在Rails平台上设计出一套独特的MVC开发架构，采取模型（Model）、视图（View）、控制器（Controller）分离的开发方式，不但减少了开发中的问题，更简化了许多繁复的动作。1Rails框架提供了开发Web应用的一站式选择。1.4 术语定义本文档中所用到的专门术语的定义和缩写词的原意。表1-1：专门术语的缩写与定义序号名词定义和解释1GPLGPL 是 GNU General Public License (GNU 通用公共许可证)的缩写形式；它要求软件以源代码的形式发布，并规定任何用户能够以源代码的形式将软件复制或发布给别的用户。2RORRuby On Rails ，即Ruby语言在Rails框架上的运用。3AjaxAsynchronous JavaScript and XML(以及 DHTML 等)的缩写。4CSSCascading Style Sheets 层叠样式表5DOMDocument Object Model 文档对象模型，它是操作Html 和XML 文件的一组API，它提供了文件的结构表述。6ORMObject Relational Mapping 对象关系映射，即将数据库表映射到类。7UIUser Interface，用户接口，也称为用户界面。第二章 总体设计2.1 Rails框架2.1.1 Rails框架主要特色Rails 框架始终遵循了DRY（Dont Repeat Yourself 不要重复你自己）和约定优于配置（convertion over configuration）两个核心原则，Rails结合了PHP体系的优点（快速开发）和Java体系的优点（程序规整），主要有如下的6大特点： (1) 全栈式的MVC框架Rails 是一个全栈式的MVC框架，换句话来说，通过Rails可以实现MVC模式的各个层次，并使他们无缝地协同运转起来。在实际开发一个MVC模式的Web应用项目中，如果使用java开发时，需要用到Structs、Hibernate和Spring三个框架，而且需要额外整合3个框架开发出的内容。而使用Ruby语言开发相同的项目时，只需要用到Rails框架就可以完成。(2) 约定优于配置为了说明各个对象之间的关联关系，一般的Web应用开发框架往往采用写入XML配置文件的方法。这种方法虽然可以解决一些问题，但是却带来管理上的混乱。Rails对此采取的解决方案是“约定优于配置”，这意味着在Rails中不会出现XML配置文件。Rails使用Web应用多年来积累的各种常见约定（更具体地说是命名规则）来代替XML配置文件，而在Rails内部的映射与发现机制根据这些约定可以实现对象之间的关联。(3) 更少的代码使用约定来代替XML配置文件说明Rails本身完成了大量的底层工作，这意味着使用较少的代码来实现应用程序是极有可能的。此外，代码量的缩减也减少了出现bug的可能性，降低了维护程序和升级程序的难度。(4) 生成器Rails使用的实时映射技术和元编程技术，免去了开发人员在开发过程中编写大量样本文件代码的烦恼。在少数需要使用样本文件代码的时候，开发人员可以通过Rails内建的生成器脚本实时创建，而不再是通过手工编写。Rails的这个特点可以使开发人员更专注于系统的逻辑结构，而不必为一些琐碎的细节所烦恼。(5) 零周转时间对已有的Web应用系统进行修改后，其一般需要经过配置、编译、发布、重新配置、测试等一系列步骤才能投入使用，这明显浪费了许多时间。而使用Rails开发Web应用系统，可以通过浏览器即时查看程序运行结果，从而节约了大量的时间。(6) 支架系统 Rails的支架系统可以自动为任何相关的数据表创建一套包含标准CRUD操作和前台视图的系统。通过支架系统，开发人员可以方便快捷地操作数据库中的数据表。此外，Rails也允许开发人员使用自己设计的代码或视图来替代自动生成的代码和视图。(7) 指导原则Rails的指导原则是“不要重复你自己”(Dont Repeat Yourself, 或DRY)。意思是说你写的代码不会有重复的地方。比如以往数据库的接口往往是类似的程序代码但是在很多地方都要重复用到，这无论是给编写还是维护都造成了很大的代价，相反，Rails给你提供了绝大多数的支持，让你只需要短短的几行代码就可以实现强大的功能。而且，Rails提供了代码生成工具，让你甚至不需要编写一行代码就实现强大的管理程序。Rails通过reflection和runtime extension减少了对configuration文件的依靠，这和Java，C#语言的方向有很大不同，让你减少了很多配置和部署的麻烦，但是性能上却完全可以应付一般网站的需求。2.1.2 MVC设计模式Rails是使用纯Ruby编写的框架(Framework)。它对Web开发提供了强有力的支持，如支持数据映射、MVC模式、Web Services、安全等。而且这些功能操作起来要比同类的产品容易的多，例如其MVC模式就比Struts更容易使用。除了这些，Rails还可以根据模板自动生成Web应用程序（只需要在命令行简单输入“rails web应用程序名”单击回车后便可以轻松生成完整的Web应用骨架）。这样可以省去我们很多的时间。图2-1所示为Rails框架的三层架构示意图：WEBrick服务器ActiveRecord（业务逻辑组件、DAO组件、领域对象三合一）ORM发送请求响应请求调用业务逻辑方法返回处理结果持久层框架数据库MVC框架交互底层数据库ActionController（控制器组件）RHTML页面（视图）用户图2-1 Ruby on Rails 应用的架构示意图图2-2所示为自动生成的Rails框架：图2-2 自动生成的 Rails 应用骨架参考图2-1及图2-2可以推知，Ruby on Rails的模型-视图-控制器架构由以下各部分组成：（1）模型模型包含着应用的状态，状态可能是临时的，也可能是长久性保存在数据库中的。需要注意的是模型不仅包含数据，而且包含数据所代表的逻辑。在 Rails 中，模型通常是由一些代表关系数据库中RDBMS表的类组成的。在RoR中，模型类是通过ActiveRecord模式进行处理的。一般来说，程序员要做的是继承ActiveRecord 类，同时程序会自动计算出要使用哪个RDBMS表，这个表有哪些列，表与表之间的关系通过简单的命令来指明。ActiveRecord 类是RoR应用的核心，它合并了JavaEE应用中的三个成员富领域对象、业务逻辑组件和DAO组件，因此功能复杂同时也最丰富。它虽然必须继承Rails框架的持久化基类，但比之Hibernate的持久化来的简洁，Hibernate的持久化对象必须处于Hibernate Session的管理下才可以进行持久化。其差异比较如图2-3所示：图2-3 ActiveRecord和Hibernate持久化的差别（2）控制器控制器将用户界面（RHTML）和数据模型（ActiveRecord）关联起来，并充当协调运作的角色。它接收各种用户操作，更新数据模型，并用合适的View展示结果给用户。像它的名字一样，可以说Rails的Web应用的主要控制中心就是各个控制器。比之Struts，Rails只需要一个控制器就能完成多种操作，而Struts则需要多个，并且需要在struts-config.xml中分别配置每个Action和其对应的URL。Rails则采用“约定”的方式，省去大量繁琐的配置。其差异比较如图2-4所示：图2-4 ActiveRecor和Hibernate持久化的差别（3）视图View 负责根据 Model 中的数据显示用户界面，负责收集用户输入的表单页，以及返回包含处理结果的显示页。作为 Web 应用，Rails 里的View通常是生成部分或者整个网页，当然也可以是XML甚至是JavaScript代码，通常表现为使用内嵌Ruby的 HTMLXMLJavaScript 模板。2.2 数据库选用 MySQL Database 5.0 作为后台数据库。MySQL的体积小、速度快、总体拥有成本低、而且开放源码，这些优点无疑成为敏捷开发的首选，并且Rails 对 MySQL 具有良好的支持。只需对Rails工程下的config/database.yml配置文件进行简单修改，就可以使用rake、数据迁移等强大功能。2.2.1 数据库配置一般而言，开发应用程序由三个阶段组成：开发编码、测试和产品发布阶段。在这三个阶段，开发者的需要有很多的差异。在开发编码阶段，开发者希望看到更多的日志、能够立即加载修改过的代码、直观的错误提示等等。而在测试阶段，开发者就需要一个相对独立的环境，这样测试才具有可重复性。在真实发布运行时，系统需要最优化的效率，最佳的用户体验，并且不应该让用户看到错误。为了支持这些不同的需求，Rails引入了运行时环境的概念。在不同的环境下运行同一个应用程序，应用程序也会发生变化。标准的三个运行环境(development.rb、production.rb、test.rb)默认存在于config/environments目录中。如图2-5所示：图2-5 environment目录因为config/database.yml文件负责配置与数据库的连接。这个文件由三部分组成，分别对应开发编码、测试和产品发布数据的配置。将pinkeweb数据库设在development运行时环境：development中，便于查找日志和修改代码。因此，实际开发中，我们只需对development部分进行修改，如图2-6所示。图2-6 数据库连接配置2.2.2 模型设计PinKeWeb主要用到的模型，通过ActiveRecord就能以面向对象的方式操作底层关系数据库。ActiveRecord包装了数据库中的某个表（或视图）的某一行，并封装了对数据库的存取，通过这个对象，即可访问数据库，执行CRUD操作。Rails的ActiveRecord的持久化必须继承ActiveRecord:Base类，之后，Rails会根据命名约定，把持久化类和一个与之同名且为复数形式的数据表对应形成映射。并于此可指定数据库表之间的关联关系（一对一belongs_to，一对多has_many，多对多关系需要创建第三张表作为连接表）。此处举一例说明，如图2-7所示：图2-7 用户表模型2.2.3 迁移任务在Rails中有很多方法来创建数据库表，可以使用地层面的DDL(数据库定义语言)，如create table之类的，也可以使用navicate等可视化操作，用可视化工具是有代价的，以前所作的修改都丢失了，所有的操作都是不可撤销的。还好，Rails数据迁移工具帮我们解决了这一问题。每一个迁移任务代表队数据库的一次修改，采用独立于数据库的形式。修改的内容既可以是改变数据库结构，如加一个表。也可以是修改数据库中的数据。在PinKeWeb中，以002_create_users.rb为例，运行完002_create_user.rb后，它会自动映射到数据库的users表。由图2-7和图2-8的对照比较，可以看出002_create_user.rb和users表是自动映射的。图2-8 用户表迁移任务第三章 网站页面设计3.1 总体设计理念Web2.0 网站主要强调直接或直观的交流。所以它与以往类型的网站在设计的上呈现的潮流有所不同。总的来讲，web2.0 网站的设计主要考虑易用性。3提到 web2.0 网站设计，想到最多的便是“交互体验”，其实所谓网站“交互体验”，就是用户对网站浏览和操作过程的感受，是对网站设计和功能安排的认知和体会。4本文从体验者的角度，分别从以下2个角度进行阐述感官体验浅白的讲，这就是网站给用户留下的第一印象，即用户初次访问网站所留下的直观感受，是“漂亮”、“典雅”、抑或是“简洁”等等词语都可以用来概括用户的感官体验。作为网站交互体验设计的第一层，感官体验主要通过网站的整体形象来创造。不妨作如下划分：（1）直观的导航导航一定要清晰，明确。包括格式规整，栏目的设置简明易懂，文章列表最好有摘要；交互功能有明显的提示；阅读往返方便，跳转简易便捷。图3-1 导航截图（2）合理的布局常用的网站布局设计划分为三块，即页首 logo，页脚，以及页面正中中间的信息正文主体。这里项目用到了 Rails 的布局模板，即使用 layout 下的 application.rhtml （包含页首、页脚等部分）作为全局模板，然后用其他模块单元作为布局模板来填充主体内容。图3-2 俱乐部页面截图（3）鲜明的色彩固然有的网站侧重使用淡彩设计，但这里所说的“鲜明的色彩”，主要是指色彩对主题的表达一目了然。同时有科学分析表明，色彩比印象要来得深刻，充分发挥色彩在“简洁、鲜明”主题氛围的营造功能和对网站主题的说明功能，更能提升访问者对网站认可程度的印象分。以身边常见的例子为例，如可口可乐公司以红色、激情、简洁风格为主格调，而 IBM 则以蓝色的博大，典雅，给人以深刻印象。我们设计的拼客网站，学习走淡彩简洁路线，选择简单、典雅的淡灰色作为主色调，主题显得朴实明了，界面简单，易于操作。图3-3 拼客网首页截图行为体验行为体验就是网民使用网站过程中的感受。这种感受来源于很多方面：包括功能、视觉和可用性等多个方面。但如果仔细分析网民在网站上的所有操作行为，会发现，大量的操作无非就分属两类：一类是需要点击鼠标的，一类是需要键盘输入的。行为体验设计核心在于用户行为优化。用户行为优化，也就是网站操作的便捷程度。针对上述分析的网民操作，可以通过减少无效点击、简化注册流程、理清访问路径等几个方面来改善用户体验。拼客网使用 Ajax 和 Rails 自带的验证功能，减少用户的错误信息录入、重复输入和长时间的刷新等待，提供一系列友好的界面提示，清晰明了的网站导航，提供丰富的用户交互、即时消息展示、富文本录入功能等功能，更好地展现用户情感。让用户更自然、更喜欢、更主动地用键盘来说话。从而体现 web2.0 的用户参与的意义。图3-4 注册页面截图图3-5 富文本编辑框截图3.2 CSS + xHTML随着 Web 标准在国内的逐渐普及以及很多业内人士的大力推行，众多的网站已经开始重构，Web标准的推出将网站的内容与表现分离，同时xHTML文档具有良好的结构，因此需要抛弃传统的表格布局方式，采用 DIV，并使用 CSS层叠样式表来实现页面的外观。5布局 CSS+DIV 进行网页重构相对与传统的 TABLE 网页布局而具有以下3个方面的显著优势：（1）表现和内容相分离将设计部分剥离出来放在一个独立样式文件（CSS）中，HTML 文件中只存放文本信息。这样的页面对搜索引擎更加友好。举俱乐部最新留言为例：RHTML页面代码为：图3-6 俱乐部最新留言RHTML代码截图其对应的CSS为：图3-7 俱乐部最新留言页面对应的部分CSS代码截图项目显示效果：图3-8 俱乐部最新留言页面截图（2）提高页面浏览速度对于同一个页面视觉效果，采用 CSS+DIV 重构的页面而产生的容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2大小。使得浏览器不用去编译大量冗长的标签，从而提高浏览器解析和显示速度。（3）易于维护和改版采用 CSS+DIV 重构后的页面，只需要简单地修改几个 CSS 文件，就可以达到重新设计整个网站页面的目的。在 Rails 框架中的样式文件，根据其约定，存放在 publicstylesheets 文件夹下。在页面中，可依据项目实际需求，通过语句 all % ，指定需要引用的自定义 CSS 文件。图3-9 项目中的 CSS 文件截图3.3表现层解决方案正如先前所述，Rails 是一个符合 MVC 的架构，Ruby on Rails提供了功能非常强大的表现层方案，主要包含：RHTML模板、RXML模板和RJS模板三种形式，在拼客网站中，主要采用了最常用的RHTML模板。Rails框架是以固定的命名习惯来自动判断整个架构，默认下会将网址分析成 http:/domain-name/ControllerName/ActionName/Attribute/ 然后执行目标Controller中的Action，并取出指定的View（视图）回传给浏览器显示。RHTML比之JSP页面，是更加纯粹的表现层，可以避免开发者将过多的业务逻辑插入RHTML页面。同时，在RHTML页面中可以使用大量功能丰富的帮助方法（Helper），这些帮助方法非常类似于JSP页面中的标签通过一个简单的帮助方法，底层可以隐藏复杂的显示逻辑。（例如Rails中用以封装及实现Ajax的Helper）不仅如此，RHTML页面还支持丰富的页面装饰技术，使用约定来定义装饰页面。装饰器的作用类似于JavaEE应用里的SiteMesh框架的应用，它提供了简单的方法来为整个应用生成统一的页面风格。允许开发者在定义RHTML页面时只需关心实际的表单和数据输出，而无须理会页面美观、页面效果。一旦开发者开发了完整的应用，美工人员就可以为整个站点编辑装饰器页面，或者为特定模块编写特定的装饰器页面，从而保证整个应用、整个模块有相同的视觉风格。ROR应用的装饰器页面都放在web应用的appviewslayouts路径下，装饰器页面也是一个RHTML。下面以club 为例进行介绍。图3-10 项目中的club 页面代码在图3-6中index.rhtml是作为club的默认首页，其他的rhtml文件分别对应club_controller 中的相应controller，每次页面的跳转，根据约定，将使用相应名字的页面装饰器（即对应的rhtml文件）。第四章 Web2.0 和 Ajax 技术4.1 Web2.0Web2.0 是相对Web1.0的新的一类互联网应用的统称。由Web1.0单纯通过网络浏览器浏览HTML网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。Web1.0的主要特点在于用户通过浏览器获取信息，Web2.0则更注重用户的交互作用，用户既是网站内容的消费者（浏览者），也是网站内容的制造者。Web1.0到Web2.0的转变，具体的说，从模式上是单纯的“读”向“写” 、“共同建设”发展。所以互联网下一步，是要让所有的人都“动起来” ，用全民力量共同编织出贴近生活的“网” 。到目前为止，对于Web2.0概念的说明，通常采用Web2.0典型应用案例介绍，加上对部分Web2.0相关技术进行解释。这些Web2.0技术主要包括：博客（BLOG）、RSS、百科全书（Wiki）、威客、网摘、社会网络（SNS）、P2P、即时信息（IM）等。Web2.0正处在不断发展的过程之中，而且将向更灵活、更生活化发展。首先，网络用户可以足不出户，也不用在本机安装软件，就可以使用远程的软件资源，软件对于硬件的依赖程度将大大的减弱；其次，网络用户的思维将发生改变，从最初的好奇演变到学会利用Web2.0进行学习，交流，以及资源共享；第三，网络用户的交友方式将得到极大的升华，网络资源不再是死的知识而是活的人力资源信息；第四，网络用户的思想版权将得到进一步的强化，知识无国界，思维创新是个人劳动的成果，Web2.0必将建立更为合理的版权管理第五，网络用户可以将自己的一些资源放到网上共享，而不用考虑速度，无需下载。即使不知道HTML也可以轻松的搭建个人电台、个人电视台、个人DJ、个人游戏、个人商店将充斥互联网，甚至还可以拥有个人聊天工具，只有你的好友才知道。WEB2.0的发展，是以人为核心主体的互联网向更宽广、更深入、更先进的方向发展。根据用户在互联网上留下的痕迹，组织浏览的线索，提供相关的服务，给用户创造新的价值，给整个互联网产生新的价值，才是WEB2.0的终极目标。4.2 Ajax 的定义与关键技术4.2.1 Ajax 定义Ajax 是 Asynchronous JavaScript and XML (以及 DHTML 等)的缩写。是 Web2.0 的重要组成部分，极好地改善了用户体验。Ajax 使用 XMLHttpRequest 对象异步地发送请求，使用简单的 JavaScript 函数监视服务器响应，当服务器响应完成后，JavaScript通过 DOM 动态更新 Html 页面，从而避免让用户等待，让用户感受到一种连续的体验。4.2.2 Ajax 与传统B/S 架构的比较（1）传统的B/S 结构分析B/S结构（Browser/Server结构）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。的应用具有更广的适应性，更好的开放性，而且无须安装客户端，从而具有极大的优势。但同时也存在有种种问题。图4-1传统的B/S 结构请求响应示意图缺点： 独占式的请求，若前一个请求没有得到完全响应，则后一个请求不能发送。频繁的页面刷新。长时间的服务器相应等待。（2）Ajax应用分析使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。Ajax采用异步发送请求的方式，这使得Web应用程序更为迅捷地回应用户动作，避免了用户等待，从而带给用户连续的体验，并且避免了在网络上发送那些没有改变过的信息。不仅如此，Ajax技术还有一个优势：基于Ajax的应用无需浏览器下载任何插件，Ajax应用可以在任何平台上运行良好。Ajax还有个显著的优势是：Ajax基于的技术大多是些“古老”的技术，例如JavaScript，XML，DOM，CSS等。相比ClickOnce等新的技术，开发人员更乐意选择这些已经熟悉的技术，同时，这些技术都是标准的，并不属于任何特定的厂商，目前所有的浏览器都对Ajax技术支持良好。Ajax使用简单的XMLHttpRequest对象发送请求，使用简单的JavaScript函数解释服务器响应，当服务器响应完成后，JavaScript通过DOM动态更新HTML页面。至始至终，用户的动作无须中断，用户感受的是一种连续的体验。7图4-2 Ajax请求响应示意图由图4-2和图4-1比较可知，异步请求是Ajax最核心的东西，在用户提交表单后无须等待服务器的相应，可以继续浏览当前页或者继续发送请求，是无须长时间耐心等待服务器端漫长的响应的。（3）传统web网站与具有Ajax技术的web2.0网站比较：图4-3传统Web应用和Ajax的Web应用模型比较6通过对图4-1、图4-2以及图4-3三幅图分析比较可知：1、传统web网站当用提交表单(form)，服务器接收并处理传来的表单，然后返回一个新的网页。这个做法主要有如下几个缺陷：(1) 浪费带宽。因为在前后两个页面中的大部分HTML代码往往是相同的；(2) 在网络上对请求响应的是冗余重复的HTML+CSS数据文件，文件传输量较大，相应等待的时间增长；(3) 响应时间长。由于每次交互都需要向服务器发送请求，当服务器在处理数据的时候，用户则处于等待的状态。每一步操作都需要等待，太多的等待会使用户越来越没有耐心，无法给予良好的用户体验。2、具有Ajax的web2.0网站的优势(1) 通过异步模式，提升了用户体验；(2) 在网络上对请求响应的是格式化的XML文件，数据的传输量较少；(3) 优化了浏览器和服务器之间的实际数据传输，加入了一层Ajax引擎的处理，减少不必要的数据往返，减少了带宽占用。4.2.3 实现Ajax 的关键技术(1) Ajax 的核心：XMLHttpRequestAjax 技术的核心是异步发送请求，而XMLHttpRequest则是异步发送请求的对象，是浏览器与服务器交换信息的载体。如果抛开异步发送请求，Ajax的其他技术将完全失去原有的意义。(2) Ajax的编程脚本：JavaScript语言JavaScript是一种跨平台的基于对象的脚本语言。它是Ajax技术中重要的编程脚本。在整个交互过程中，JavaScript主要完成如下事情创建XMLHttpRequest对象。通过XMLHttpRequest向服务器发送请求。创建回调函数，监视服务器响应状态，当服务器响应完成后，启用回调函数。回调函数通过 DOM 动态更新 HTML 页面。一言以蔽之：JavaScript是Ajax的粘合剂，通过JavaScript将其它几个技术有机结合起来。(3) HTML页面的DOM模型它是操作HTML和XML文件的API，提供了文件的结构表述，通过DOM，HTML页面以一种结构化的方式组织在一起，HTML内容以节点方式组织（例如document代表HTML文件本身，table对象代表HTML的表格对象）。其本质是提供JavaScript操作网页内容与呈现的方式。(4) 此外，Ajax技术还依赖于CSS、XML和JSON等技术。第五章Ajax 在拼客网的应用5.1 Rails的Ajax支持Ajax的底层实现需要编写从XMLHttpRequest对象创建、请求发送、指定回调函数等等一系列的JavaScript代码，而且JavaScript还存在一个跨浏览器的问题。若是直接去手动编写交互的全部过程，过于繁琐而且易出错，对敏捷开发的效率有很大影响。本文试举一例，用纯JavaScript代码写Ajax过程，拟定实现功能为在一个对话框内输入book名，发送aj