关闭

关闭

封号提示

内容

首页 AJAX In Action-CH .pdf

AJAX In Action-CH .pdf

AJAX In Action-CH .pdf

上传者: freedompan 2011-06-26 评分 4.5 0 90 12 411 暂无简介 简介 举报

简介:本文档为《AJAX In Action-CH pdf》,可适用于IT/计算机领域,主题内容包含dearbook一种新的Web设计方法本章内容异步网络交互和使用模式Ajax与传统Web应用的关键区别Ajax的四个基本原则真实世界中的Ajax想的符等。

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

精彩专题

职业精品

上传我的资料

热门资料

资料评价:

/ 55
所需积分:1 立即下载

意见
反馈

返回
顶部

Q