AJAX 技术简介[2]

AJAX 技术简介[2]

　　1.3.9　基本问题

　　有了以上了解，你怎么想？即使是要求最苛刻的客户应用，也已经把Web作为首选平台。很显然，基于Web的应用很容易部署，而对用户的这种低门槛正是 Web应用最耀眼的地方。由于浏览器无处不在，而且无需下载和安装新的软件，用户利用基于浏览器的客户端就能很轻松地尝试新的应用。用户只需点击一个链接，就能运行你的应用，而不用先下载几MB的安装程序才能尝试。基于浏览器的应用也不考虑操作系统是什么，这说明不仅使用不同操作系统（如Linux和 OS X）的人能运行你的应用，对你来说，也不必考虑针对不同的操作系统开发和维护多个安装包。

　　既然基于Web的应用是有史以来最好的东西，那我们为什么还要写这本书？如果回头看看Internet的起源，可以看到，最初Internet实际上就是让科学家们和学术机构交换文章和研究成果，这是一种简单的请求/响应模式。那时不需要会话状态，也不需要购物车；人们只是在交换文档。尽管你有很多办法来创建动态的Web应用，但如果想让应用在用户中真正深入人心，想要得到大量的用户，就必须在浏览器上大做文章，这说明，Internet以请求/响应模式做为基础，由此带来的同步性也造成了妨碍。

　　与Microsoft Word或Intuit Quicken之类的胖客户应用相比，Web模型当然只具有“平均性”，只能对所有用户做折衷考虑。不过，由于Web应用很容易部署，而且浏览器的发展相当迅速，这意味着大多数用户都已经学会了适应。但是，还是有许多人认为Web应用只是算“二等公民”，给人的用户体验不是太好。因为Internet是一个同步的请求/响应系统，所以浏览器中会整个页面进行刷新。最初，这种简单的请求并没有什么问题，如果用户做了一两处修改，就必须向服务器发回整个文档，而且要重新绘制整个页面。尽管这样是可以的，但是由于存在这种完全刷新限制，意味着应用确实很粗糙。

　　这并不是说开发人员只是袖手旁观，全然接受这种状况。Microsoft对于交互式应用有一定了解，而且对于这种标准请求/响应模式的限制一直都不满意，因此提出了远程脚本（remote scripting）的概念。远程脚本看似神奇，其实很简单：它允许开发人员创建页面，从而以一种异步的方式与服务器交互。例如，客户可以从一个下拉列表中选择状态，这样就会在服务器上运行一个脚本，并确定客户的发货花销。更重要的是，显示这些花销时无需刷新整个页面！当然，Microsoft的方案只适用于它自己的技术，而且需要Java，但有了这个进步，说明更丰富的浏览器应用并不是海市蜃楼。

　　对于同步页面刷新问题还有其他一些解决方案。针对Microsoft的远程脚本，Brent Ashley在创建JavaScript远程脚本（JavaScript Remote Scripting，JSRS）时开发了一个平台中立（独立于平台）的方案。JSRS依赖于一个客户端JavaScript库和DHTML，可以向服务器做异步的调用。与此同时，许多人利用了IFRAME标记，可以只加载页面中的某些部分，或者向服务器做“隐藏”的调用。尽管这是一个可行的方法，而且也为很多人所用，但它肯定不是最理想的，还有待改善。

　　1.3.10　Ajax

　　终于谈到这里了：客户希望得到一个功能更完备的应用，而开发人员想避开繁琐的部署工作，不想把可执行文件逐个地部署到数以千计的工作站上。我们已经做过很多尝试，但是任何一种方法都不像它原来标榜得那么完美。不过，最近又提出一个极其强大的工具。

　　如今我们又有了一个新的选择，新的工具，可以创建确实很丰富的基于浏览器的应用。我们有了Ajax。Ajax不只是一个特定的技术，更应算是一种技巧，不过其前身JavaScript主要是一种组件。我们知道，你可能会说“JavaScript根本不值一提”，但是由于Ajax的出现，人们对这种语言又有了新的兴趣，应用和测试框架再加上更优秀的工具支持，这些都减轻了开发人员肩头的重担。随着Atlas的引入，Microsoft对Ajax投入了大力支持，而名声不太好的Rails Web框架也预置了充分的Ajax支持。在Java世界中，Sun已经在其BluePrints Solutions Catalog中增加了许多Ajax组件。

