我们已经提到,在传统的Web应用中,服务器在每个步骤都需要把模板文件、内容和数据 混合发送给浏览器。但实际上,当向购物车中添加一件物品的时候,服务器真正需要响应的 仅仅是更新一下购物车中的价格。如图1-13所示,这只是整个文档中极小的一小部分。 基于Aiax的购物车可以向服务器发起一个异步请求来完成这件事,这样做显得更聪明。模 板文件、导航列表和页面布局上的其他部分已经随着初始页面发送给了浏览器,服务器无需 重发,以后每次只需要发送相关的数据就可以了 Aax应用可以通过多种方式来做这件事情。例如,返回一段 Javascrip代码、一段纯文本或 者一小段XML文档。这些方式各自的优缺点,我们将留到第5章再详细考察。但是,毫无 疑问的是,无论返回数据采用何种格式,这些方式所传输的数据量都要比传统的Web应用 中一股脑返回一个大杂烩的方式少得多 在Ajax应用中,网络的通信流量主要是集中在加载的前期,无论如何,用户登录后是需要 一次性地将一个大而复杂的客户端交付给浏览器。但是在此之后,与服务器的通信则会有效 率得多。对于瞬态应用来说,积累起来的通信流量要比以前的基于页面的Web应用少很多 与此同时,平均的交互次数则有所增加。整体而言,Aax应用的带宽消耗要比传统的web 应用低一些。 1.2.3用户交互变得流畅而连续 浏览器提供了两种输入机制:超链接和HIML表单 超链接可以在服务器上创建,并预加载指向动态服务器页面或者 servlet的CGl参数。可以 用图片或者CSS(层叠样式表)来装饰超链接,并且当鼠标停在上面时还可以提供基本的反 馈。经过合理设计,超链接可以变成一个很有想像力的UI组件。 表单则提供了桌面应用的一组基础UI组件:输入文本框、单选按钮和多选按 钮,还有下拉列表。但仍然缺少很多有用的UI组件,例如,没有可用的树控件、可编辑的 栅格、组合输入框等。表单像超链接一样,也指向服务器的一个URL地址
我们已经提到，在传统的 Web 应用中，服务器在每个步骤都需要把模板文件、内容和数据 混合发送给浏览器。但实际上，当向购物车中添加一件物品的时候，服务器真正需要响应的 仅仅是更新一下购物车中的价格。如图 1-13 所示，这只是整个文档中极小的一小部分。 基于 Ajax 的购物车可以向服务器发起一个异步请求来完成这件事，这样做显得更聪明。模 板文件、导航列表和页面布局上的其他部分已经随着初始页面发送给了浏览器，服务器无需 重发，以后每次只需要发送相关的数据就可以了。 Ajax 应用可以通过多种方式来做这件事情。例如，返回一段 JavaScript 代码、一段纯文本或 者一小段 XML 文档。这些方式各自的优缺点，我们将留到第 5 章再详细考察。但是，毫无 疑问的是，无论返回数据采用何种格式，这些方式所传输的数据量都要比传统的 Web 应用 中一股脑返回一个大杂烩的方式少得多。 在 Ajax 应用中，网络的通信流量主要是集中在加载的前期，无论如何，用户登录后是需要 一次性地将一个大而复杂的客户端交付给浏览器。但是在此之后，与服务器的通信则会有效 率得多。对于瞬态应用来说，积累起来的通信流量要比以前的基于页面的 Web 应用少很多。 与此同时，平均的交互次数则有所增加。整体而言，Ajax 应用的带宽消耗要比传统的 Web 应用低一些。 1.2.3 用户交互变得流畅而连续 浏览器提供了两种输入机制：超链接和 HTML 表单。 超链接可以在服务器上创建，并预加载指向动态服务器页面或者 servlet 的 CGI 参数。可以 用图片或者 CSS（层叠样式表）来装饰超链接，并且当鼠标停在上面时还可以提供基本的反 馈。经过合理设计，超链接可以变成一个很有想像力的 UI 组件。 表单则提供了桌面应用的一组基础 UI 组件：输入文本框、单选按钮和多选按 钮，还有下拉列表。但仍然缺少很多有用的 UI 组件，例如，没有可用的树控件、可编辑的 栅格、组合输入框等。表单像超链接一样，也指向服务器的一个 URL 地址
KA) 新页面 新页面,新页面, 数 表 登录 图1-13细分服务器发送的内容,(A)是传统的Web应用,(B)是Aax应用。(C)表示随着应 用使用时间的延长,累积的网络流量的增长情况 超链接和表单也可以指向 JavaScript函数。这一技术通常用在将数据提交给服务器之前对表 单输入进行简单的校验,如检验是否有空值,数值是否越界等等。这些 JavaScript函数的生 存期和页面本身是一致的,当页面提交之后,这些函数也就不存在了 当一个页面已提交而下一个页面还没有显示出来的时候,用户实际上处于没人管的状态。老 的页面还要显示一会儿,浏览器甚至还会允许用户点击一些链接。但这些点击可能会导致 些不可预料的结果,甚至破坏服务器端会话的状态。用户通常应该等到页面刷新完成,当然 也可以选择在刷新完成之前就在新页面上做一些操作。例如,当页面只显示了一部分时从中 选择一条裤子放进购物车不大可能会造成什么破坏(例如,不会修改顶级的服装分类:男装、 女装、童装、配饰)。 我们继续看这个购物车的例子。Ajax的购物车是通过异步方式发送数据的,用户可以很快 地把东西拖进来,就像点击一样快。只要客户端购物车的代码足够健壮,它可以很轻松地处 理这样的负载,而用户则可以继续做他想做的事 要知道,在服务器端并没有一个真正的购物车等着装东西,只有会话中的一个对象而已。购 物的时候,用户并不想知道会话对象,购物车对于用户而言是一个较恰当的比喻,用现实世 界中熟悉的概念来描述这里发生的事情。对于用户来说,如果强迫他们去理解计算机领域中 的术语,只会让他们远离网站。等待页面的刷新,一下子就把用户从愉快的使用体验中拽了 出来,让他感觉到自己所面对的只不过是一台冰冷的机器罢了(图1-14)。使用Ajax来实现 这些应用则可以避免这些令人不快的体验。当然了,在这个例子中的购物只是一个瞬态活动
图 1-13 细分服务器发送的内容，(A)是传统的 Web 应用，(B)是 Ajax 应用。(C)表示随着应 用使用时间的延长，累积的网络流量的增长情况 超链接和表单也可以指向 JavaScript 函数。这一技术通常用在将数据提交给服务器之前对表 单输入进行简单的校验，如检验是否有空值，数值是否越界等等。这些 JavaScript 函数的生 存期和页面本身是一致的，当页面提交之后，这些函数也就不存在了。 当一个页面已提交而下一个页面还没有显示出来的时候，用户实际上处于没人管的状态。老 的页面还要显示一会儿，浏览器甚至还会允许用户点击一些链接。但这些点击可能会导致一 些不可预料的结果，甚至破坏服务器端会话的状态。用户通常应该等到页面刷新完成，当然 也可以选择在刷新完成之前就在新页面上做一些操作。例如，当页面只显示了一部分时从中 选择一条裤子放进购物车不大可能会造成什么破坏（例如，不会修改顶级的服装分类：男装、 女装、童装、配饰）。 我们继续看这个购物车的例子。Ajax 的购物车是通过异步方式发送数据的，用户可以很快 地把东西拖进来，就像点击一样快。只要客户端购物车的代码足够健壮，它可以很轻松地处 理这样的负载，而用户则可以继续做他想做的事。 要知道，在服务器端并没有一个真正的购物车等着装东西，只有会话中的一个对象而已。购 物的时候，用户并不想知道会话对象，购物车对于用户而言是一个较恰当的比喻，用现实世 界中熟悉的概念来描述这里发生的事情。对于用户来说，如果强迫他们去理解计算机领域中 的术语，只会让他们远离网站。等待页面的刷新，一下子就把用户从愉快的使用体验中拽了 出来，让他感觉到自己所面对的只不过是一台冰冷的机器罢了（图 1-14）。使用 Ajax 来实现 这些应用则可以避免这些令人不快的体验。当然了，在这个例子中的购物只是一个瞬态活动
考察一下其他的业务领域,例如,一个业务量很大的帮助中心或者一项复杂的工程任务,如 果因为需要等待页面刷新而将工作流程打断几秒钟[9],那肯定是不可接受的 案例 消费看 煅念、陪 消费登 业务领 合同 分界(痛苦的穿越) 文件系统 文佯系统 Web忠务 教据模型、比特 wab务 和字节、机器 嫩据库 数据库 图1-14处理事件打断了用户的工作流程。用户要处理与业务相关的和与计算机相关的两种 对象。这迫使用户频繁地在这两者之间切换,从而导致用户注意力分散,工作效率降低 Ajax的另一个好处是,我们可以对丰富的用户操作事件进行捕获。类似于拖拽这样的复杂 UI概念也不再是遥不可及的。这使得Web应用的U体验可以全面提升到近乎与桌面应用 的UI组件相媲美的高度。从可用性的角度来看,这很重要,不仅仅是因为它释放了我们的 想象力,而且也是因为它可以将用户交互和服务器端的请求更加充分地混合起来。 在传统的Web应用中,与服务器交互需要点击超链接或者提交表单,然后等待页面的刷新, 这打断了用户的工作流程。与之相对应的是,让服务器响应鼠标移动、拖拽或者键盘输入这 样的用户事件,也就是说,服务器在用户身边为用户服务,而不是挡在用户前面,打断他 操作。GoogleSuggest(www.google.com/webhp?complete=l)就是这样一个简单的但是很有 说服力的例子。当用户在搜索框键入一些字符的时候,应用从服务器取回与用户已键入字符 串相似的搜索条目(根据全世界其他人的搜索),并且显示在输入框下方的下拉列表中。第 8章将提供这类服务的一个简单实现。 124有纪律的严肃编程 现在传统的web应用有时候也会用到 JavaScript,不过主要是用来给页面添加一些花哨的东 西。基于页面的模型使得这样的增强没有办法更进一步,限制了用户可以得到的更加理想的 交互。这种类似于第22条军规的状况,使得 JavaScript很不公平地获得了一种琐碎的、自 由散漫的编程语言的名声,为那些严肃的开发者[10所不屑 为Ajax应用编程的情况则完全不同。提交给用户运行的应用将会一直运行直到用户关闭程 序为止。不崩溃,不变慢,也没有内存泄漏之类的毛病。如果我们的产品定位于独占式应用 的市场,这还意味着很多小时的密集使用。要达到这个目标,当然需要高性能的、可维护的 代码,这与服务器端应用的要求是一致的。 相比之下,Aax的代码库会比传统的Web应用大很多。对代码库进行良好的组织是非常重 要的。编写代码不再是单个开发者的职责,而是整个团队来参与。可维护性、分离关注点、 共同的编程风格以及设计模式,这些都是需要考虑的问题 从某个角度来看,Ajax应用就是用户所使用的一块复杂的代码,它需要高效地与服务器进 行通信。它显然来源于传统的基于页面的Web应用,但是它们之间的相似性也仅限于此 两者之间的差别就像是木马轮和现代自行车之间的差别。在脑海中要记得它们之间的这些差 别,因为只有这样才能创造出真正引人注目的web应用 1.3真实世界中的Ajax富客户端
考察一下其他的业务领域，例如，一个业务量很大的帮助中心或者一项复杂的工程任务，如 果因为需要等待页面刷新而将工作流程打断几秒钟[9]，那肯定是不可接受的。 图 1-14 处理事件打断了用户的工作流程。用户要处理与业务相关的和与计算机相关的两种 对象。这迫使用户频繁地在这两者之间切换，从而导致用户注意力分散，工作效率降低 Ajax 的另一个好处是，我们可以对丰富的用户操作事件进行捕获。类似于拖拽这样的复杂 UI 概念也不再是遥不可及的。这使得 Web 应用的 UI 体验可以全面提升到近乎与桌面应用 的 UI 组件相媲美的高度。从可用性的角度来看，这很重要，不仅仅是因为它释放了我们的 想象力，而且也是因为它可以将用户交互和服务器端的请求更加充分地混合起来。 在传统的 Web 应用中，与服务器交互需要点击超链接或者提交表单，然后等待页面的刷新， 这打断了用户的工作流程。与之相对应的是，让服务器响应鼠标移动、拖拽或者键盘输入这 样的用户事件，也就是说，服务器在用户身边为用户服务，而不是挡在用户前面，打断他的 操作。Google Suggest（www.google.com/webhp?complete=1）就是这样一个简单的但是很有 说服力的例子。当用户在搜索框键入一些字符的时候，应用从服务器取回与用户已键入字符 串相似的搜索条目（根据全世界其他人的搜索），并且显示在输入框下方的下拉列表中。第 8 章将提供这类服务的一个简单实现。 1.2.4 有纪律的严肃编程 现在传统的 Web 应用有时候也会用到 JavaScript，不过主要是用来给页面添加一些花哨的东 西。基于页面的模型使得这样的增强没有办法更进一步，限制了用户可以得到的更加理想的 交互。这种类似于第 22 条军规的状况，使得 JavaScript 很不公平地获得了一种琐碎的、自 由散漫的编程语言的名声，为那些严肃的开发者[10]所不屑。 为 Ajax 应用编程的情况则完全不同。提交给用户运行的应用将会一直运行直到用户关闭程 序为止。不崩溃，不变慢，也没有内存泄漏之类的毛病。如果我们的产品定位于独占式应用 的市场，这还意味着很多小时的密集使用。要达到这个目标，当然需要高性能的、可维护的 代码，这与服务器端应用的要求是一致的。 相比之下，Ajax 的代码库会比传统的 Web 应用大很多。对代码库进行良好的组织是非常重 要的。编写代码不再是单个开发者的职责，而是整个团队来参与。可维护性、分离关注点、 共同的编程风格以及设计模式，这些都是需要考虑的问题。 从某个角度来看，Ajax 应用就是用户所使用的一块复杂的代码，它需要高效地与服务器进 行通信。它显然来源于传统的基于页面的 Web 应用，但是它们之间的相似性也仅限于此， 两者之间的差别就像是木马轮和现代自行车之间的差别。在脑海中要记得它们之间的这些差 别，因为只有这样才能创造出真正引人注目的 Web 应用。 1.3 真实世界中的 Ajax 富客户端