爱问 爱问共享资料 爱问分类
首页 > > > AJAX In Action-CH .pdf

AJAX In Action-CH .pdf

AJAX In Action-CH .pdf

上传者: freedompan
7次下载 0人收藏 暂无简介 简介 2011-06-26 举报

简介:J2EE 前台相关学习资料ajax

dearbook一种新的Web设计方法本章内容异步网络交互和使用模式Ajax与传统Web应用的关键区别Ajax的四个基本原则真实世界中的Ajax想的用户界面是无形的。需要的时候,召之即来,所有想要的功能一应俱全;不需要的时候,挥之即去,用户可以不受干扰地继续专注于手头的问题。然而,这样的用户界面总是可遇而不可求的。日复一日,用户只能顺从于那些远未尽如人意的用户界面,并且慢慢习惯了这些低劣的应用。直到某一天,有人给我们展示了一种更好的方法,这时候我们才意识到,过去使用的方法是多么地落伍。当今的因特网界也正在认识到,用于显示文档内容的基本Web浏览器技术,已经无法胜任更高层面的任务了。Ajax(AsynchronousJavaScript+XML,即异步JavaScript+XML)是一个相当新的名字,是由AdaptivePath1的咨询顾问JesseJamesGarrett首先提出来的。Ajax的一些部分,以前称作动态HTML(DynamicHTML)和远程脚本(remotescripting)。Ajax的名字更加简洁,而且它容易让人联想起很多东西:洗衣粉(高露洁的Ajax牌洗衣粉)、荷兰的足球队(知名的阿贾克斯球队)、希腊英雄(疯狂的埃阿斯)等等。不仅名字好听,无论是从技术还是从商业角度,Ajax同样让人耳目一新。技术上,Ajax极大地发掘了Web浏览器的潜力,开启了大量新的可能性。商业上,Google和其他主要的参与者通过眼花缭乱的Ajax应用,让普通大众对于新一代的Web应用充满了期待。越来越复杂的基于Web的新型服务,不断冲击着我们已经习惯了的传统Web应用。其实有一大堆技术可以提供表现能力更加丰富、更加智能或者在其他方面更好的客户端应用,但Ajax却只需要使用一些在绝大多数现代电脑上既有的技术,就能举重若轻地完成同样的任务。也就是说,在Ajax中,采用的是一系列已有的甚至是老旧的技术,把它们重新锻造、延伸,1.它是一家业界知名的用户体验咨询公司,网址为http://www.adaptivepath.com。——译者注理第1章www.dearbook.com.cndearbook第1章一种新的Web设计方法3超越其原有的概念,让我们可以应付客户端程序所要面对的复杂情况。本书不仅会分别考察每一种技术,而且也会从整体上考察大型的Ajax项目。读完本书,你会对此有一个完整的理解。此外,书中还穿插介绍了很多Ajax设计模式。众所周知,设计模式有助于获取知识和经验,也帮助我们有效地与他人沟通。遵循设计模式所倡导的编程规律,我们可以更容易地建造出当需求变化时易于修改、便于扩充的应用。这些设计模式甚至会让你的工作更有乐趣。1.1为什么需要Ajax富客户端?建造一个富客户端1毫无疑问要比设计一个网页复杂。付出这些额外的努力,动机何在?需要付出什么代价?而且……等一下,富客户端到底是什么?富客户端的两个要点是:第一,它是“富”的;第二,它是“客户端”。这好像是一句废话,别急,待我稍作解释。“富”是指客户端的交互模型,要有多样化的输入方式和符合直觉的及时反馈手段。说简单点儿,一个“富”的应用使用起来应该像是在使用现在的桌面应用一样,例如,就像是使用字处理软件(Word)或电子表格软件(Excel)。接下来,我们有必要仔细地考察一下所要涉及的各个方面。1.1.1比较用户体验花几分钟使用一下你选中的应用(浏览器除外),记下它用到了哪些用户交互,然后马上回来。为了简短起见,我举一个电子表格的例子,但是,这里所涉及的要点是通用的,足以针对文本编辑器上的各种情形。好,我们开始。先在电子表格中随便输入几个等式,注意到,可以以几种方式进行交互:编辑数据,用键盘和鼠标浏览数据,还可以使用鼠标拖拽来重新组织数据。我做这些操作的时候,程序给了我反馈。移动鼠标的时候,光标改变了形状;当鼠标停在上面的时候,按钮变亮了;选中的文字也改变了颜色。窗口或者对话框被选中的时候,也和平常显得不一样了,等等(图1-1)。这些就是所谓“富”的交互。当然了,仍然有一些有待改进的地方,但这是一个好的开始。OK,电子表格就是一个富客户端程序了吗?当然不是。在电子表格或者类似的桌面应用中,业务逻辑和数据模型是在一个封闭的环境中运行的。在这个环境中,它们彼此清晰地了解对方,并且可以互相访问,而环境之外的东西,对于它们来说是未知的(图1-2)。那么客户端又是什么呢?它是与另一个独立的进程相互通信的程序,后者通常运行在服务器上。一般来说,服务器总是要比客户端大一些,能力强一些,配置更好一些,因为在服务器上通常要存储浩如烟海的信息。客户端程序使得最终用户可以查看和修改这些信息,1.RichClient,译作富客户端,这里“富”的意思是“表现能力丰富的”,相关的术语还有RIA(RichInternetApplicati-on),译作富因特网应用。——译者注www.dearbook.com.cndearbook4第一部分重新思考Web应用当多个客户端连接在同一个服务器上的时候,可以在它们之间共享这些信息。图1-3展示了一个简单的客户/服务器架构。图1-1这个桌面电子表格应用展现了用户交互的众多可能性。被选中单元格的行列标题都是突出显示的;按钮在鼠标移上去的时候会显示提示信息;工具栏上排列着各种丰富的控件;单元格也可以交互地查看和编辑图1-2一个独立的桌面应用的架构示意图。应用运行在它自己的独立进程之中,数据模型和程序逻辑能够彼此“看到”对方的存在。除了通过文件系统之外,同一个应用的第二个运行实例1没有办法访问到第一个运行实例的数据模型。通常来说,整个程序的状态都保存在单个文件中,当应用运行的时候,这个文件会被加锁以阻止其他的进程同时访问1.即进程。——译者注进程1进程2逻辑文件系统逻辑数据模型数据模型www.dearbook.com.cndearbook第1章一种新的Web设计方法5图1-3客户/服务器系统和n层架构的示意图。服务器提供了共享的数据模型,客户端与该数据模型交互。客户端同时还维护数据模型的一部分,以获得快速的访问,但是它将服务器端的模型当作业务领域对象的最终表示。多个客户端可以与同一个服务器交互,当然,这需要有合适的资源锁定机制和合理的对象(或者数据行)隔离措施作为保证。服务器可以是单进程的,就像在20世纪90年代早期和中期传统的客户/服务器模型中一样,也可以是由很多个中间件层或者多个Web服务等组成。在任何一种情况下,从客户端的角度来看,服务器都有一个单独的接入点,可以看作是一个黑盒在现代的n层架构中,服务器往往要和更远的后端服务器(例如数据库)通信,因此被称作“中间件”的层同时扮演着客户端和服务器的角色。我们的Ajax应用位于这个链的一端,它仅仅是作为客户端,因此为讨论方便,我们可以把整个n层系统看作是一个标记为“服务器”的黑盒。我的电子表格应用只需要管理它自己保存在内存或本地文件系统中的少量数据。如果架构设计良好的话,数据和它的表现形式的耦合可以非常松散,但是我不能通过网络来分割或者通过网络来共享它们。从这个意义上来说,电子表格应用不是一个客户端。与之相对应的Web浏览器就是一个典型的客户端,它与Web服务器通信,请求需要的页面。浏览器有丰富的功能,用来管理用户的浏览行为,常见功能有回退按钮、历史列表和分页浏览多个文档等等。但是当我们把特定网站的Web页面看作是一个应用时,这些通用的浏览功能实际上和应用关系不大,充其量也就如电子表格和Windows的开始按钮或者窗口列表之间的关系。我们来考察一下现代的Web应用。为了简单起见,我们选择了“地球人都知道”的在线书店Amazon.com(图1-4)。在浏览器中打开Amazon网站,因为在此之前我访问过,它会给我显示一个友好的问候、一些推荐书目,还有我的购买历史信息。点击推荐书目中的任何一条,就会转到另外一个页面(此时,页面要刷新一下,在这几秒钟内我什么也看不到)。新页面是该书的相关信息:书评、二手书报价、同一作者的其他著作,以及以前我浏览过的其他书籍(图1-5)。进程1逻辑数据模型进程2逻辑数据模型服务器(例如数据库)进程1逻辑数据模型进程2逻辑数据模型中间件层服务器群因特网服务“服务器”www.dearbook.com.cndearbook6第一部分重新思考Web应用图1-4Amazon.com的首页。系统记得我上一次的访问。导航链接除了通用模板文件,还有个性化信息图1-5Amazon.com书籍详细信息的页面。包括一大堆通用信息和个性化信息的超链接。虽说其中的大量内容和图1-4中的一模一样,但是由于Web浏览器使用基于文档的操作,每次发送新页面都必须要重新发送这些内容简而言之,呈现在我面前的是非常丰富的、关联度很高的信息。但是对我而言,交互的方式就是点击那些超链接,然后填写一些表格。假设我在键盘前面不小心睡着了,第二天才醒来,如www.dearbook.com.cndearbook第1章一种新的Web设计方法7果不刷新页面,我就没法知道《哈里波特》系列的新书已经出版了,也不能将我的列表从一个页面带到另一个页面,我要是想同时看到更多一些东西也不行,因为我无法改变页面上局部内容区域的大小。我似乎是在批评Amazon的界面,其实并非如此,我只是拿它来做个例子。事实上,在传统Web开发方式的桎梏下,他们已经做得非常棒了。但是比起电子表格来说,它所用的交互模型毫无疑问是太有限了。为何现代的Web应用仍然有这么多的局限呢?造成目前的状况有一些合理的技术原因,我们现在就来考察一下。1.1.2网络延迟因特网的宏伟蓝图是将这个世界上所有的计算机都连接起来,形成一个无比巨大的计算资源。如果能把本地调用和远程调用等同起来,那么无论是分析蛋白质的成分还是破解外太空的信号,使用者都无需考虑机器的物理位置,剩下来的只有愉快地计算。但是非常不幸,本地调用和远程调用是完全不同的东西。在现有的技术水平之下,网络通信仍然是一件代价高昂的事情(也就是说,通常很慢,而且并不可靠)。在没有网络调用的情况中,不同的方法和函数以及它们所操作的数据都位于相同的本地内存中(图1-6),向方法内传递数据并且获得方法的返回结果是非常直接的。图1-6本地过程调用的顺序图。参与者很少,因为程序逻辑与数据模型都保存在本地内存中,并且彼此可以直接访问而在有远程调用的情况下,位于网络两端的通信双方为了发送和接收数据在底层需要进行大量计算(图1-7)。比起数据在线路上的往返,这些计算需要消耗更多的时间。传输一段二进制的数据,中间要经过很多环节的编码和解码、错误校验、失败重发、数据包拆分和重组,数据最终转化为0和1表示的二进制信号,通过线路(或者无线连接)到达另外一方。在本地,调用函数的调用请求被编码为一个对象,然后将这个对象序列化为一系列字节,最后使用应用层协议(通常是HTTP)通过物理传输介质(例如铜缆、光纤或者无线电波)将其发送出去。在远程机器上,对应用层协议解码,将获得的数据字节反序列化,创建一个请求对象的副本。然后对数据模型应用这个对象并生成一个响应对象。为了将响应对象传递给本地的调用函数,所调用函数本地内存模型www.dearbook.com.cndearbook8第一部分重新思考Web应用有的序列化、反序列化以及传输层的操作都要反向再来一次。最后,响应对象被传递给本地的调用函数。图1-7远程过程调用的顺序图。一台机器的程序逻辑尝试操作另外一台机器上的数据模型这个交互过程很复杂吧,幸好,它是可以自动完成的。现代的编程环境如Java和Microsoft的.NET框架都内置了这个能力。尽管如此,执行远程调用时,上述所有这些操作仍然会在内部执行。如果我们到处使用远程调用,性能势必会大受影响。这也就是说,远程调用是不可能和本地调用一样有效率的。更糟糕的是,网络的不稳定更让这种效率损失捉摸不定,难以预计。相比之下,运行在本地内存之中的本地调用,在这一点上无疑要有优势得多。等等,说了半天的远程调用,这和软件的可用性有关系吗?答案是,大有关系。一个成功的计算机用户界面要能以最起码的水平模拟我们在真实世界中的体验。交互的基本规则之一就是,当我们推一下、刺一下或者捅一下某个东西的时候,它立刻就会响应。响应的时间只要稍微拖长一点点,就会使人困惑,分散其注意力,把关注点从手头的任务转移到用户界面上。远程调用横穿整个网络,需要执行大量的额外操作,它们往往会把系统拖慢,使用户察觉到延迟。在桌面应用中,只有当可用性设计做得非常糟糕的时候,才会出现这种令用户感觉充满bug、反应迟钝的用户界面,但在网络应用中,什么都不做就能得到大量这样的界面。因为网络延迟不可预测,这类界面问题往往都神出鬼没,对应用响应的测试也难以开展。换句话说,网络延迟是导致实际应用的交互性糟糕的一个普遍原因。1.1.3异步交互用户界面的开发者对于网络延迟只能做最坏的假设。简单地说,就是要尽可能让用户界面与调用函数本地模型序列化应用协议物理传输媒介应用协议序列化远程模型www.dearbook.com.cndearbook第1章一种新的Web设计方法9网络活动无关。天才的程序员们早已发明了一种确实有效而且久经考验的方案,来专门解决这一问题。先卖个关子,让我们到现实世界中走一趟。在我每天早上必做的事中,很重要的一项是叫醒我的孩子去上学。我可以站在床边把他们折腾醒,催着他们起床穿衣,但这是一种很耗费时间的方法,总要耗费我很多宝贵的早间时光(图1-8)。图1-8在我每日早晨必做的事中,以同步方式响应用户输入的顺序图。顺序图中纵向表示时间的流逝,其中的阴影区域表示了我被阻塞不能接受其他输入的时间长度我要叫醒孩子,看看窗外,往往会忽略了喂猫。孩子们起来之后会问我要早餐。就像服务器端的进程一样,孩子们起床总是慢吞吞的。如果我遵循同步交互模式,就要等他们老半天。不过,只要他们嘟囔一句“我醒了”,我就可以先去干其他的事,需要时再回来看看他们。按照计算机的术语,我需要做的就是为每个孩子在一个单独的线程中建立一个异步进程。开始之后,孩子们会在他们的线程里自己起床,我这个父线程没有必要同步傻等,他们完事后会通知我(往往还会问我要吃的)。在他们醒来的过程中,我并不需要和他们交互,就当他们已经起来并自己穿好衣服了,因为我有理由相信他们很快会这么做的(图1-9)。对于任何用户界面来说,这是一种沿用已久的实践,即创建异步的线程,让它在后台处理那些需要计算很久的任务,这样用户可以继续做其他的事情。当启动这个线程的时候,有必要阻塞1.唤醒窗户饿猫待哺熟睡的孩子2.慢慢醒来3.通知4.凝望窗外5.忘了喂猫www.dearbook.com.cndearbook10第一部分重新思考Web应用用户的操作1,但是在可接受的很短时间之后,阻塞就会解除。因为存在网络延迟,使用异步方式来处理任何耗时的远程调用是一种很好的实践。图1-9以异步方式响应用户输入的顺序图。如果遵循异步的输入模式,我可以让孩子们在醒来的时候通知我。在他们缓慢的起床过程中,我可以继续从事其他活动,这使得我被阻塞的时间大大缩短实际上,网络延迟问题和相关的解决方案由来已久。在老的客户/服务器模式中,当设计不佳的客户端程序碰上了高负载的服务器时,用户界面就会出现让人难以忍受的延迟。即便是在如今的因特网时代,当切换页面时,如果浏览器半天出不来东西,那么这种糟糕的情况很可能就是因为网络延迟造成的。在现有技术条件下,我们暂时还没有办法消除网络延迟,但是至少有一个对策,那就是采用异步方式处理远程调用,不是吗?糟糕的是,对于Web开发人员而言这样做存在一个难点:HTTP协议是一个“请求—响应”模式的协议。也就是说,客户端请求一个文档,服务器要么返回这个文档,要么告诉客户端找不着文档或者让客户端去另外一个地方找,还可以告诉客户端可以使用它的本地缓存,诸如此类。总而言之,“请求—响应”模式的协议是一种单向的通信协议。客户端可以向服务器发起连接,但是服务器不可以向客户端发起连接。甚至,当客户端下次发起通信请求时,健忘的服务器都记不起来这个客户端是谁了(HTTP是无连接的)。多数Web开发者使用现代的编程语言,例如,Java、PHP或者.NET,他们熟悉用户会话(usersession)的概念,这其实是应用服务器对于不能保持连接状态的HTTP协议的一种补救措施。HTTP就其最初的设计目的来说表现得非常好,采用一些巧妙的处理,它能够适应设计之初没有考虑的场1.这么做的目的是确保线程被成功地创建和启动。——译者注1.唤醒窗户饿猫待哺熟睡的孩子2.快速通知6.通知5.忘了喂猫3.慢慢醒来4.凝望窗外www.dearbook.com.cndearbook第1章一种新的Web设计方法11合。但是我们的这个异步回调方案中的关键特征是,客户端会收到两次通知,一次是在线程创建的时候,另一次是在线程结束的时候。标准的HTTP和传统Web应用模型可不会提供这些。像Amazon那样的传统Web应用,是建造在页面概念之上的。给用户显示一个文档,上面包括各种链接和表单,用户可进一步访问更多的文档。这种交互模式可以在很大的规模上支持复杂的数据集(就像Amazon和其他网站已经证明的那样),它所提供的用户体验也足以满足开展业务的需要。十年来,这种交互模式在我们对因特网商业应用的看法上打下了深深的烙印。界面友好的所见即所得(WYSIWYG)Web制作工具使得站点更容易被理解为一堆页面。服务器端的Web框架使用状态图来对页面的转换建模。没有引入,传统的Web应用就这么一直牢牢地束缚在页面刷新操作之上,就好像这种刷新是理所当然而且无可避免的,从没有尝试过任何异步的处理方案。当然,毫无疑问,传统的Web应用肯定不是一无是处的。毕竟Amazon在这种交互模式上创造了成功的商业应用。但是这种适用于Amazon的方式并不一定适用于所有的人。为什么这么说呢?要理解这一点,我们需要考察用户的使用模式(usagepattern)。1.1.4独占或瞬态的使用模式泛泛地讨论自行车和SUV(运动型轿车)孰优孰劣毫无意义。因为它们各自都有优点和缺点——舒适度、速度、油耗或者个人身份的象征等等。只有在特定的使用模式下讨论,这样的比较才有意义。例如,是要在上下班高峰时段穿越市中心,还是要带上一家老小去度假,或者只是要找个躲雨的地方。在类似这样的具体情况下,我们才能有的放矢地比较。对于用户界面,亦复如是。软件可用性专家AlanCooper写了很多有关使用模式的好文章,他定义了两种主要的使用方式:瞬态的(transient)和独占的(sovereign)1。瞬态应用可能每天都会偶尔使用一下,但是总是作为次要的活动,突发性地用上一会儿。与之形成鲜明对比的是独占应用,独占应用需要应付用户每天几个小时的持续使用。很多应用天生就具备独占或者瞬态的性质。例如,写作用的字处理软件就是一个独占应用,可能还会用到几个瞬态的应用,比如文件管理(文件的开启和关闭窗口中常常会嵌入这个功能)、字典或者拼写检查工具(很多字处理程序也嵌入这些功能),还有与同事联络的电子邮件和聊天工具。而对于软件开发者,文本编辑器、调试器或者IDE(集成开发环境)则是独占的。独占应用常常使用得更频繁。要知道,一个良好的用户界面应该是不可见的。衡量使用频繁程度的一个好的标尺,是当这个用户界面发生明显的停顿时,它对于用户流程的影响。例如,从一个目录向另一个目录移动文件要发生2秒钟的停顿,我能愉快地接受;可是如果这两秒是发生1.实际上,AlanCooper从行为的立场出发,总共定义了四种软件姿态(softwareposture),分别是:独占(sovereign)、瞬态(transient)、精灵(daemonic)和辅助(auxiliary)。后两者对于Ajax应用来说,意义尚不明确,所以此处并未提及。——译者注www.dearbook.com.cndearbook12第一部分重新思考Web应用在我正饱含激情地用绘画软件创作一幅作品时,或者是我正努力地调试一段很难对付的代码时,这肯定会让我感觉十分不爽。Amazon是一个瞬态应用,eBay、Google以及大多数大型的公众Web应用都是瞬态应用。自因特网诞生之日起,专家们就曾经预测传统的桌面应用面临Web应用的冲击。十年过去了,这些都还没有发生,为什么呢?基于Web页面的方案对于瞬态应用是足够了,但是对于独占应用却还远远不够。1.1.5忘掉Web现代Web浏览器和它最原始的出发点(从远程服务器上获得一个文档)相比已经完全不是一码事了,它们之间就像是瑞士军刀和新石器时代的狩猎工具一样,可谓是天壤之别。各种交互组件、脚本语言和插件,这些年来无法抑制地疯狂发展,近乎强制地一次又一次地创造着新的浏览体验。[可以到www.webhistory.org/www.lists/wwwtalk.1993q1/0182.html瞻仰一下浏览器的史前时代。1993年的时候,Netscape创立之前的MarcAndreessen(Netscape的创始人)还在游说TimBerners-Lee(Web的创始人,W3C的领导者)等人,列举为HTML引入一个图片标签的好处]。几年以前,一些先行者就已经开始把JavaScript当作一种严肃的编程语言来对待。但就整体而言,更多的人仍然把它和那些假模假样的警告框以及“点击猴子赢大奖”的广告一类的小把戏联系在一起。浏览器大战导致JavaScript成了个被误解的、病态的孩子,Ajax可以看作是他的康复中心1。只要适当引导,然后给它配上合适的框架,JavaScript就很有可能变成因特网的模范公民。它能真正增强Web应用的实用性,而且不强迫用户安装额外的软件,或者逼迫用户抛弃自己心爱的浏览器。得到广泛理解的成熟的工具可以帮助我们达成这一目标。本书后面会大量提到的设计模式就是这样一类工具。推广和普及一项新技术,既是技术事务,也是社会行为。一旦技术已经成熟,人们还需要领会应该如何去使用它。这一步骤常常是通过用它来做我们很熟悉的事情开始的。比如,早年的自行车叫做“木马轮”或者“蹬行马”,靠脚使劲蹬地的反作用力来前进。随着这一技术渐渐为大众所接受,后来的发明者们会发明出这一技术新的使用方式,给它加上踏板、刹车、链条齿轮以及充气轮胎。每一次的发明创造,都使得自行车中马的影子越来越淡,以至于彻底消失(图1-10)。相同的过程也发生在如今的Web开发领域。Ajax背后的技术有能力将Web页面转换成某种完全不同的新东西。早期Ajax的使用尝试使得Web页面开始变得像“木马轮”一样不伦不类。要领悟Ajax的精髓,我们就要忘掉Web的页面概念,也就是说,我们要打破这些年来所形成的经验。就在Ajax正式命名后的这几个月,这样的事已经发生了不少。1.即Ajax是使得Web恢复健康发展的良药。——译者注www.dearbook.com.cndearbook第1章一种新的Web设计方法13图1-10现代自行车的发展1.2Ajax的四个基本原则我们用到的很多框架中都已经固化了基于页面的传统应用模式,同时这些应用模式也已经深深进入了我们的思想中。我们花几分钟来揭示出哪些核心概念是我们需要重新思考的,以及如何从Ajax的角度来重新思考。1.2.1浏览器中的是应用而不是内容在传统的基于页面的Web应用中,浏览器扮演着哑终端1的角色。它对用户处于操作流程哪一阶段一无所知。这些信息全部都保存在服务器上,确切地说,就是在用户会话上。时至今日,服务器端的用户会话早已是司空见惯。如果你使用Java或者.NET编程,服务器端的用户会话更是标准API的一部分——还有Request、Response、MIME类型——没有了它们简直不可想象。图1-11描绘了传统Web应用典型的生命周期。当用户登录或者以其他方式初始化一个会话时,系统会创建几个服务器端的对象。例如,电子商务类型的网站需要创建表示购物车以及用户身份证明的对象。同时将浏览器站点的首页呈现给用户,这个HTML标记的数据流由模板文件以及特定于该用户的数据和内容(例如该用户最近浏览的商品列表)组成。用户每次和服务器交互,都会获得另一个文档。在这个文档中,除了特定于该用户的数据以外,包含的其他模板文件和数据都是相同的。浏览器总是忠实地丢弃掉老的文档,显示新的文档,因为它是哑终端,而且也不知道还可以做些什么。当用户选择退出或者关闭浏览器的时候,应用退出,会话消失。这个时候持久层会把用户下次登录后需要显示的信息存储起来。Ajax则不同,它把一部分应用逻辑从服务器端移到了浏览器端,图1-12描绘了这一情况。1.哑终端即指不具有智能的终端。——译者注www.dearbook.com.cndearbook14第一部分重新思考Web应用图1-11传统Web应用的生命周期。用户和应用会话的所有状态都保留在Web服务器上。用户在会话中看到的是一系列的页面,每次页面切换都不可避免地要到服务器上走一个来回图1-12Ajax应用的生命周期。用户登录后,服务器交付一个客户端应用给浏览器。这个应用可以独立处理很多的用户交互,对于自己无法独立处理的交互,应用会以后台方式发送请求给服务器,而不会打断用户的操作流程Web浏览器服务器登录Web页面退出页面业务逻辑用户的数据模型用户会话共享数据模型注销Web浏览器服务器登录退出页面业务逻辑用户的数据模型用户会话共享数据模型注销用户的部分数据模型(JavaScript)客户端应用交付客户端应用频繁的数据请求Web页面Web页面www.dearbook.com.cndearbook第1章一种新的Web设计方法15用户登录的时候,服务器交付给浏览器一个复杂得多的文档,其中包含大量的JavaScript代码。这个文档将会在整个会话的生命周期内与用户相伴。在这一过程中,随着用户与其交互,它的外观可能会发生相当大的变化。它知道如何响应用户的输入,能够决定对于这些请求,是自行处理还是传递给Web服务器(Web服务器再去访问数据库或者其他资源),或者通过两者结合的方式进行处理。因为这个文档在整个用户会话中都存在,所以它可以保存状态1。例如,购物车的内容可以保存在浏览器中而不是服务器的会话中。1.2.2服务器交付的是数据而不是内容我们已经提到,在传统的Web应用中,服务器在每个步骤都需要把模板文件、内容和数据混合发送给浏览器。但实际上,当向购物车中添加一件物品的时候,服务器真正需要响应的仅仅是更新一下购物车中的价格。如图1-13所示,这只是整个文档中极小的一小部分。基于Ajax的购物车可以向服务器发起一个异步请求来完成这件事,这样做显得更聪明。模板文件、导航列表和页面布局上的其他部分已经随着初始页面发送给了浏览器,服务器无需重发,以后每次只需要发送相关的数据就可以了。Ajax应用可以通过多种方式来做这件事情。例如,返回一段JavaScript代码、一段纯文本或者一小段XML文档。这些方式各自的优缺点,我们将留到第5章再详细考察。但是,毫无疑问的是,无论返回数据采用何种格式,这些方式所传输的数据量都要比传统的Web应用中一股脑返回一个大杂烩的方式少得多。在Ajax应用中,网络的通信流量主要是集中在加载的前期,无论如何,用户登录后是需要一次性地将一个大而复杂的客户端交付给浏览器。但是在此之后,与服务器的通信则会有效率得多。对于瞬态应用来说,积累起来的通信流量要比以前的基于页面的Web应用少很多。与此同时,平均的交互次数则有所增加。整体而言,Ajax应用的带宽消耗要比传统的Web应用低一些。1.2.3用户交互变得流畅而连续浏览器提供了两种输入机制:超链接和HTML表单。超链接可以在服务器上创建,并预加载指向动态服务器页面或者servlet的CGI参数。可以用图片或者CSS(层叠样式表)来装饰超链接,并且当鼠标停在上面时还可以提供基本的反馈。经过合理设计,超链接可以变成一个很有想像力的UI组件。表单则提供了桌面应用的一组基础UI组件:输入文本框、单选按钮和多选按钮,还有下拉列表。但仍然缺少很多有用的UI组件,例如,没有可用的树控件、可编辑的栅格、组合输入框等。表单像超链接一样,也指向服务器的一个URL地址。1.即保存在本地内存中。——译者注www.dearbook.com.cndearbook16第一部分重新思考Web应用图1-13细分服务器发送的内容,(A)是传统的Web应用,(B)是Ajax应用。(C)表示随着应用使用时间的延长,累积的网络流量的增长情况超链接和表单也可以指向JavaScript函数。这一技术通常用在将数据提交给服务器之前对表单输入进行简单的校验,如检验是否有空值,数值是否越界等等。这些JavaScript函数的生存期和页面本身是一致的,当页面提交之后,这些函数也就不存在了。数据数据积累的数据数据烙印内容数据表现逻辑传统的Ajax登录新页面新页面新页面注销登录注销登录注销时间时间时间www.dearbook.com.cndearbook第1章一种新的Web设计方法17当一个页面已提交而下一个页面还没有显示出来的时候,用户实际上处于没人管的状态。老的页面还要显示一会儿,浏览器甚至还会允许用户点击一些链接。但这些点击可能会导致一些不可预料的结果,甚至破坏服务器端会话的状态。用户通常应该等到页面刷新完成,当然也可以选择在刷新完成之前就在新页面上做一些操作。例如,当页面只显示了一部分时从中选择一条裤子放进购物车不大可能会造成什么破坏(例如,不会修改顶级的服装分类:男装、女装、童装、配饰)。我们继续看这个购物车的例子。Ajax的购物车是通过异步方式发送数据的,用户可以很快地把东西拖进来,就像点击一样快。只要客户端购物车的代码足够健壮,它可以很轻松地处理这样的负载,而用户则可以继续做他想做的事。要知道,在服务器端并没有一个真正的购物车等着装东西,只有会话中的一个对象而已。购物的时候,用户并不想知道会话对象,购物车对于用户而言是一个较恰当的比喻,用现实世界中熟悉的概念来描述这里发生的事情。对于用户来说,如果强迫他们去理解计算机领域中的术语,只会让他们远离网站。等待页面的刷新,一下子就把用户从愉快的使用体验中拽了出来,让他感觉到自己所面对的只不过是一台冰冷的机器罢了(图1-14)。使用Ajax来实现这些应用则可以避免这些令人不快的体验。当然了,在这个例子中的购物只是一个瞬态活动。考察一下其他的业务领域,例如,一个业务量很大的帮助中心或者一项复杂的工程任务,如果因为需要等待页面刷新而将工作流程打断几秒钟1,那肯定是不可接受的。图1-14处理事件打断了用户的工作流程。用户要处理与业务相关的和与计算机相关的两种对象。这迫使用户频繁地在这两者之间切换,从而导致用户注意力分散,工作效率降低Ajax的另一个好处是,我们可以对丰富的用户操作事件进行捕获。类似于拖拽这样的复杂UI概念也不再是遥不可及的。这使得Web应用的UI体验可以全面提升到近乎与桌面应用的UI组件相媲美的高度。从可用性的角度来看,这很重要,不仅仅是因为它释放了我们的想象力,而1.如果这种打断还是非常频繁的,所累积的效率损失将是巨大的。——译者注案例账户消费者合同文件系统文件Web服务数据库概念、隐喻、业务领域数据模型、比特和字节、机器数据库文件系统消费者案例账户合同Web服务分界(痛苦的穿越)文件www.dearbook.com.cndearbook18第一部分重新思考Web应用且也是因为它可以将用户交互和服务器端的请求更加充分地混合起来。在传统的Web应用中,与服务器交互需要点击超链接或者提交表单,然后等待页面的刷新,这打断了用户的工作流程。与之相对应的是,让服务器响应鼠标移动、拖拽或者键盘输入这样的用户事件,也就是说,服务器在用户身边为用户服务,而不是挡在用户前面,打断他的操作。GoogleSuggest(www.google.com/webhp?complete=1)就是这样一个简单的但是很有说服力的例子。当用户在搜索框键入一些字符的时候,应用从服务器取回与用户已键入字符串相似的搜索条目(根据全世界其他人的搜索),并且显示在输入框下方的下拉列表中。第8章将提供这类服务的一个简单实现。1.2.4有纪律的严肃编程现在传统的Web应用有时候也会用到JavaScript,不过主要是用来给页面添加一些花哨的东西。基于页面的模型使得这样的增强没有办法更进一步,限制了用户可以得到的更加理想的交互。这种类似于第22条军规的状况,使得JavaScript很不公平地获得了一种琐碎的、自由散漫的编程语言的名声,为那些严肃的开发者1所不屑。为Ajax应用编程的情况则完全不同。提交给用户运行的应用将会一直运行直到用户关闭程序为止。不崩溃,不变慢,也没有内存泄漏之类的毛病。如果我们的产品定位于独占式应用的市场,这还意味着很多小时的密集使用。要达到这个目标,当然需要高性能的、可维护的代码,这与服务器端应用的要求是一致的。相比之下,Ajax的代码库会比传统的Web应用大很多。对代码库进行良好的组织是非常重要的。编写代码不再是单个开发者的职责,而是整个团队来参与。可维护性、分离关注点、共同的编程风格以及设计模式,这些都是需要考虑的问题。从某个角度来看,Ajax应用就是用户所使用的一块复杂的代码,它需要高效地与服务器进行通信。它显然来源于传统的基于页面的Web应用,但是它们之间的相似性也仅限于此,两者之间的差别就像是木马轮和现代自行车之间的差别。在脑海中要记得它们之间的这些差别,因为只有这样才能创造出真正引人注目的Web应用。1.3真实世界中的Ajax富客户端理论已经说得够多的了,让我们再来看看一些真实世界中的应用,获得一些感性认识。Ajax已经用于创建一些重要的应用,使用Ajax方法的好处是一目了然的。Ajax现在仍然处在发展的早期,这么说吧,这就好比自行车发展到了还只有几个人装上踏板和实心橡胶轮胎的时代,刚有人开始研制盘式刹车器和变速齿轮。下面一节将会考察Ajax当前的状态,然后详细分析Ajax的一个卓越的早期应用,看看使用Ajax将得到什么回报。1.通常是指那些受过严格编程训练的开发者,特别是J2EE和.NET开发者,更是自觉得高人一等。——译者注www.dearbook.com.cndearbook第1章一种新的Web设计方法191.3.1现状打造Ajax的版图,Google比其他公司做得更多(和其他领域的开拓者一样,早在Ajax这个名字浮出水面之前,他们就做了很多工作)。在2004年初,他们就推出了beta版本的GMail服务。除了它阔绰的容量,GMail最为人称道的就是它的用户界面。它允许用户一次打开多个电子邮件,并且,即便用户正在写邮件,邮件列表也能够自动更新。与同期的大多数由因特网服务提供商(ISP)提供的Web邮件系统相比,这无疑是一个显著的进步。而与很多Web界面模仿MicrosoftOutlook和LotusNotes的企业邮件服务相比,GMail并没有依赖重量级的、容易出问题的ActiveX控件和Javaapplet,但在功能上却毫不逊色。这样做所带来的好处就是完全的跨平台,可以在任何平台1、任何地点使用GMail的服务,无需像企业邮件服务的用户那样需要预先在机器上安装一堆额外的软件2。此后,在提供更加丰富的交互性方面,Google走得更远。例如,当用户键入字符时,GoogleSuggest可以为用户提供与输入字符相符的提示,帮助他们完成想要键入的搜索字符串;GoogleMaps可以执行交互式的、可缩放的基于位置的搜索。与此同时,其他公司也纷纷开始试验使用这一技术,例如Flickr的在线照片共享系统,它现在已经是雅虎网站功能的一部分了。到目前为止,我们这里讨论的应用都只算初步的尝试。它们仍然是瞬态应用,为偶尔的使用而设计。几个月来相关的技术框架显著增加,这可以看作是市场向独占式Ajax应用迁移的征兆。第3章将会考察其中的一些框架,而在本书的附录C中,我们将试图总结这一领域的当前状态。这些证据表明,Ajax正在赢得市场的青睐。我们开发者可以出于个人兴趣来玩一种新技术,但是像Google和雅虎这样的大型企业只有在看到了诱人的商业前景之后才会接受某种新技术。我们已经概括了Ajax的很多理论上的优势,在下面一个小节,我们将剖析GoogleMaps,看看这些理论是如何组合在一起来建造真实的应用的。1.3.2GoogleMapsGoogleMaps是结合了地图浏览和搜索引擎的产物。初始状态,显示的是美国地图(图1-15)。这个地图可以自由地通过文本来查询,并且可以精确地细化到街道地址或者像宾馆和餐馆这样的生活设施(图1-16)。查询功能类似传统的Web应用,需要刷新整个页面,但是地图本身是Ajax驱动的。在宾馆搜索的每一个链接上点击,将会在地图上立即弹出一个提示框,地图还可能会稍微滚动以适应这个提示框的位置。滚动地图本身可能是GoogleMaps最有意思的功能了,用户可以用鼠标拖拽整张地图。地图是由很多块小的图片拼接而成的,如果用户滚动得足够远,要显示出一些新的区域时,这些区域的图片将会异步地加载。这个延迟很明显,可以观察到起初它们是一些空白的区域,1.有两方面的含义,即任何的操作系统和任何的现代GUI浏览器。——译者注2.企业邮件服务的用户通常需要在客户端机器上安装一堆ActiveX控件,然后才能使用这些服务,而ActiveX的安全性受到了广泛的指责。——译者注www.dearbook.com.cndearbook20第一部分重新思考Web应用当它们被加载时,会一块一块地显示出来。但是在这个地图的更新过程中,用户还可以继续滚动,触发更多的更新。这些小块的地图在用户的会话过程中会被浏览器缓存起来,这使得当回到以前曾经访问过的地图时,显示的速度非常之快。图1-15GoogleMaps的首页提供了一个可以滚动和放大的美国地图,还有熟悉的Google搜索条。要注意的是,缩放控件是在地图之上而不是在它的旁边,这使得用户的视线无需离开地图就可以进行缩放控制图1-16在GoogleMaps上进行宾馆搜索。注意,那些阴影和可爱的提示气球是使用传统DHTML技术创建的。Ajax请求的使用使得这些功能更加动态也更加好用www.dearbook.com.cndearbook第1章一种新的Web设计方法21回到我们关于可用性的讨论,你会发现有两个重要的东西浮现了出来。其一,触发下载新地图数据的操作不是点击一个特定的“取得更多的地图”的链接,而是用户的操作,也就是说,移动地图。用户的工作流程并没有被与服务器的通信所打断。其二,请求本身是异步的,这就意味着,当获取新数据的时候,相关的链接、缩放控件以及其他页面上的功能仍然都可以使用。因特网上的地图服务并不是什么新东西。如果看看Ajax之前的典型的因特网地图网站,我们看到的是完全不同的交互模式。地图也明显地划分成很多个小块,缩放控件和导航链接可能会在地图的边缘。每次点击这些控件,都会引起整个页面的刷新,随后出现一个显示着不同地图区域的相似的页面。用户的操作总是被打断,在看到GoogleMaps之后,毫无疑问,用户会觉得Ajax之前的使用方式缓慢而又沉闷1。转到服务器端,毫无疑问,所有的地图服务都有一个强大的地图系统作为支撑。每一小块的地图都是一个图片。当用户滚动地图的时候,Ajax之前的地图服务站点的Web服务器需要不断地刷新页面的模板;而在GoogleMaps上,一旦运行起来,服务器只需要提供必需的数据,而很多的图片已经被浏览器缓存起来了(是的,只要提供相同的URL,浏览器也能缓存页面中的图片。但是,采用这种方案,浏览器在检查缓存是否过期时仍然会造成不必要的服务器流量,而且比起以编程方式在内存中缓存图片的方案,也不是很可靠)2。作为Google所推出的一个最卓越的展示品3,节约带宽是必须要考虑的问题。对于像Google这样的在线服务来说,易于使用是一个关键的特征,只有这样才能让用户用过之后再回来。而且页面点击数对于商业上的成败至关重要。而引入Ajax所提供的灵活的UI之后,Google的竞争使得传统的地图服务提供商们忧心如焚。当然,后端服务的质量也是需要比较的因素,但是当其他部分都是一样的时候4,Ajax形成了巨大的商业优势。可以预期,像这样更为丰富的界面的公开展示会越来越多,变得更加普遍。作为一种很容易推销出去的技术,在接下来的几年里Ajax看来会有很光明的前途。然而,其他的富客户端技术也在谋求获得市场份额,虽然它们不在本书的讨论范围之列,但在结束我们的综述之前对它们做一下展望也是很重要的。1.4Ajax的替代方案市场需要基于Web的应用表现能力更加丰富,响应更加灵敏,Ajax满足了这种需求,而且无需在客户端安装任何额外的软件。但是这一领域并非只有一个竞争者,在某些情况下,它甚至1.作为对比,读者可以亲自去尝试一下微软公司所提供的旧的地图服务http://terraserver.microsoft.com。这个服务很有可能很快被废弃,因为微软公司推出了新的地图服务http://local.live.com。新的地图服务,包括这个网站上的很多其他服务,都大量采用了Ajax的技术来建造。—