　　坦率地讲，Ajax并不是什么新鲜玩艺。实际上，与这个词相关的“最新”术语就是XMLHttpRequest对象（XHR），即使是这个术语也早在 Internet Explorer 5（于1999年春天发布）中就已经出现了，那时是作为 Active X控件露面的。不过，真正新的内容是浏览器的支持。原先，XHR对象只在Internet Explorer中得到支持（因此限制了它的使用），但是从Mozilla 1.0和Safari 1.2开始，对XHR对象的支持开始普及。这个很少使用的对象和相关的基本概念甚至已经出现在W3C标准中：DOM Level 3 加载和保存规范（DOM Level 3 Load and Save Specification）。现在，特别是随着Google Maps、Google Suggest、Gmail、Flickr、Netflix和A9等应用变得越来越炙手可热，XHR也已经成为事实上的标准。

　　与前面几页提到的方法不同，Ajax在大多数现代浏览器中都能工作，而且不需要任何专门的软件或硬件。实际上，这种方法的一大优势就是，开发人员不需要学习一种新的语言，也不必完全丢掉他们原先掌握的服务器端技术。Ajax是一种客户端方法，可以与J2EE、.NET、PHP、Ruby和CGI脚本交互，它并不关心服务器是什么。尽管存在一些很小的安全限制，但即使不清楚这些安全限制，你也可以现在就开始使用Ajax，而且能充分利用你原有的知识。

　　你可能会问“谁在使用Ajax？”。前面已经提到，Google显然就是最早采用Ajax的先驱之一，而且已经有很多这方面技术的例子，包括Google Maps、Google Suggest和Gmail，这还只是其中的几个应用而已。Yahoo!也开始引入Ajax控件，另外Amazon提供了一个简洁的搜索工具，其中大量使用了这个技术，例如，在钻石的某一方面上移动滑块，这会带来动态更新的结果。并不是每次改变你的评价标准时都会更新页面，你在移动滑块时就会查询服务器，这样就能更快、更容易地明确你的选择。

　　Netflix,是一家很热门的DVD租借公司，它也使用了Ajax，用户浏览影片时，可以提供更详细的信息。如果客户把鼠标放在一个影片的图片上时，这个影片的ID就会发送到中心服务器，然后会出现一个“气泡”，提供这个影片的更多细节。同样的，页面并不会刷新，每个影片的详细信息并不是放在隐藏的表单域中。利用这种方法，Netflix可以提供影片的更多信息，而不会把页面弄乱。客户浏览起来也更容易，他们不必点击影片，看完影片详细信息后再点击回到影片列表页面；客户只需把鼠标停在影片上，就这么简单！我们想要强调的是，Ajax并不限于“.com”之类的网站才能使用；公司的开发人员也开始涉足这个技术，有一些开发人员已经在使用Ajax来改善原来很丑陋的验证方案，或者用于动态地获取数据。

　　关键在于，Internet默认的请求/响应模式有了重大转变，这正是Ajax的核心所在，尽管这并非全新的内容。Web应用开发人员现在可以自由地与服务器异步交互，这说明，他们可以完成许多原本只能在胖客户上完成的任务。例如，用户输入一个邮政编码时，可以验证这个邮政编码是否正确，然后用相应的城市和州填写表单中的其他部分；或者，用户选择美国时，可以用美国的各个州来填写一个下拉列表。以前也可以用其他方式模拟这些工作，但是使用Ajax的话，这些工作会更加简单。

　　那么，是谁发明了Ajax？要找出真正的源头，为此总免不了一场争论；不过，有一点是确定的，2005年2月，Adaptive Path的JesseJames Garrett最早造了这个词。在他的文章“Ajax: A New Approach to Web Applications”（Ajax：Web应用的一种新方法）中，Garrett讨论了如何消除胖客户（或桌面）应用与瘦客户（或Web）应用之间的界限。当然，Google在Google Labs发布Google Maps和Google Suggest时，这个技术才真正为人所认识；而且此前已经有许多这方面的文章了。但确实是Garrett最早提出了这个词，否则我们就得罗罗嗦嗦地说上一大堆：异步（Asynchronous）、XMLHttpRequest、JavaScript、CSS、DOM等等。尽管原来把Ajax认为是 Asynchronous JavaScript + XML（异步JavaScript + XML）的缩写，但如今，这个词的覆盖面有所扩展，允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在内。

