最近评论
正在载入评论列表...
本章将介绍Rails对Ajax的支持以及如何开发基于Ajax的Rails应用。本章的学习目标如下：认识Ajax、了解Rails对Ajax的支持、了解开发Rails的Ajax应用的基本步骤、熟悉Rails中Protype的使用。
19.1 Ajax入门
一直以来，基于Web的应用程序和基于桌面的应用程序互有优劣，难分伯仲，也就是常说的BS架构和CS架构。人们常常向往着BS的易于开发和维护，却又考虑着CS架构带来的丰富的客户端控制能力。对于这两种构架，要做出一个选择绝非易事，必须全面考虑应用程序的用途、用户习惯、性能等各种因素。
然而，Ajax的出现却让人们对选择基于Web的应用程序多了一份筹码。通过Ajax，许多Web界面可以和传统的桌面程序相媲美，提高了Web程序的客户端控制能力和响应速度。
尽管Ajax并非一个革命性的新技术，而是多种老技术的整合应用，但它以在Google中的成功应用为代表，受到了广泛的关注和重视，也使人们对它的前景充满了信心。这一章将介绍Ajax的概念、涉及的主要技术、在Web开发中的作用和影响，以及使用Ajax可能带来的问题。
19.1.1 Ajax的含义
Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML），它不是一项新技术，而是很多成熟技术的集合。然而Ajax能作为一个新名词出现，而且吸引了那么多人的关注，必定有其相当迷人的地方。
和Applet、Flash相比，Ajax是一种轻量级的解决方案。因为它操作的基础是HTML或者是XHTML，使用的脚本语言是JavaScript，这可以保证它的纯文本性质，比起Applet或Flash，具有更好的搜索引擎友好性；设计出色的Ajax应用还可以很好地工作在旧版本的设备上；利用XML，Ajax可以和其他应用程序方便地进行通信。Ajax可以迅速赢得别人注意的另外一个重要原因还在于它完全是基于成熟的技术：作为异步调用的基础设施XMLHttpRequest早在1999年就引入了IE浏览器，随后又被各大浏览器支持，成为事实上的标准；而JavaScript、DOM、CSS早就是W3C标准，一般浏览器都能很好的支持。
19.1.2 传统的Web开发模式
传统的Web开发模式是一种请求→刷新→响应的模式，每个请求由单独的一个页面来显示，发送一个请求就会重新获取这个页面，也就是常说的刷新。在这种模式下，每个应用程序由多个页面组成，每个页面对应到服务器端的一个业务逻辑，或者说是功能块。而在客户端显示的页面实际上只是一个纯界面性质的东西，告诉用户想获取的信息。
例如对于Hotmail的日历功能，单击任何一个日期，或者单击日期旁边的小箭头实现月份的切换，都导致页面的重新载入，不仅速度慢而且影响使用的连贯性。如图19.1所示。
随着服务器端技术的发展，用户界面已经不仅仅是显示数据的作用，还可以接受用户输入，形成交互式Web设计。但无论怎么变化，有一个模式始终没有变：即每个页面都对应到一个完整的服务器端处理逻辑。用户想获取这个页面就必须由服务器完成整个逻辑，设计师们为了权衡重复计算带来的性能问题，常常会在信息完整性和页面划分粒度上着重考虑，哪些功能必须放在一起使用，哪些功能可以拆分为不同的页面来进行，这实际上就是为了提高页面响应速度所做的考虑。
从图19.2中可以看出，客户端的每个页面都对应服务器端的一个页面，而应用程序的功能则由各个页面所组成。每个子功能可能对应到一个或多个页面，这取决于设计人员的考虑。虽然开发方式灵活多样，但有一点不变，就是当用户需要获取一条信息，它必须将信息对应到一个页面，由浏览器发送这个请求，服务器接收到请求后会将整个页面作为一个整体提供给用户，而不管页面中是否包含冗余的信息。很显然，这对于用户来说降低了其访问速度，因为被迫接收了无用的信息。
图19.1 Hotmail的日历功能 图19.2 传统Web开发模式体系结构图
说明：即使Web开发人员为了提高响应速度而将页面粒度降得很低，也不能很好得解决这个问题。这也是对于客户端控制传统BS架构不如CS架构的重要原因。
Web页面中还有大量静态不变的元素，比如用于整体架构的HTML元素，用于界面表现的图片、CSS、用于广告效果的Flash等，在传统模式下，它们都是造成大网络流量的主要因素，因为每请求一次页面，这些数据都必须重新加载，虽然浏览器的缓存可以解决一些问题，但浏览器还是必须从服务器重新获取数据，从而判断这些图片或Flash是否有更新的版本。
19.1.3 基于Ajax的开发模式
比起传统的Web开发模式，Ajax则向传统桌面程序靠拢了许多，一个Web页已经越来越趋向于一个单独的应用程序。一个Web页可以从多个接口获取数据，并将它们更新在页面中，所有的工作都是在后台完成，用户不需要面对浏览器的空白。设计良好的Ajax程序可以告诉用户浏览器正在做什么，让用户可以边等待边完成其他的工作。
在Ajax中，每个客户端页面不一定是对应一个服务器端页面，而可能是由多个服务器端页面共同协作完成该页面所需要的功能。
大多数服务器端的页面已经不再作为界面表现的工具，而是作为提供数据的接口，XMLHttpRequest对象能够获取这些页面的信息，并将其提交到客户端页面的Ajax引擎，由Ajax引擎来处理这些数据并表现到页面，可以用图19.3来示意这样的结构。
从图19.3中可以看到，在Ajax中，每个在客户端表现的页面可以由多个服务器端页面共同完成，一个服务器端页面可以为多个客户端页面服务。在这样的模式下，每个服务器端页面可以将功能的粒度分得很细，至于这些功能怎么组合，则完全是客户端的事。通过Ajax引擎，客户端页面可以根据用户的需要来调用服务器端相应的页面，获得数据并显示在页面上。或许此时许多服务器端页面已经不能称之为页面，而应该称之为接口。
19.1.4 Ajax中的关键技术
Ajax是多种老技术的一个组合应用，然而尽管很多技术都已经存在多时并且相当成熟，但却没有引起人们足够的重视，对它们的了解一般也都停留在一个很基础的阶段。这一章就将对这些技术做一个简要的介绍，说明它们在Ajax中所起的作用以及如何协同工作。
1．JavaScript脚本语言
网页设计者常常在设计的页面中加入很多脚本特效，例如由字符串组成的时钟，滚动的状态栏，漫天飘舞的雪花等，这些都是JavaScript的功劳。
在Ajax中，JavaScript已经从默默无闻的后台状态完全转移到了前台，发挥着巨大的作用。可以说，JavaScript是Ajax中的黏合剂，它使DOM、XHTML、XML和CSS可以互相协作，并控制它们的行为。
现在Web程序中基于JavaScript实现的很多功能已经具有相当大的实用性，不再是一些特效或者表单验证那么简单，当然，这些应用所使用的JavaScript技术也是相当专业的。因此，要实现复杂高效的Ajax应用程序，就必须对JavaScript有深入的认识，应该像对待一门新的语言一样来对待它。
2．XMLHttpRequest对象
XMLHttpRequest是一个长期被人们忽视的对象，这与它的强大功能形成了鲜明的对比。借助它可以在网页的背后和浏览器进行异步通信，而无需刷新整个页面。XMLHttpRequest对象由JavaScript中创建并使用，客户端可以仅仅从服务器端获取它需要的信息；通过与DOM和CSS的结合，就可以实现局部刷新的效果；同时还可以通过XMLHttpRequest对象异步提交信息，将用户的输入在后台提交到服务器而无需刷新这个页面。
说明：XMLHttpRequest的典型应用是Google Maps和Google Suggest，它催动了Ajax概念的诞生，说它是Ajax的核心推动力毫不为过。
3．可扩展标记语言（XML）
XML自诞生以来以其简洁和通用的特性为各大开发商所支持，针对XML的应用和开发工具也非常丰富。简单地说，XML就是一种标记语言，与HTML的性质完全相同。更准确地说，XML正是从HTML转化而来。
XML作用很大而且广为接受，它为跨平台跨领域的应用提供了一种通信手段。在Ajax中，它以客户端和服务器端通信载体的身份出现。按照最初对Ajax的定义，服务器端和客户端的通信都应该由XML来完成。事实上，使用XML的确可以带来很多好处，例如数据传输显得非常规范，服务器端和客户端的开发人员可以很好的协同工作，不用为数据格式的问题而烦恼；可以方便地使用XSLT将XML文档直接转换为HTML片段插入到页面中。
4．文档对象模型（DOM）
文档对象模型（DOM）用来表示显示在浏览器的整个文档对象及其层次结构。在Ajax中，DOM模型是不可缺少的一部分。使用JavaScript可以访问文档中的所有结点，即所有对象。
通过改变这些对象的属性，用户可以控制页面的局部行为，将动态获取的数据插入到文档中，实现局部刷新的目的；用户还可以利用DOM模型增加和删除文档结点，实现界面元素的动态变化。
DOM模型使得页面层次结构能够动态的变化，一个典型应用便是能够实现拖动效果，图19.4显示了ComponentArt公司（http://www.componentart.com/）生产的TreeView控件，能够实现树状结构的展开和折叠，以及结点的拖放功能。
图19.4 使用DOM模型和JavaScript实现拖动效果
5．级联样式表技术（CSS）
比起其他技术的默默无闻，CSS在最近两年则是热火朝天，其中一个重要的原因就是使用Web标准进行页面设计正逐渐成为主流。
在Ajax中，CSS同样担当着界面表现的重任，其重要性甚至超过了传统的Web程序设计。JavaScript通过XMLHttpRequest对象和服务器进行交互，通常获取的都是单纯的数据，不包括表现元素，而将这些数据插入到文档本身就是一件严谨的工作，如果此时还需要使用JavaScript操作标记的属性来控制其外观，会使代码更加复杂而且难以维护，也无法做到使程序开发人员和界面设计人员分工合作，使用CSS则能很好地解决这些问题。CSS知道出现在某个地方的标记应该显示什么样式，通过简单的类属性和id属性也很容易决定哪些元素应该有怎样的表现形式。