AJAX In Action-CH .pdf

AJAX In Action-CH .pdf

上传者: freedompan
7次下载 0人收藏 暂无简介 简介 2011-06-26 举报

简介:J2EE 前台相关学习资料ajax

dearbook一种新的Web设计方法本章内容异步网络交互和使用模式Ajax与传统Web应用的关键区别Ajax的四个基本原则真实世界中的Ajax想的用户界面是无形的。需要的时候,召之即来,所有想要的功能一应俱全;不需要的时候,挥之即去,用户可以不受干扰地继续专注于手头的问题。然而,这样的用户界面总是可遇而不可求的。日复一日,用户只能顺从于那些远未尽如人意的用户界面,并且慢慢习惯了这些低劣的应用。直到某一天,有人给我们展示了一种更好的方法,这时候我们才意识到,过去使用的方法是多么地落伍。当今的因特网界也正在认识到,用于显示文档内容的基本Web浏览器技术,已经无法胜任更高层面的任务了。Ajax(AsynchronousJavaScript+XML,即异步JavaScript+XML)是一个相当新的名字,是由AdaptivePath1的咨询顾问JesseJamesGarrett首先提出来的。Ajax的一些部分,以前称作动态HTML(DynamicHTML)和远程脚本(remotescripting)。Ajax的名字更加简洁,而且它容易让人联想起很多东西:洗衣粉(高露洁的Ajax牌洗衣粉)、荷兰的足球队(知名的阿贾克斯球队)、希腊英雄(疯狂的埃阿斯)等等。不仅名字好听,无论是从技术还是从商业角度,Ajax同样让人耳目一新。技术上,Ajax极大地发掘了Web浏览器的潜力,开启了大量新的可能性。商业上,Google和其他主要的参与者通过眼花缭乱的Ajax应用,让普通大众对于新一代的Web应用充满了期待。越来越复杂的基于Web的新型服务,不断冲击着我们已经习惯了的传统Web应用。其实有一大堆技术可以提供表现能力更加丰富、更加智能或者在其他方面更好的客户端应用,但Ajax却只需要使用一些在绝大多数现代电脑上既有的技术,就能举重若轻地完成同样的任务。也就是说,在Ajax中,采用的是一系列已有的甚至是老旧的技术,把它们重新锻造、延伸,1.它是一家业界知名的用户体验咨询公司,网址为http://www.adaptivepath.com。——译者注理第1章www.dearbook.com.cndearbook第1章一种新的Web设计方法3超越其原有的概念,让我们可以应付客户端程序所要面对的复杂情况。本书不仅会分别考察每一种技术,而且也会从整体上考察大型的Ajax项目。读完本书,你会对此有一个完整的理解。此外,书中还穿插介绍了很多Ajax设计模式。众所周知,设计模式有助于获取知识和经验,也帮助我们有效地与他人沟通。遵循设计模式所倡导的编程规律,我们可以更容易地建造出当需求变化时易于修改、便于扩充的应用。这些设计模式甚至会让你的工作更有乐趣。1.1为什么需要Ajax富客户端?建造一个富客户端1毫无疑问要比设计一个网页复杂。付出这些额外的努力,动机何在?需要付出什么代价?而且……等一下,富客户端到底是什么?富客户端的两个要点是:第一,它是“富”的;第二,它是“客户端”。这好像是一句废话,别急,待我稍作解释。“富”是指客户端的交互模型,要有多样化的输入方式和符合直觉的及时反馈手段。说简单点儿,一个“富”的应用使用起来应该像是在使用现在的桌面应用一样,例如,就像是使用字处理软件(Word)或电子表格软件(Excel)。接下来,我们有必要仔细地考察一下所要涉及的各个方面。1.1.1比较用户体验花几分钟使用一下你选中的应用(浏览器除外),记下它用到了哪些用户交互,然后马上回来。为了简短起见,我举一个电子表格的例子,但是,这里所涉及的要点是通用的,足以针对文本编辑器上的各种情形。好,我们开始。先在电子表格中随便输入几个等式,注意到,可以以几种方式进行交互:编辑数据,用键盘和鼠标浏览数据,还可以使用鼠标拖拽来重新组织数据。我做这些操作的时候,程序给了我反馈。移动鼠标的时候,光标改变了形状;当鼠标停在上面的时候,按钮变亮了;选中的文字也改变了颜色。窗口或者对话框被选中的时候,也和平常显得不一样了,等等(图1-1)。这些就是所谓“富”的交互。当然了,仍然有一些有待改进的地方,但这是一个好的开始。OK,电子表格就是一个富客户端程序了吗?当然不是。在电子表格或者类似的桌面应用中,业务逻辑和数据模型是在一个封闭的环境中运行的。在这个环境中,它们彼此清晰地了解对方,并且可以互相访问,而环境之外的东西,对于它们来说是未知的(图1-2)。那么客户端又是什么呢?它是与另一个独立的进程相互通信的程序,后者通常运行在服务器上。一般来说,服务器总是要比客户端大一些,能力强一些,配置更好一些,因为在服务器上通常要存储浩如烟海的信息。客户端程序使得最终用户可以查看和修改这些信息,1.RichClient,译作富客户端,这里“富”的意思是“表现能力丰富的”,相关的术语还有RIA(RichInternetApplicati-on),译作富因特网应用。——译者注www.dearbook.com.cndearbook4第一部分重新思考Web应用当多个客户端连接在同一个服务器上的时候,可以在它们之间共享这些信息。图1-3展示了一个简单的客户/服务器架构。图1-1这个桌面电子表格应用展现了用户交互的众多可能性。被选中单元格的行列标题都是突出显示的;按钮在鼠标移上去的时候会显示提示信息;工具栏上排列着各种丰富的控件;单元格也可以交互地查看和编辑图1-2一个独立的桌面应用的架构示意图。应用运行在它自己的独立进程之中,数据模型和程序逻辑能够彼此“看到”对方的存在。除了通过文件系统之外,同一个应用的第二个运行实例1没有办法访问到第一个运行实例的数据模型。通常来说,整个程序的状态都保存在单个文件中,当应用运行的时候,这个文件会被加锁以阻止其他的进程同时访问1.即进程。——译者注进程1进程2逻辑文件系统逻辑数据模型数据模型www.dearbook.com.cndearbook第1章一种新的Web设计方法5图1-3客户/服务器系统和n层架构的示意图。服务器提供了共享的数据模型,客户端与该数据模型交互。客户端同时还维护数据模型的一部分,以获得快速的访问,但是它将服务器端的模型当作业务领域对象的最终表示。多个客户端可以与同一个服务器交互,当然,这需要有合适的资源锁定机制和合理的对象(或者数据行)隔离措施作为保证。服务器可以是单进程的,就像在20世纪90年代早期和中期传统的客户/服务器模型中一样,也可以是由很多个中间件层或者多个Web服务等组成。在任何一种情况下,从客户端的角度来看,服务器都有一个单独的接入点,可以看作是一个黑盒在现代的n层架构中,服务器往往要和更远的后端服务器(例如数据库)通信,因此被称作“中间件”的层同时扮演着客户端和服务器的角色。我们的Ajax应用位于这个链的一端,它仅仅是作为客户端,因此为讨论方便,我们可以把整个n层系统看作是一个标记为“服务器”的黑盒。我的电子表格应用只需要管理它自己保存在内存或本地文件系统中的少量数据。如果架构设计良好的话,数据和它的表现形式的耦合可以非常松散,但是我不能通过网络来分割或者通过网络来共享它们。从这个意义上来说,电子表格应用不是一个客户端。与之相对应的Web浏览器就是一个典型的客户端,它与Web服务器通信,请求需要的页面。浏览器有丰富的功能,用来管理用户的浏览行为,常见功能有回退按钮、历史列表和分页浏览多个文档等等。但是当我们把特定网站的Web页面看作是一个应用时,这些通用的浏览功能实际上和应用关系不大,充其量也就如电子表格和Windows的开始按钮或者窗口列表之间的关系。我们来考察一下现代的Web应用。为了简单起见,我们选择了“地球人都知道”的在线书店Amazon.com(图1-4)。在浏览器中打开Amazon网站,因为在此之前我访问过,它会给我显示一个友好的问候、一些推荐书目,还有我的购买历史信息。点击推荐书目中的任何一条,就会转到另外一个页面(此时,页面要刷新一下,在这几秒钟内我什么也看不到)。新页面是该书的相关信息:书评、二手书报价、同一作者的其他著作,以及以前我浏览过的其他书籍(图1-5)。进程1逻辑数据模型进程2逻辑数据模型服务器(例如数据库)进程1逻辑数据模型进程2逻辑数据模型中间件层服务器群因特网服务“服务器”www.dearbook.com.cndearbook6第一部分重新思考Web应用图1-4Amazon.com的首页。系统记得我上一次的访问。导航链接除了通用模板文件,还有个性化信息图1-5Amazon.com书籍详细信息的页面。包括一大堆通用信息和个性化信息的超链接。虽说其中的大量内容和图1-4中的一模一样,但是由于Web浏览器使用基于文档的操作,每次发送新页面都必须要重新发送这些内容简而言之,呈现在我面前的是非常丰富的、关联度很高的信息。但是对我而言,交互的方式就是点击那些超链接,然后填写一些表格。假设我在键盘前面不小心睡着了,第二天才醒来,如www.dearbook.com.cndearbook第1章一种新的Web设计方法7果不刷新页面,我就没法知道《哈里波特》系列的新书已经出版了,也不能将我的列表从一个页面带到另一个页面,我要是想同时看到更多一些东西也不行,因为我无法改变页面上局部内容区域的大小。我似乎是在批评Amazon的界面,其实并非如此,我只是拿它来做个例子。事实上,在传统Web开发方式的桎梏下,他们已经做得非常棒了。但是比起电子表格来说,它所用的交互模型毫无疑问是太有限了。为何现代的Web应用仍然有这么多的局限呢?造成目前的状况有一些合理的技术原因,我们现在就来考察一下。1.1.2网络延迟因特网的宏伟蓝图是将这个世界上所有的计算机都连接起来,形成一个无比巨大的计算资源。如果能把本地调用和远程调用等同起来,那么无论是分析蛋白质的成分还是破解外太空的信号,使用者都无需考虑机器的物理位置,剩下来的只有愉快地计算。但是非常不幸,本地调用和远程调用是完全不同的东西。在现有的技术水平之下,网络通信仍然是一件代价高昂的事情(也就是说,通常很慢,而且并不可靠)。在没有网络调用的情况中,不同的方法和函数以及它们所操作的数据都位于相同的本地内存中(图1-6),向方法内传递数据并且获得方法的返回结果是非常直接的。图1-6本地过程调用的顺序图。参与者很少,因为程序逻辑与数据模型都保存在本地内存中,并且彼此可以直接访问而在有远程调用的情况下,位于网络两端的通信双方为了发送和接收数据在底层需要进行大量计算(图1-7)。比起数据在线路上的往返,这些计算需要消耗更多的时间。传输一段二进制的数据,中间要经过很多环节的编码和解码、错误校验、失败重发、数据包拆分和重组,数据最终转化为0和1表示的二进制信号,通过线路(或者无线连接)到达另外一方。在本地,调用函数的调用请求被编码为一个对象,然后将这个对象序列化为一系列字节,最后使用应用层协议(通常是HTTP)通过物理传输介质(例如铜缆、光纤或者无线电波)将其发送出去。在远程机器上,对应用层协议解码,将获得的数据字节反序列化,创建一个请求对象的副本。然后对数据模型应用这个对象并生成一个响应对象。为了将响应对象传递给本地的调用函数,所调用函数本地内存模型www.dearbook.com.cndearbook8第一部分重新思考Web应用有的序列化、反序列化以及传输层的操作都要反向再来一次。最后,响应对象被传递给本地的调用函数。图1-7远程过程调用的顺序图。一台机器的程序逻辑尝试操作另外一台机器上的数据模型这个交互过程很复杂吧,幸好,它是可以自动完成的。现代的编程环境如Java和Microsoft的.NET框架都内置了这个能力。尽管如此,执行远程调用时,上述所有这些操作仍然会在内部执行。如果我们到处使用远程调用,性能势必会大受影响。这也就是说,远程调用是不可能和本地调用一样有效率的。更糟糕的是,网络的不稳定更让这种效率损失捉摸不定,难以预计。相比之下,运行在本地内存之中的本地调用,在这一点上无疑要有优势得多。等等,说了半天的远程调用,这和软件的可用性有关系吗?答案是,大有关系。一个成功的计算机用户界面要能以最起码的水平模拟我们在真实世界中的体验。交互的基本规则之一就是,当我们推一下、刺一下或者捅一下某个东西的时候,它立刻就会响应。响应的时间只要稍微拖长一点点,就会使人困惑,分散其注意力,把关注点从手头的任务转移到用户界面上。远程调用横穿整个网络,需要执行大量的额外操作,它们往往会把系统拖慢,使用户察觉到延迟。在桌面应用中,只有当可用性设计做得非常糟糕的时候,才会出现这种令用户感觉充满bug、反应迟钝的用户界面,但在网络应用中,什么都不做就能得到大量这样的界面。因为网络延迟不可预测,这类界面问题往往都神出鬼没,对应用响应的测试也难以开展。换句话说,网络延迟是导致实际应用的交互性糟糕的一个普遍原因。1.1.3异步交互用户界面的开发者对于网络延迟只能做最坏的假设。简单地说,就是要尽可能让用户界面与调用函数本地模型序列化应用协议物理传输媒介应用协议序列化远程模型www.dearbook.com.cndearbook第1章一种新的Web设计方法9网络活动无关。天才的程序员们早已发明了一种确实有效而且久经考验的方案,来专门解决这一问题。先卖个关子,让我们到现实世界中走一趟。在我每天早上必做的事中,很重要的一项是叫醒我的孩子去上学。我可以站在床边把他们折腾醒,催着他们起床穿衣,但这是一种很耗费时间的方法,总要耗费我很多宝贵的早间时光(图1-8)。图1-8在我每日早晨必做的事中,以同步方式响应用户输入的顺序图。顺序图中纵向表示时间的流逝,其中的阴影区域表示了我被阻塞不能接受其他输入的时间长度我要叫醒孩子,看看窗外,往往会忽略了喂猫。孩子们起来之后会问我要早餐。就像服务器端的进程一样,孩子们起床总是慢吞吞的。如果我遵循同步交互模式,就要等他们老半天。不过,只要他们嘟囔一句“我醒了”,我就可以先去干其他的事,需要时再回来看看他们。按照计算机的术语,我需要做的就是为每个孩子在一个单独的线程中建立一个异步进程。开始之后,孩子们会在他们的线程里自己起床,我这个父线程没有必要同步傻等,他们完事后会通知我(往往还会问我要吃的)。在他们醒来的过程中,我并不需要和他们交互,就当他们已经起来并自己穿好衣服了,因为我有理由相信他们很快会这么做的(图1-9)。对于任何用户界面来说,这是一种沿用已久的实践,即创建异步的线程,让它在后台处理那些需要计算很久的任务,这样用户可以继续做其他的事情。当启动这个线程的时候,有必要阻塞1.唤醒窗户饿猫待哺熟睡的孩子2.慢慢醒来3.通知4.凝望窗外5.忘了喂猫www.dearbook.com.cndearbook10第一部分重新思考Web应用用户的操作1,但是在可接受的很短时间之后,阻塞就会解除。因为存在网络延迟,使用异步方式来处理任何耗时的远程调用是一种很好的实践。图1-9以异步方式响应用户输入的顺序图。如果遵循异步的输入模式,我可以让孩子们在醒来的时候通知我。在他们缓慢的起床过程中,我可以继续从事其他活动,这使得我被阻塞的时间大大缩短实际上,网络延迟问题和相关的解决方案由来已久。在老的客户/服务器模式中,当设计不佳的客户端程序碰上了高负载的服务器时,用户界面就会出现让人难以忍受的延迟。即便是在如今的因特网时代,当切换页面时,如果浏览器半天出不来东西,那么这种糟糕的情况很可能就是因为网络延迟造成的。在现有技术条件下,我们暂时还没有办法消除网络延迟,但是至少有一个对策,那就是采用异步方式处理远程调用,不是吗?糟糕的是,对于Web开发人员而言这样做存在一个难点:HTTP协议是一个“请求—响应”模式的协议。也就是说,客户端请求一个文档,服务器要么返回这个文档,要么告诉客户端找不着文档或者让客户端去另外一个地方找,还可以告诉客户端可以使用它的本地缓存,诸如此类。总而言之,“请求—响应”模式的协议是一种单向的通信协议。客户端可以向服务器发起连接,但是服务器不可以向客户端发起连接。甚至,当客户端下次发起通信请求时,健忘的服务器都记不起来这个客户端是谁了(HTTP是无连接的)。多数Web开发者使用现代的编程语言,例如,Java、PHP或者.NET,他们熟悉用户会话(usersession)的概念,这其实是应用服务器对于不能保持连接状态的HTTP协议的一种补救措施。HTTP就其最初的设计目的来说表现得非常好,采用一些巧妙的处理,它能够适应设计之初没有考虑的场1.这么做的目的是确保线程被成功地创建和启动。——译者注1.唤醒窗户饿猫待哺熟睡的孩子2.快速通知6.通知5.忘了喂猫3.慢慢醒来4.凝望窗外www.dearbook.com.cndearbook第1章一种新的Web设计方法11合。但是我们的这个异步回调方案中的关键特征是,客户端会收到两次通知,一次是在线程创建的时候,另一次是在线程结束的时候。标准的HTTP和传统Web应用模型可不会提供这些。像Amazon那样的传统Web应用,是建造在页面概念之上的。给用户显示一个文档,上面包括各种链接和表单,用户可进一步访问更多的文档。这种交互模式可以在很大的规模上支持复杂的数据集(就像Amazon和其他网站已经证明的那样),它所提供的用户体验也足以满足开展业务的需要。十年来,这种交互模式在我们对因特网商业应用的看法上打下了深深的烙印。界面友好的所见即所得(WYSIWYG)Web制作工具使得站点更容易被理解为一堆页面。服务器端的Web框架使用状态图来对页面的转换建模。没有引入,传统的Web应用就这么一直牢牢地束缚在页面刷新操作之上,就好像这种刷新是理所当然而且无可避免的,从没有尝试过任何异步的处理方案。当然,毫无疑问,传统的Web应用肯定不是一无是处的。毕竟Amazon在这种交互模式上创造了成功的商业应用。但是这种适用于Amazon的方式并不一定适用于所有的人。为什么这么说呢?要理解这一点,我们需要考察用户的使用模式(usagepattern)。1.1.4独占或瞬态的使用模式泛泛地讨论自行车和SUV(运动型轿车)孰优孰劣毫无意义。因为它们各自都有优点和缺点——舒适度、速度、油耗或者个人身份的象征等等。只有在特定的使用模式下讨论,这样的比较才有意义。例如,是要在上下班高峰时段穿越市中心,还是要带上一家老小去度假,或者只是要找个躲雨的地方。在类似这样的具体情况下,我们才能有的放矢地比较。对于用户界面,亦复如是。软件可用性专家AlanCooper写了很多有关使用模式的好文章,他定义了两种主要的使用方式:瞬态的(transient)和独占的(sovereign)1。瞬态应用可能每天都会偶尔使用一下,但是总是作为次要的活动,突发性地用上一会儿。与之形成鲜明对比的是独占应用,独占应用需要应付用户每天几个小时的持续使用。很多应用天生就具备独占或者瞬态的性质。例如,写作用的字处理软件就是一个独占应用,可能还会用到几个瞬态的应用,比如文件管理(文件的开启和关闭窗口中常常会嵌入这个功能)、字典或者拼写检查工具(很多字处理程序也嵌入这些功能),还有与同事联络的电子邮件和聊天工具。而对于软件开发者,文本编辑器、调试器或者IDE(集成开发环境)则是独占的。独占应用常常使用得更频繁。要知道,一个良好的用户界面应该是不可见的。衡量使用频繁程度的一个好的标尺,是当这个用户界面发生明显的停顿时,它对于用户流程的影响。例如,从一个目录向另一个目录移动文件要发生2秒钟的停顿,我能愉快地接受;可是如果这两秒是发生1.实际上,AlanCooper从行为的立场出发,总共定义了四种软件姿态(softwareposture),分别是:独占(sovereign)、瞬态(transient)、精灵(daemonic)和辅助(auxiliary)。后两者对于Ajax应用来说,意义尚不明确,所以此处并未提及。——译者注www.dearbook.com.cndearbook12第一部分重新思考Web应用在我正饱含激情地用绘画软件创作一幅作品时,或者是我正努力地调试一段很难对付的代码时,这肯定会让我感觉十分不爽。Amazon是一个瞬态应用,eBay、Google以及大多数大型的公众Web应用都是瞬态应用。自因特网诞生之日起,专家们就曾经预测传统的桌面应用面临Web应用的冲击。十年过去了,这些都还没有发生,为什么呢?基于Web页面的方案对于瞬态应用是足够了,但是对于独占应用却还远远不够。1.1.5忘掉Web现代Web浏览器和它最原始的出发点(从远程服务器上获得一个文档)相比已经完全不是一码事了,它们之间就像是瑞士军刀和新石器时代的狩猎工具一样,可谓是天壤之别。各种交互组件、脚本语言和插件,这些年来无法抑制地疯狂发展,近乎强制地一次又一次地创造着新的浏览体验。[可以到www.webhistory.org/www.lists/wwwtalk.1993q1/0182.html瞻仰一下浏览器的史前时代。1993年的时候,Netscape创立之前的MarcAndreessen(Netscape的创始人)还在游说TimBerners-Lee(Web的创始人,W3C的领导者)等人,列举为HTML引入一个图片标签的好处]。几年以前,一些先行者就已经开始把JavaScript当作一种严肃的编程语言来对待。但就整体而言,更多的人仍然把它和那些假模假样的警告框以及“点击猴子赢大奖”的广告一类的小把戏联系在一起。浏览器大战导致JavaScript成了个被误解的、病态的孩子,Ajax可以看作是他的康复中心1。只要适当引导,然后给它配上合适的框架,JavaScript就很有可能变成因特网的模范公民。它能真正增强Web应用的实用性,而且不强迫用户安装额外的软件,或者逼迫用户抛弃自己心爱的浏览器。得到广泛理解的成熟的工具可以帮助我们达成这一目标。本书后面会大量提到的设计模式就是这样一类工具。推广和普及一项新技术,既是技术事务,也是社会行为。一旦技术已经成熟,人们还需要领会应该如何去使用它。这一步骤常常是通过用它来做我们很熟悉的事情开始的。比如,早年的自行车叫做“木马轮”或者“蹬行马”,靠脚使劲蹬地的反作用力来前进。随着这一技术渐渐为大众所接受,后来的发明者们会发明出这一技术新的使用方式,给它加上踏板、刹车、链条齿轮以及充气轮胎。每一次的发明创造,都使得自行车中马的影子越来越淡,以至于彻底消失(图1-10)。相同的过程也发生在如今的Web开发领域。Ajax背后的技术有能力将Web页面转换成某种完全不同的新东西。早期Ajax的使用尝试使得Web页面开始变得像“木马轮”一样不伦不类。要领悟Ajax的精髓,我们就要忘掉Web的页面概念,也就是说,我们要打破这些年来所形成的经验。就在Ajax正式命名后的这几个月,这样的事已经发生了不少。1.即Ajax是使得Web恢复健康发展的良药。——译者注www.dearbook.com.cndearbook第1章一种新的Web设计方法13图1-10现代自行车的发展1.2Ajax的四个基本原则我们用到的很多框架中都已经固化了基于页面的传统应用模式,同时这些应用模式也已经深深进入了我们的思想中。我们花几分钟来揭示出哪些核心概念是我们需要重新思考的,以及如何从Ajax的角度来重新思考。1.2.1浏览器中的是应用而不是内容在传统的基于页面的Web应用中,浏览器扮演着哑终端1的角色。它对用户处于操作流程哪一阶段一无所知。这些信息全部都保存在服务器上,确切地说,就是在用户会话上。时至今日,服务器端的用户会话早已是司空见惯。如果你使用Java或者.NET编程,服务器端的用户会话更是标准API的一部分——还有Request、Response、MIME类型——没有了它们简直不可想象。图1-11描绘了传统Web应用典型的生命周期。当用户登录或者以其他方式初始化一个会话时,系统会创建几个服务器端的对象。例如,电子商务类型的网站需要创建表示购物车以及用户身份证明的对象。同时将浏览器站点的首页呈现给用户,这个HTML标记的数据流由模板文件以及特定于该用户的数据和内容(例如该用户最近浏览的商品列表)组成。用户每次和服务器交互,都会获得另一个文档。在这个文档中,除了特定于该用户的数据以外,包含的其他模板文件和数据都是相同的。浏览器总是忠实地丢弃掉老的文档,显示新的文档,因为它是哑终端,而且也不知道还可以做些什么。当用户选择退出或者关闭浏览器的时候,应用退出,会话消失。这个时候持久层会把用户下次登录后需要显示的信息存储起来。Ajax则不同,它把一部分应用逻辑从服务器端移到了浏览器端,图1-12描绘了这一情况。1.哑终端即指不具有智能的终端。——译者注www.dearbook.com.cndearbook14第一部分重新思考Web应用图1-11传统Web应用的生命周期。用户和应用会话的所有状态都保留在Web服务器上。用户在会话中看到的是一系列的页面,每次页面切换都不可避免地要到服务器上走一个来回图1-12Ajax应用的生命周期。用户登录后,服务器交付一个客户端应用给浏览器。这个应用可以独立处理很多的用户交互,对于自己无法独立处理的交互,应用会以后台方式发送请求给服务器,而不会打断用户的操作流程Web浏览器服务器登录Web页面退出页面业务逻辑用户的数据模型用户会话共享数据模型注销Web浏览器服务器登录退出页面业务逻辑用户的数据模型用户会话共享数据模型注销用户的部分数据模型(JavaScript)客户端应用交付客户端应用频繁的数据请求Web页面Web页面www.dearbook.com.cndearbook第1章一种新的Web设计方法15用户登录的时候,服务器交付给浏览器一个复杂得多的文档,其中包含大量的JavaScript代码。这个文档将会在整个会话的生命周期内与用户相伴。在这一过程中,随着用户与其交互,它的外观可能会发生相当大的变化。它知道如何响应用户的输入,能够决定对于这些请求,是自行处理还是传递给Web服务器(Web服务器再去访问数据库或者其他资源),或者通过两者结合的方式进行处理。因为这个文档在整个用户会话中都存在,所以它可以保存状态1。例如,购物车的内容可以保存在浏览器中而不是服务器的会话中。1.2.2服务器交付的是数据而不是内容我们已经提到,在传统的Web应用中,服务器在每个步骤都需要把模板文件、内容和数据混合发送给浏览器。但实际上,当向购物车中添加一件物品的时候,服务器真正需要响应的仅仅是更新一下购物车中的价格。如图1-13所示,这只是整个文档中极小的一小部分。基于Ajax的购物车可以向服务器发起一个异步请求来完成这件事,这样做显得更聪明。模板文件、导航列表和页面布局上的其他部分已经随着初始页面发送给了浏览器,服务器无需重发,以后每次只需要发送相关的数据就可以了。Ajax应用可以通过多种方式来做这件事情。例如,返回一段JavaScript代码、一段纯文本或者一小段XML文档。这些方式各自的优缺点,我们将留到第5章再详细考察。但是,毫无疑问的是,无论返回数据采用何种格式,这些方式所传输的数据量都要比传统的Web应用中一股脑返回一个大杂烩的方式少得多。在Ajax应用中,网络的通信流量主要是集中在加载的前期,无论如何,用户登录后是需要一次性地将一个大而复杂的客户端交付给浏览器。但是在此之后,与服务器的通信则会有效率得多。对于瞬态应用来说,积累起来的通信流量要比以前的基于页面的Web应用少很多。与此同时,平均的交互次数则有所增加。整体而言,Ajax应用的带宽消耗要比传统的Web应用低一些。1.2.3用户交互变得流畅而连续浏览器提供了两种输入机制:超链接和HTML表单。超链接可以在服务器上创建,并预加载指向动态服务器页面或者servlet的CGI参数。可以用图片或者CSS(层叠样式表)来装饰超链接,并且当鼠标停在上面时还可以提供基本的反馈。经过合理设计,超链接可以变成一个很有想像力的UI组件。表单则提供了桌面应用的一组基础UI组件:输入文本框、单选按钮和多选按钮,还有下拉列表。但仍然缺少很多有用的UI组件,例如,没有可用的树控件、可编辑的栅格、组合输入框等。表单像超链接一样,也指向服务器的一个URL地址。1.即保存在本地内存中。——译者注www.dearbook.com.cndearbook16第一部分重新思考Web应用图1-13细分服务器发送的内容,(A)是传统的Web应用,(B)是Ajax应用。(C)表示随着应用使用时间的延长,累积的网络流量的增长情况超链接和表单也可以指向JavaScript函数。这一技术通常用在将数据提交给服务器之前对表单输入进行简单的校验,如检验是否有空值,数值是否越界等等。这些JavaScript函数的生存期和页面本身是一致的,当页面提交之后,这些函数也就不存在了。数据数据积累的数据数据烙印内容数据表现逻辑传统的Ajax登录新页面新页面新页面注销登录注销登录注销时间时间时间www.dearbook.com.cndearbook第1章一种新的Web设计方法17当一个页面已提交而下一个页面还没有显示出来的时候,用户实际上处于没人管的状态。老的页面还要显示一会儿,浏览器甚至还会允许用户点击一些链接。但这些点击可能会导致一些不可预料的结果,甚至破坏服务器端会话的状态。用户通常应该等到页面刷新完成,当然也可以选择在刷新完成之前就在新页面上做一些操作。例如,当页面只显示了一部分时从中选择一条裤子放进购物车不大可能会造成什么破坏(例如,不会修改顶级的服装分类:男装、女装、童装、配饰)。我们继续看这个购物车的例子。Ajax的购物车是通过异步方式发送数据的,用户可以很快地把东西拖进来,就像点击一样快。只要客户端购物车的代码足够健壮,它可以很轻松地处理这样的负载,而用户则可以继续做他想做的事。要知道,在服务器端并没有一个真正的购物车等着装东西,只有会话中的一个对象而已。购物的时候,用户并不想知道会话对象,购物车对于用户而言是一个较恰当的比喻,用现实世界中熟悉的概念来描述这里发生的事情。对于用户来说,如果强迫他们去理解计算机领域中的术语,只会让他们远离网站。等待页面的刷新,一下子就把用户从愉快的使用体验中拽了出来,让他感觉到自己所面对的只不过是一台冰冷的机器罢了(图1-14)。使用Ajax来实现这些应用则可以避免这些令人不快的体验。当然了,在这个例子中的购物只是一个瞬态活动。考察一下其他的业务领域,例如,一个业务量很大的帮助中心或者一项复杂的工程任务,如果因为需要等待页面刷新而将工作流程打断几秒钟1,那肯定是不可接受的。图1-14处理事件打断了用户的工作流程。用户要处理与业务相关的和与计算机相关的两种对象。这迫使用户频繁地在这两者之间切换,从而导致用户注意力分散,工作效率降低Ajax的另一个好处是,我们可以对丰富的用户操作事件进行捕获。类似于拖拽这样的复杂UI概念也不再是遥不可及的。这使得Web应用的UI体验可以全面提升到近乎与桌面应用的UI组件相媲美的高度。从可用性的角度来看,这很重要,不仅仅是因为它释放了我们的想象力,而1.如果这种打断还是非常频繁的,所累积的效率损失将是巨大的。——译者注案例账户消费者合同文件系统文件Web服务数据库概念、隐喻、业务领域数据模型、比特和字节、机器数据库文件系统消费者案例账户合同Web服务分界(痛苦的穿越)文件www.dearbook.com.cndearbook18第一部分重新思考Web应用且也是因为它可以将用户交互和服务器端的请求更加充分地混合起来。在传统的Web应用中,与服务器交互需要点击超链接或者提交表单,然后等待页面的刷新,这打断了用户的工作流程。与之相对应的是,让服务器响应鼠标移动、拖拽或者键盘输入这样的用户事件,也就是说,服务器在用户身边为用户服务,而不是挡在用户前面,打断他的操作。GoogleSuggest(www.google.com/webhp?complete=1)就是这样一个简单的但是很有说服力的例子。当用户在搜索框键入一些字符的时候,应用从服务器取回与用户已键入字符串相似的搜索条目(根据全世界其他人的搜索),并且显示在输入框下方的下拉列表中。第8章将提供这类服务的一个简单实现。1.2.4有纪律的严肃编程现在传统的Web应用有时候也会用到JavaScript,不过主要是用来给页面添加一些花哨的东西。基于页面的模型使得这样的增强没有办法更进一步,限制了用户可以得到的更加理想的交互。这种类似于第22条军规的状况,使得JavaScript很不公平地获得了一种琐碎的、自由散漫的编程语言的名声,为那些严肃的开发者1所不屑。为Ajax应用编程的情况则完全不同。提交给用户运行的应用将会一直运行直到用户关闭程序为止。不崩溃,不变慢,也没有内存泄漏之类的毛病。如果我们的产品定位于独占式应用的市场,这还意味着很多小时的密集使用。要达到这个目标,当然需要高性能的、可维护的代码,这与服务器端应用的要求是一致的。相比之下,Ajax的代码库会比传统的Web应用大很多。对代码库进行良好的组织是非常重要的。编写代码不再是单个开发者的职责,而是整个团队来参与。可维护性、分离关注点、共同的编程风格以及设计模式,这些都是需要考虑的问题。从某个角度来看,Ajax应用就是用户所使用的一块复杂的代码,它需要高效地与服务器进行通信。它显然来源于传统的基于页面的Web应用,但是它们之间的相似性也仅限于此,两者之间的差别就像是木马轮和现代自行车之间的差别。在脑海中要记得它们之间的这些差别,因为只有这样才能创造出真正引人注目的Web应用。1.3真实世界中的Ajax富客户端理论已经说得够多的了,让我们再来看看一些真实世界中的应用,获得一些感性认识。Ajax已经用于创建一些重要的应用,使用Ajax方法的好处是一目了然的。Ajax现在仍然处在发展的早期,这么说吧,这就好比自行车发展到了还只有几个人装上踏板和实心橡胶轮胎的时代,刚有人开始研制盘式刹车器和变速齿轮。下面一节将会考察Ajax当前的状态,然后详细分析Ajax的一个卓越的早期应用,看看使用Ajax将得到什么回报。1.通常是指那些受过严格编程训练的开发者,特别是J2EE和.NET开发者,更是自觉得高人一等。——译者注www.dearbook.com.cndearbook第1章一种新的Web设计方法191.3.1现状打造Ajax的版图,Google比其他公司做得更多(和其他领域的开拓者一样,早在Ajax这个名字浮出水面之前,他们就做了很多工作)。在2004年初,他们就推出了beta版本的GMail服务。除了它阔绰的容量,GMail最为人称道的就是它的用户界面。它允许用户一次打开多个电子邮件,并且,即便用户正在写邮件,邮件列表也能够自动更新。与同期的大多数由因特网服务提供商(ISP)提供的Web邮件系统相比,这无疑是一个显著的进步。而与很多Web界面模仿MicrosoftOutlook和LotusNotes的企业邮件服务相比,GMail并没有依赖重量级的、容易出问题的ActiveX控件和Javaapplet,但在功能上却毫不逊色。这样做所带来的好处就是完全的跨平台,可以在任何平台1、任何地点使用GMail的服务,无需像企业邮件服务的用户那样需要预先在机器上安装一堆额外的软件2。此后,在提供更加丰富的交互性方面,Google走得更远。例如,当用户键入字符时,GoogleSuggest可以为用户提供与输入字符相符的提示,帮助他们完成想要键入的搜索字符串;GoogleMaps可以执行交互式的、可缩放的基于位置的搜索。与此同时,其他公司也纷纷开始试验使用这一技术,例如Flickr的在线照片共享系统,它现在已经是雅虎网站功能的一部分了。到目前为止,我们这里讨论的应用都只算初步的尝试。它们仍然是瞬态应用,为偶尔的使用而设计。几个月来相关的技术框架显著增加,这可以看作是市场向独占式Ajax应用迁移的征兆。第3章将会考察其中的一些框架,而在本书的附录C中,我们将试图总结这一领域的当前状态。这些证据表明,Ajax正在赢得市场的青睐。我们开发者可以出于个人兴趣来玩一种新技术,但是像Google和雅虎这样的大型企业只有在看到了诱人的商业前景之后才会接受某种新技术。我们已经概括了Ajax的很多理论上的优势,在下面一个小节,我们将剖析GoogleMaps,看看这些理论是如何组合在一起来建造真实的应用的。1.3.2GoogleMapsGoogleMaps是结合了地图浏览和搜索引擎的产物。初始状态,显示的是美国地图(图1-15)。这个地图可以自由地通过文本来查询,并且可以精确地细化到街道地址或者像宾馆和餐馆这样的生活设施(图1-16)。查询功能类似传统的Web应用,需要刷新整个页面,但是地图本身是Ajax驱动的。在宾馆搜索的每一个链接上点击,将会在地图上立即弹出一个提示框,地图还可能会稍微滚动以适应这个提示框的位置。滚动地图本身可能是GoogleMaps最有意思的功能了,用户可以用鼠标拖拽整张地图。地图是由很多块小的图片拼接而成的,如果用户滚动得足够远,要显示出一些新的区域时,这些区域的图片将会异步地加载。这个延迟很明显,可以观察到起初它们是一些空白的区域,1.有两方面的含义,即任何的操作系统和任何的现代GUI浏览器。——译者注2.企业邮件服务的用户通常需要在客户端机器上安装一堆ActiveX控件,然后才能使用这些服务,而ActiveX的安全性受到了广泛的指责。——译者注www.dearbook.com.cndearbook20第一部分重新思考Web应用当它们被加载时,会一块一块地显示出来。但是在这个地图的更新过程中,用户还可以继续滚动,触发更多的更新。这些小块的地图在用户的会话过程中会被浏览器缓存起来,这使得当回到以前曾经访问过的地图时,显示的速度非常之快。图1-15GoogleMaps的首页提供了一个可以滚动和放大的美国地图,还有熟悉的Google搜索条。要注意的是,缩放控件是在地图之上而不是在它的旁边,这使得用户的视线无需离开地图就可以进行缩放控制图1-16在GoogleMaps上进行宾馆搜索。注意,那些阴影和可爱的提示气球是使用传统DHTML技术创建的。Ajax请求的使用使得这些功能更加动态也更加好用www.dearbook.com.cndearbook第1章一种新的Web设计方法21回到我们关于可用性的讨论,你会发现有两个重要的东西浮现了出来。其一,触发下载新地图数据的操作不是点击一个特定的“取得更多的地图”的链接,而是用户的操作,也就是说,移动地图。用户的工作流程并没有被与服务器的通信所打断。其二,请求本身是异步的,这就意味着,当获取新数据的时候,相关的链接、缩放控件以及其他页面上的功能仍然都可以使用。因特网上的地图服务并不是什么新东西。如果看看Ajax之前的典型的因特网地图网站,我们看到的是完全不同的交互模式。地图也明显地划分成很多个小块,缩放控件和导航链接可能会在地图的边缘。每次点击这些控件,都会引起整个页面的刷新,随后出现一个显示着不同地图区域的相似的页面。用户的操作总是被打断,在看到GoogleMaps之后,毫无疑问,用户会觉得Ajax之前的使用方式缓慢而又沉闷1。转到服务器端,毫无疑问,所有的地图服务都有一个强大的地图系统作为支撑。每一小块的地图都是一个图片。当用户滚动地图的时候,Ajax之前的地图服务站点的Web服务器需要不断地刷新页面的模板;而在GoogleMaps上,一旦运行起来,服务器只需要提供必需的数据,而很多的图片已经被浏览器缓存起来了(是的,只要提供相同的URL,浏览器也能缓存页面中的图片。但是,采用这种方案,浏览器在检查缓存是否过期时仍然会造成不必要的服务器流量,而且比起以编程方式在内存中缓存图片的方案,也不是很可靠)2。作为Google所推出的一个最卓越的展示品3,节约带宽是必须要考虑的问题。对于像Google这样的在线服务来说,易于使用是一个关键的特征,只有这样才能让用户用过之后再回来。而且页面点击数对于商业上的成败至关重要。而引入Ajax所提供的灵活的UI之后,Google的竞争使得传统的地图服务提供商们忧心如焚。当然,后端服务的质量也是需要比较的因素,但是当其他部分都是一样的时候4,Ajax形成了巨大的商业优势。可以预期,像这样更为丰富的界面的公开展示会越来越多,变得更加普遍。作为一种很容易推销出去的技术,在接下来的几年里Ajax看来会有很光明的前途。然而,其他的富客户端技术也在谋求获得市场份额,虽然它们不在本书的讨论范围之列,但在结束我们的综述之前对它们做一下展望也是很重要的。1.4Ajax的替代方案市场需要基于Web的应用表现能力更加丰富,响应更加灵敏,Ajax满足了这种需求,而且无需在客户端安装任何额外的软件。但是这一领域并非只有一个竞争者,在某些情况下,它甚至1.作为对比,读者可以亲自去尝试一下微软公司所提供的旧的地图服务http://terraserver.microsoft.com。这个服务很有可能很快被废弃,因为微软公司推出了新的地图服务http://local.live.com。新的地图服务,包括这个网站上的很多其他服务,都大量采用了Ajax的技术来建造。—
  • 相关资料
  • 该用户的其他资料
  • 名称/格式
  • 下载次数
  • 资料大小
  • 名称/格式
  • 下载次数
  • 资料大小

用户评论

0/200
暂无评论
上传我的资料

资料阅读排行

关闭

请选择举报的类型

关闭

提示

提交成功!

感谢您对爱问共享资料的支持,我们将尽快核实并处理您的举报信息。

关闭

提示

提交失败!

您的举报信息提交失败,请重试!

关闭

提示

重复举报!

亲爱的用户!感觉您对爱问共享资料的支持,请勿重复举报噢!

全屏 缩小 放大
收藏
资料评价:

/ 0
所需积分:1 立即下载
返回
顶部
举报
资料
关闭

温馨提示

感谢您对爱问共享资料的支持,精彩活动将尽快为您呈现,敬请期待!