　　你可能会说，“哦，那有什么大不了的？”。这么说吧，使用XHR，而且与服务器异步通信，这样就能创建更加动态的Web应用。例如，假设你有一个下拉列表，这个列表是根据另外一个域或下拉列表的输入来填写的。正常情况下，必须在加载第一个页面时把所有数据都发送给客户，然后使用JavaScript根据输入来填写下拉列表。这么做并不困难，但是会让你的页面变得很臃肿，取决于你的下拉列表到底有多“动态”，页面很可能膨胀得过大，这就有问题了。利用 Ajax的话，当作为触发源的域有变化，或者失去了输入焦点，就可以向服务器做一个简单的请求，只要求得到更新下拉列表所需的部分信息。

　　来单独考虑一下验证。你写过多少JavaScript验证逻辑？用Java或C#编写验证逻辑可能很简单，但是由于JavaScript缺乏很好的调试工具，再加上JavaScript是一种弱类型语言，所以用JavaScript编写验证逻辑实在是一件让人头疼的事情，而且很容易出错。服务器上还很有可能重复这些客户端验证规则。使用XHR，可以对服务器做一个调用，触发某一组验证规则。这些规则可能比你用JavaScript编写的任何规则都更丰富、更复杂，而且你还能得到功能强大的调试工具和集成开发环境（IDE）。

　　你现在可能又会说，“这些事情我早已经用IFRAMES或隐藏框架做到了。”我们甚至还使用这种技术来提交或刷新过页面的一部分，而不是整个浏览器（页面）；不能不承认，这确实可行。不过，许多人认为这种方法只是一种修补手段，以弥补XHR原来缺乏的跨浏览器支持。作为Ajax的核心，XHR对象设计为允许从服务器异步地获取任意的数据。

　　我们讨论过，传统的Web应用遵循一种请求/响应模式。如果没有Ajax，对于每个请求都会重新加载整个页面（或者如果利用IFRAMEs，则是部分页面）。原来查看的页面会放到浏览器的历史栈中（不过，如果使用了IFRAMEs，点击“后退”（back）按钮不一定能得到用户期望的历史页面）。与此不同，用XHR做出的请求不会记录在浏览器的历史中。如果你的用户习惯于使用后退按钮在Web应用中导航的话，就可能会产生问题。

　　1.4　可用性问题

　　前面谈到的都是用户的期望，除此以外，可用性也不能不提。Ajax方法相当新，还没有多少成熟的最佳实践或启发规则。不过，标准Web设计原则还是适用的。随着时间推移，越来越多的人开始尝试这种方法时，就会发现可能存在哪些限制，并建立适当的指导原则。也就是说，你应该让用户来指导你。取决于在应用中如何使用Ajax，你可能会动态地改变页面中的某些部分；习惯于整个浏览器完全刷新的用户可能不会注意到与以前有什么变化。这个问题引出了一些新的特性，如37signals所普及的黄褪技术（Yellow Fade Technique，YFT)，这个特性已经用在Ajax的旗舰应用Basecamp中。

　　基本说来，YFT 是指，“取页面中有变化的部分，并置为黄色”。假设你的应用原本没有大量使用黄色，用户就很可能会注意到这种改变。过一段时间后，再让黄色逐渐褪色，直到恢复为原来的背景色。显然，你也可以选用你喜欢的其他颜色；所要做的就是把用户的注意力吸引到有变化的部分。

　　可能YTF并不适用于你的应用；你也可以选择用一种不那么明显但仍很有用的方式来提醒用户。Gmail在右上角显示了一个闪动的红色“Loading” 加载记号，提醒用户正在获取数据。

　　究竟要使用YFT还是一种类似的技术，这实际上取决于你的用户。最简单的方法是让一组用户代表来进行测试。可以通过文字问卷，也可以使用基于Web的原型应用，这要看你处在设计过程的哪个阶段，但是不论如何测试，在真正采用Ajax完成复杂设计之前都应该得到一些用户反馈。

　　而且要从小处做起。刚开始使用Ajax时，不应该马上就去创建一个可以调整列的动态门户网站。而是应该先试着处理客户端验证，逐步转向服务器端。等有所了解后，可以再尝试更动态的使用，如填写一个下拉列表，或者设置某些默认文本。
不管你要如何应用Ajax，要记住，别做稀奇古怪的事情。我们知道，这不算是一个学术性的建议。不过，目前这方面还没有严格的规则。听听你的用户怎么说，部署之前要先做测试，而且要记住，如果太过古怪，用户很快就会点击“skip intro”链接跳过你精心设计的这些部分。

　　你要知道使用Ajax 时有几个常犯的错误。我们已经讨论过，有变化时如何向用户提供可视化的提示，不仅如此，Ajax还会以其他方式改变标准的Web方法。首先，不同于 IFRAMES和隐藏框架，通过XHR做出请求不会修改浏览器的历史栈。在许多情况下这没有什么问题（你可能会点击后退箭头，只是要看看是不是什么都没有改变，但这么做能有几次呢？） ，不过，如果你的用户确实想用后退按钮，就有问题了。

　　与其他基于浏览器的方法不同，Ajax不会修改地址栏中显示的链接，这说明你不能轻松地为一个页面建立书签，或者向朋友发送一个链接。对于许多应用来说，可能没有这个要求，但是如果你的网站提供了驾驶方向之类的东西，就要针对这个问题提供一个解决方案。

　　有一点很重要，不要过分使用Ajax。记住，JavaScript会在客户的浏览器上运行，如果有数千行JavaScript代码，可能会让用户感觉速度太慢。如果脚本编写不当，就会很快失去控制，特别是当通信量增加时。

　　Ajax允许你异步地完成操作，这个最大的优点同时也是它最突出的缺点。我们以前总是告诉用户，Web应用是以一种请求/响应模式完成操作的，用户也已经接受了这种思想，但是利用Ajax，就不再有这个限制。我们可以修改页面的一部分，如果用户不希望这样，他们很可能会被搞糊涂。所以，你要注意一定要让用户明白这一点，不要过分自作聪明。记住，只要有问题，就要请用户代表进行测试！

　　1.5　相关技术

　　你看到这本书时，可能已经了解了在应用中实现Ajax所需的大多数技术。重申一句，我们想强调的是，Ajax是一个客户端技术，不论你现在使用何种服务器端技术，都能使用Ajax，而不管使用的是Java、.NET、Ruby、PHP还是CGI。实际上，这本书里，我们并不考虑服务器端，而且假设你已经很清楚如何结合你日常工作中使用的服务器端技术。在后面的几百页中，我们强调的重点是客户端技术和方法，创建丰富的基于浏览器的应用时需要用到这些技术。

　　尽管可以使用你喜欢的任何服务器端技术，使用Ajax时，思想还是需要一点转变。在一个典型的Web应用中，服务器端代码会呈现一个完整的页面，并涉及一个完整的工作单元。利用Ajax，可能只返回一点点文本，而且只涉及一个业务应用的很小的子集。对于大多数有经验的Web开发人员来说，理解起来没有什么问题，但是一定要把这一点记住。

　　一些新兴的框架有助于使开发人员不用去考虑Ajax的一些细节；不过，你要对JavaScript有所了解。我们知道，JavaScript用起来可能很费劲。很遗憾，对此没有什么办法。我们大多数人都学过这么一招，把“alert”作为一种系统输出来帮助调试，糟糕的是，这种技术使用得还很广。不过，现在我们有了新的利器。

　　除了JavaScript，你还要熟悉其他一些与表示相关的技术，如HTML、DOM和CSS。你不必是这方面的专家，但是基本了解还是必要的。这本书里我们会谈到需要你知道的大多数内容，这里没有谈到的内容可以参考网上的资源。

　　关于测试驱动（你肯定写了单元测试，对不对？），我们会介绍JsUnit和Selenium。利用这些工具，可以先开发JavaScript测试，并检查浏览器兼容性测试。通常认为，下一代开发环境会对JavaScript提供更好的支持，另外一些与Ajax相关的技术会进一步减轻开发人员的负担。不断引入的脚本和框架也使开发变得更为简单。

　　1.6　用法

　　既然你已经对Ajax产生了兴趣，还要知道重要的一点，什么时候应该使用Ajax技术，而什么时候不该用。首先，不要害怕在你的应用中尝试新的方法。我们相信，几乎每一个Web应用都能从Ajax技术得到好处；只不过不要矫枉过正，过于离谱就行了。从验证开始就很合适，但是不要限制你的主动性。你当然可以使用Ajax提交数据，但可能不能把Ajax作为提交数据的主要方法。

　　其次，惟一会影响你应用Ajax的就是浏览器问题。如果大量用户（或者特别重要的用户）还在使用比较老的浏览器，如Internet Explorer 5、Safari 1.2或Mozilla 1.0之前的版本，Ajax技术就不能奏效。如果这是一些很重要的用户，就要使用针对目标用户的跨浏览器的方法，而放弃Ajax，或者开发一个可以妥善降级的网站。浏览器支持可能不是一个重要因素，因为Netscape Navigator4在市场上的份额很小；不过，还是应该查看web日志，看看你的应用适用什么技术。

　　如前所述，验证和表单填写就非常适合采用Ajax实现。还可以使用DOM的“拖”技术建立真正动态的网站，如Google的个性化主页。

　　可以看到，Ajax为Web应用开发提供了新的机会。你不会再因为以往的专用技术或表现不佳而受到妨碍。利用Ajax，胖客户与瘦客户之间的界限不再分明，真正的蠃家则是你的用户。

　　1.7　设计考虑

　　既然对在哪里使用Ajax已经有所认识，下面再来谈谈应用Ajax的一些设计考虑。许多原则与Web应用的原则并无不同，不过还是有必要强调一下。要尽力减少客户和服务器之间的通信量。如果应用得当，Ajax会使你的应用响应更快，但是如果每次用户从一个域移到另一个域时你都会来回传递超量的数据，用户肯定不会满意。如果有问题，按标准约定行事。如果大多数应用都那么做，可能你也应该那么做。如果还有问题，可以看看Web桌面应用的有关标准。为此已经建立了一些模式，而且以后还会有更多的模式 (www.ajaxpatterns.org)。

　　刚开始使用Ajax时，你的用户可能不清楚应用是怎么工作的。多年来我们一直在告诉用户：Web是以某种（同步）方式工作的，而Ajax则增加了异步组件，可能与之背道而驰。简单地说，不要让用户觉得奇怪。用户用跳格键离开最后一个域时，如果以前的应用（没有使用Ajax的应用）没有保存表单，那么使用 Ajax之后的应用也不要保存表单。

　　实现Ajax时最重要的问题是要力求简单：完全从用户出发，要尽量“傻瓜”（类似于“傻瓜”相机，用户只需最简单的操作就能得到想要的照片）。要把用户放在心上，不要去做“简历驱动的设计”（译者注：有的开发人员希望完成一个复杂的设计，以便写在简历里，来证明自己的能力）。如果只是想让新老板接受你，并因此在应用中使用Ajax，这是不合适的；如果使用Ajax能让你的用户有更丰富的体验，那就义无反顾地使用Ajax吧。但是，别忘了，只是因为你会做，并不意味着应该做。要理智一些，先考虑你的用户，这样才对。

　　我们后面还会更多地谈到安全，但是这里需要先说明一点，Ajax有一些安全考虑。记住，可以在浏览器中查看源代码，这说明任何人都能知道你是怎么创建你的小部件的。建立XHR对象时必须包含统一资源定位符（uniform resource locators，URL），所以可能会有恶意用户修改你的网站，运行他们自己的代码。谨慎地使用Ajax可以降低这种风险。

　　1.8　小结

　　Internet最初只是要连接研究人员，让他们共享信息，时至今日，Internet已经得到了巨大的发展。Internet开始时只有简单的文本浏览器和静态页面，但是如今几乎每家公司都有一个亮丽的网站，想找到一个粗糙的网站倒是很不容易。最早谁能想得到，有一天人们能在网上共同研究新型汽车，或者购买最新的Stephen King小说呢？

　　胖客户应用的开发人员都饱受部署之苦，因为要把应用部署到数以千计的用户机器上，他们急切地希望Web能够减轻他们的负担。多年以来，已经出现了许多 Web应用技术，有些是专用的，另外一些需要高超的编程能力。在用户体验方面，尽管这些技术有弱有强，但没有哪个技术能使瘦客户应用达到桌面应用的水平。不过，由于很容易部署，有更大的客户群体，而且维护开销更低，这说明尽管浏览器存在一定的局限性，仍是许多应用的首选目标平台。

　　开发人员可以使用一些技巧来绕过Internet对开发人员的麻烦限制。利用各种远程脚本方法和HTML元素，开发人员可以与服务器异步地通信，但是直到主流浏览器对XMLHttpRequest对象提供了支持，真正的跨浏览器方法才有可能。Google、Yahoo和Amazon等公司已经走在前面，我们终于看到基于浏览器的应用也能与胖客户应用不相上下。利用Ajax，你可以尽享这两方面的好处：代码位于你能控制的服务器上，而且只要客户有浏览器，就能访问一个能提供丰富用户体验的应用。