Adding Ajax中文版 (2010 年度畅销榜NO.44752 )

Adding Ajax封面上的动物是一只带有叉状斑纹的鼠狐猴，通常叫做叉斑鼠狐猴（学名：Phaner furcifer）。几乎和所有狐猴一样，只有在马达加斯加（Madagascar）岛上，才能够找到叉斑鼠狐猴的踪影。叉斑鼠狐猴生活在这个国家的北部和西部的热带雨林中。叉斑鼠狐猴大约有18到22英寸长，但是它的尾巴就占去了整个长度的一半。这种狐猴名字的由来是：从每只眼睛到它的头顶各有一条条纹，最后汇成一个叉状。这种特殊的灵长目动物以温带落叶树木的树脂为食，但有时也吃昆虫幼虫分泌的蜜汁以及昆虫。叉斑鼠狐猴是最善于鸣叫的狐猴，已被证实的叫声就超过7种，包括ki、kiu、kea（只有雄性才会发出）、hon、以及报警、悲痛和争斗的叫声。

和世界上的大多数动物一样，叉斑鼠狐猴的领地正在受着耕地和农场扩张的威胁。它也正在濒临灭绝。然而，人们正在努力保护这种狐猴；在一些公园以及这个国家周围的自然保护区都可以发现它们。

本书的封面图片来自Lydekker国家历史图书馆。

第1章 准备迁移到Ajax 1
Ajax是这样的技术 3
开始清理 7
将表格转换为CSS布局 11
继续转换：逐个元素进行转换 16
处理浏览器特有的怪癖 17
了解你的客户端基础 20
为你的网站设计一个框架 24
渐进增强和彻底翻新 26
第2章 Ajax基础 29
Web应用程序 29
准备要使用的对象 37
准备和发送请求 39
处理Ajax响应 45
端点、JavaScript沙箱和控件 62
安全问题 67
性能初探 68
最后提一下异步和同步 69
第3章 Ajax工具及术语 71
Prototype 72
script.aculo.us 80
Rico 83
Dojo 85
其他库 92
第4章 交互效果 97
Ajax友好的事件处理 98
即时信息 106
页内预览 118
为成功或失败添加颜色渐变效果 123
第5章 空间：最后的边界 133
水平方向上控制空间：折叠 134
标签页 160
覆盖 173
第6章 动态处理数据 180
就地编辑 181
就地编辑：性能、安全性及可访问性 192
高亮显示变更 196
再谈页内更新的可访问性 208
实时验证 211
性能和两阶段提交 214
外部库的数据效果 217
第7章 单页面应用程序中的历史、导航和位置 222
介绍新挑战：内容分页 223
记住位置 244
新旧持久保持技术共存 252
新的页面视图 261
事后分析 264
第8章 添加高级视觉效果 265
高级CSS技巧 266
可缩放矢量图形 277
SVG快速浏览 282
SVG和Ajax的混合 287
图形的未来 294
第9章 Mashup你的网站 296
利用Google绘制地图 297
第二个服务：Flickr 303
在我们的Mashup中加入Technorati 317
重构这个Mashup 326
重构客户端 336
Mashup总结 347
第10章 可扩展性、基础结构，以及从头开始 349
框架：紧耦合和松耦合 350
Web服务：资源和安全 352
Ajax库：自给自足，还是“拿来主义” 353
从头开始设计Ajax 354
现有的框架 360
继续我们的Ajax 365
索引 367

译序 每每遇到一本好书，都很想和人分享，把它介绍给同事、朋友、甚至是自己的学生，遇到英文书籍时，更是想把它翻译出来，献给和我一样喜欢这本书的读者，但是总是由于时间和精力上的原因，都仅仅是翻译了书中的个别章节，或者是只做了一个读书笔记。尽管如此，与人分享的感觉是快乐的，于是就有了自己的博客（寒雪谷：http://hi.baidu.com/snowyvalley）上的一个栏目：快乐译站。 然而，现在，当我翻出快乐译站上的很多文章时，才发现仅是结果是快乐的，其中经历的过程并不快乐，甚至是痛苦的。其间要经历很多困扰，在选择技术术语时，让你感觉到仲伯难分，审词酌句时，更令你辗转反侧，美语俚语常常是横竖不通，走投无路，各种词汇间的细微差异足以让你左右为难，心情急躁。在你的体力还没有消之殆尽的时候，你会感觉到脑力已经不足了。就这样，每当遇到山穷水尽的时候，真的想从里面浮上来，透口气，甚至是中途放弃。在翻译这本书的中途就经历了这样的痛苦，自己静下心来，去反思，这本书真的值得花费这样的时间和精力去和大家分享吗？ 为了给自己减压，同时更是为了这个疑问，我走进了书店，翻开了琳琅满目的ajax书籍，这些书籍真的是各具特色，有的对模式的分析非常精妙，有的对效果的讲解细致入微，有的确实达到了模式和效果的完美结合，真的让人难分取舍。但是问题是，如果我是一个web开发者，同时，又是一个Ajax初学者，迫于工作需要，想在我的项目中使用Ajax，那么我该需要怎样的一本Ajax书呢？就这个问题我在书架前陷入了思考。 我不想改变我现有的项目，把它推倒重来，我没有时间，也没有精力，项目主管也不会容许我做这样的技术豪赌。我只能是让Ajax作为一个备选方案，让它使我的项目变得更好，而不是为了追求时尚而推翻曾经的积累和努力。我想让我的项目有所“革新”，而不是彻底“革命”，让它寿归正寝。 我不想重蹈覆辙，我想站在别人现在的起点上，继续向前走。我要在各种流行的Ajax库中，寻找最适合我的一个，甚至是综合应用这些库，不仅要扬它们各自的长处，避它们各自的短处，还要让它们彼此和睦相处。 我想在我的传统web中，寻找哪些地方可以进行改进，使它更具交互性和响应性，比如，不必离开当前页面，甚至不必重载页面就可以编辑表单，删除数据，而这一切完成后，又要适当地通知用户，已经为他们出色地完成了任务。仅仅提供文本信息是枯燥的，而且一切统计数据能否不必花费太多的成本，就可以使用图形的方式，形象地反映出来。 我的web页面空间总是觉得不够用，总是不得不强迫用户去拉动滚动条，我能否在有限的空间内放入更多的内容。 web上每时每刻都有新的服务出现，每时每刻都会有创意出现，比如：Google地图、Flickr照片服务、Technorati博客搜索等等，我们能否结合这些服务或者这些数据，也发挥一次自己的创意，也来一个mashup，制作一杯自己的“鸡尾酒”，对它们再利用，再加工，创造更大的价值，为我的web带来亮点。 我不要知识点的简单证明，或者是技术的一味堆砌，我想要一个真正意义上的“实”例，它更加贴近现实，更加真实，而且只要稍做修改就可以应用于现实。 好了，这就是我想要的一本书，它也可能是你想要的一本书，我已经找到了它，它正静静地躺在我的书架上，只不过我曾对它充满怀疑，只不过它是满目英文，我应该离开书店，继续译完它，把它拿出来与您分享。而此刻的您，也找到了这本书，您正把它握在手里，您正在把它和其它书籍进行比较，正在举棋不定，就和我当初站在书店里徘徊时的感觉一样，只要您清楚，您需要的是怎样的一本书，相信您自己的需要，相信您自己的判断力。如果它已经满足了您的需要，您也应该像我一样离开书店，只不过是带着这本书离开书店。 正如本书的作者所说，这本书会是一本非常好的书，因为他得到了所有的支持，我同样会说：这本书会是一本非常好的译本，因为我最终坚定了分享的信念。 在这里要感谢我的家人，容忍我花去业余时间，坐在电脑前，尤其是我的小女儿，每天陪我一直到深夜。还要感谢我的同学和同事，得到了他们的支持和鼓励，最后，还要感谢编辑，感谢他们的耐心和细心。 当然，作为译者，非常渴望在您和作者之间架起一道桥梁，能够让您和作者进行心与心的沟通，把作者的思想直接传递给您，而感觉不到译者的存在。但是由于个人能力所限，还不能达到这种境界，而且纰漏之处，也在所难免，非常真心地希望得到您的批评和指正。 李秀忠 2007-12-14于深圳 Email：xiuzhong.li@gmail.com

Ajax：可以说是几分变革，几分演变，而又有几分完全是炒作。Ajax是一个笼统的术语，它常用于涵盖如下一套技术：  标记，例如HTML、XHTML、XML和SVG  JavaScript  CSS和XSLT  最后，但也非常重要的是浏览器对象，包括canvas对象和真正执行Ajax的XMLHttpRequest对象。 我们暂且不提人们最近的关注程度，就这些技术而言，其中的大部分都已经应用近十年之久了。那么为什么人们现在还仍旧如此热衷呢？ Ajax不仅仅是一套技术－它还决定了web页面和web应用程序的新的发展方向。我们过去也曾有过这样的决定，但是我们却苦于没有这样的工具，来建立这样的应用程序。现在，这些规范经历了十年的考验，也已经日趋成熟，而且更重要的是，它们受到了web浏览器的广泛支持。新的规范继续涌现，而且这些工具的制造者也比以前更加亲密协作。 几年前，当web开发者最初尝试向web页面加入交互特性时，我们受着浏览器的制约，因为它们支持完全不同的模型，而且有时，甚至受制于不同的脚本语言。就连层叠样式表（Cascading Style Sheets ，CSS），这种作为一种统一的方式向页面添加表现层的技术，在应用时，都因解释的差异而受到困扰，更不必说一些专用的扩展了。 现在，CSS几乎受到了普遍的支持，尽管在一些系统中，还存在着一些“怪癖（quirks）”，其中大部分规范也已经受到了大多数浏览器的支持，而且现在，我们正处在这样的一个平台上，以前不能胜任的事情，现在却可以做的很好。至于脚本，经过ECMA标准组织的努力，我们已经有了一个JavaScript的发布版本，即ECMAScript，而且在Web的上上下下，它都受到了所有主流工具的认可和支持。 标记也变得更加复杂了，而且我们正在从结构松散、变化无常的HTML，向结构严谨、中规中矩的XHTML进行过渡。我们还加入了一些新的XML词汇，例如：可缩放矢量图形（Scalable Vector Graphics，SVG）－一种不必依赖插件和扩展对象，就可以加入交互图形的方式。它是和Canvas对象一起被引入的，它们都独立于任何标记，而且都将被包含在未来的HTML5中， HTML5则是旧的HTML向新的、结构严谨的XHTML过渡的一个中间产物。 然而，我们还没有完全放弃旧的私有对象。现在，与其在一个浏览器上实现它，还不如让它变得更加通用。XMLHttpRequest就是这样的一个对象，它允许我们直接从页面调用web服务，然后，动态地处理结果，而不必重载这个页面。 那么，这对开发者和用户意味着什么呢？它意味着你可以阅读一篇文章，点击它，然后就地编辑它－所有这一切都在同一个页面内完成。我们还可以从表中删除一些行，而且这种删除会立即生效。当然更新也会如此。 我们不必重载页面，或者照片就可以为照片添加分类。或者只通过点击缩略图，就可以放大显示那张照片。 我们对web表单的应用也发生了显著的变化。我们可以在一个列表中做出选择，而这些选项将被自动地添加到另外一个选择列表中。我们还可以使用拖拽的方式对表格内容进行排序，以及折叠一些域来腾出一些空间，或者点击标签页来填充一个大型表单的其他部分，或者来查看其他信息，而且这一切，我们还是不必重载这个页面。 当然，被我们当作“页面”的东西已经发生了变化，而且这种新的视角既有优点也有缺点。当有一百多个页面被加载时，不通过以前的刷新技术，单凭借“页面视图”，我们很难计算出应该为广告付多少费用。搜索引擎公司以及屏幕阅读器1（screen readers）都不能准确地理解动态生成的链接。因为在这种情况下，脚本已经被禁用或者不存在了，当进入依赖脚本的Ajax中时，我们已经没有办法完成任何事情了。 在这里，我们要提及渐进增强（progressive enhancement）的概念。由Steven Champeon根据哲学理论所提出的渐进增强概念认为：我们应该向现有的web技术，加入Ajax效果来增强它，而不是完全取代它。换句话说，你仍然可以建立比较传统的web应用程序，基于表单提交来更新一张表，然后，你可以增强它的功能，即：不必实际提交表单，就可以使用改变的表单域，来更新这张表。 在页面中，如果脚本被禁用，标签页会变成一系列纵向的节。数据没有变化，只是组织形式不同。这时，无论你是通过在PHP中所建立的应用程序，还是通过驻留在Unix box中的应用程序来，请求这些内容，亦或者是在Firefox、Safari以及IE浏览器中，通过JavaScript调用这些内容，这些内容最终将以幻灯播放（slideshow）的方式提供。 利用渐进增强的概念，脚本是否禁用也无关紧要，因为我们并没有丢失功能，仅仅是有些差异罢了。与此同时，Ajax会提高web应用程序的效率，而且在访问这些程序的人当中，大约有80%的人会使用合适的浏览器，而且脚本也是可用的。那么对于你来说最好的消息是：你已经离成功不远了。 读者对象 作为adding Ajax一书的读者，一个主要的假设是：你已经是一个web开发者，你希望通过加入Ajax效果，把你的比较传统的web应用程序升级到更高的层次。也可能，你已经拥有了web表单、服务端驱动（server-side-driven）页面以及静态内容，或者至少，你熟悉传统的web应用程序是如何工作的。这时，你是比较幸运的，你已经拥有了应用程序的“业务端”。现在你就可以把你的页面升级到更高的层次。 首先，还是让我们更详细地介绍一下阅读本书的预期读者。本书是为以下这些人准备的：  对web标记的使用有一定的经验，包括HTML和XHTML。  了解XML基础知识，包括了解既要保证语义有效，又要保证格式良好的必要性。  熟悉关系型数据库，并且至少在工作中，或者出于个人爱好和数据库打过交到。  使用过CSS，并且能够读懂大多数CSS样式表。  使用过JavaScript，而且对它非常熟悉，对面对对象的JavaScript是如何工作的，有比较好的见解。  更有兴趣扩展现有的应用程序，而不是建立所谓的富互联网应用程序（Rich Internet Applications，RIA）。 对于上面所列举的各项技术，本书并不要求你是这方面的专家，只是要求你有一些经验，并且借助一些帮助（比如，一些在线资源，或者其他特定的技术书籍）可以理解这些应用程序。 上面的最后一条相当重要。对于在web页面上，建立一个幻灯片播放替代软件（PowerPoint），或者建立一些在线游戏，以及其他纯脚本的解决方案，这些内容所需的概念，本书没有涉及。 本书所关注的完全是通过添加Ajax效果，来增强现有web应用程序的功能，它不是取代现有应用程序，而从头开始建立纯Ajax的解决方案。如果你对写一些基于web的电子表格这样的应用程序感兴趣，O'Reilly有其他一些非常好的书籍，更多地关注了这方面的内容。在这里，我只想建立一些更生动、有趣、而且更具交互性的web页面。 本书内容 我们并不要求你从头到尾通读本书。我们将每一章节尽量独立。也就是说，我们很少依赖前一章的工作成果，只是我们要使用一个Adding Ajax库，而这个库是在本书中逐步建立的。然而，所有的这些资料都已经包含在可供下载的实例中了。尽管如此，我还是建议你在阅读其他任何章节之前，先读一下第1章和第2章。 下面就是各个章节的主要内容： 第1章：准备迁移到Ajax 本章为Ajax技术提供了一个概述，而且在你坐下来准备编码之前，我们还讨论了，为改变你的网站制定策略的重要性。这里还涉及了发现你的网站读者的重要性，以及为完成这个任务提供了一些技巧。我们同时还介绍了一些标准的重要性，并且在你开始加入任何Ajax效果之前，一定要确保你有一个好的，稳定的web页面。一旦你读完了本章的内容，你就可以准备为你的应用程序，加入后面章节中所讨论的任何Ajax效果了。 第2章：Ajax基础 提供了对Ajax最核心的基本组件的讨论：如何与XMLHttpRequest对象打交道。在本章，我们还涉及了如何使用GET和POST请求，来请求一个web服务，以及针对跨域（cross-domain）的数据请求，如何使用动态脚本。至于数据格式，我们涉及了HTML、XML、以及最新的JSON（JavaScript Object Notation）。我们还讨论了Ajax请求的异步实质，而且还涉及了一些潜在的陷阱和性能问题。 第3章：Ajax工具及术语 介绍和演示了几个比较重要的Ajax库，包括Prototype、script.aculo.us、Rico、MochiKit等等。尽管大多数实例没有使用外部库，但是每章还是会有一些零星的实例，使用了一些这样的库，因此你将逐渐熟悉这些效果，学习如何扩展库，封装你自己的库，并且会发现一些和使用多个库进行Ajax开发相关的，比较有趣的挑战。 第4章：交互效果 学会交互部分，你才算学到了真正的Ajax，比如，如何和事件以及工作在多个浏览器上的事件处理器打交道，如何处理多个库的使用。另外，我们还涉及一些建立工具的技巧，从外部资源提取辅助数据，建立Ajax“渐变”来暗示变更、实时预览、以及在实时更新中整合实时预览。 第5章：空间：最后的边界 探索将web页面作为空间的概念，并且涉及了三个流行的管理web空间的方式。它们包括折叠（accordion），即空间被纵向折叠；标签页（tabbed page），即根据点击的标签提供页面；覆盖（overlay），即使用消息、照片或者其他材料覆盖在页面上。本章还将探索如何将这些完整的效果进行封装，以便能够通过一个库，为众多应用程序和页面提供这些效果。本章还讲解了如何将这些效果集成到web服务请求中。 第6章：动态处理数据 这里是真正的基础章节。在本章，你将学会如何更新数据，包括添加新数据、删除、以及更新这些数据，并且，所有的这一切，都将在一个页面中完成。由于我们的目标是在现有的web应用程序基础上进行扩展，所以表单更新和Ajax更新将同时存在，而且和睦相处。我们同时还使用了“渐变”为你的应用程序用户增添修饰和反馈。由于使用了“实时”更新和拖拽排序的效果，所以，我们也讨论了一些在Ajax中涉及到的数据库访问的性能和安全问题。 第7章：单页面应用程序中的历史、导航和位置 我们将在这里探索Ajax对Web的影响，包括破坏后退按钮、丢失浏览器历史、刷新页面时的动态效果的消失、链接一个Ajax“页面”，或者将该“页面”设为书签。在本章，我们将探索一些方式，重现这些消失的web效果，并且我们将尽可能地利用Ajax开发一个更好的效果，但同时仍旧保留Web最好的部分。 第8章：添加高级视觉效果 本章内容相当有趣。我们工作这么辛苦，现在让我们拿出画笔、涂鸦画板来渲泄一下。本章涉及了一些高级的CSS效果，包括拖拽滚动条、分页、Canvas对象、以及使用SVG。尽管最后两项还没有受到普遍的支持，但是支持的范围正在逐渐扩大，而且，如果使用它来弥补比较传统的数据表现形式，也是既有趣又有效的。 第9章：Mashup你的网站 在这里，我们将探索mashup技术。Ajax最强大的方面之一是引入web服务的能力，不管是我们自己的，还是其他人的，而且可以使用多种方式，直接在我们的web页面上整合这些数据。在本章，我们将来自Google的地图、来自Flickr的照片信息、以及来自Technorati的博客信息，全部整合到一个漂亮的标签页界面中，然后向你展示，无论是否使用脚本，使用这种实现方式，它都能够正常工作。 第10章：可扩展性、基础结构以及从头开始 本章我们终于可以从大量的代码实例中挣脱出来透透气了，让我们再来看一下性能、结构以及安全问题。我们将涉及web服务保密、需要发布的资源、以及如何紧密耦合你的服务和客户端组件。本章还将通过对一些框架的简单介绍，向你讲述了如何从头开始使用Ajax，这些框架可以使用很多语言，例如：Java、.NET、PHP、Perl、Ruby、Python等等。 PHP语言可能是当今web应用程序中，使用最普遍的编程语言之一，我们的Ajax应用程序服务端组件，就将使用这种语言。考虑到你可能了解Python、其他人又可能了解Ruby、还有一些人则了解.NET或者Java，但是更多的人了解PHP。如果你不了解PHP，PHP也比其他语言更容易上手。况且，据我所知的所有web主机，都提供了对PHP的支持。 本书约定 本书使用如下印刷约定： 斜体（Italic） 表示新术语、URL、文件名、以及文件扩展名。 等宽字体（Constant width） 表示广义上的计算机代码。包括命令、选项、分支、变量、属性、键、请求、函数、类型、类、命名空间、模块、特性、参数、值、对象、事件、事件处理器、XML标签、宏、文件内容、以及命令的输出结果。 等宽粗体（Constant width bold） 显示用户需要原样照抄的命令或其他文本。 等宽斜体（Constant width italic） 显示需要用户自行替换，或者根据上下文才可以决定的文本。 该图标表示一个技巧、建议或者一般备注。 该图标表示警告或者注意。 本书所提及的网站或者网页，目的是为了帮助读者找到有用的在线信息。我们一般同时给出了网页的地址（URL）和名字（title，heading）。一些地址相对比较复杂，但是你可以借助你所喜欢的搜索引擎，轻松地找到这些页面，比如，你可以在搜索引擎中输入页面的名字（一般把名字放到引号中）。如果根据地址找不到这个页面，使用这种方式可能会更好些，因为它可能被移到其他的某个地方，而使用名字可能是找到它们的唯一办法。 使用代码实例 本书的目的是为了帮助你完成你的工作。通常，你可能会在你的程序和文档中使用本书中的代码。除非你要在你的产品中使用这些代码的重要部分，否则，你不需要联系我们来获得许可。例如：写程序使用了本书中的几段代码不需要许可。出售或者发布O'Reilly书中的实例CD-ROM，则需要获得许可。通过引用本书，及其实例代码回答问题不需要获得许可。在你的产品文档中，收录本书中的大量实例代码需要获得许可。 我们感激您保留归属信息，但不是必需的。归属信息通常包括：标题、作者、出版社、以及ISBN。例如：“Adding Ajax by Shelley Powers. Copyright 2007 Shelley Powers, 978-0-596-52936-9.” 如果您感觉您对实例代码的使用，超出了正当使用，或者上面给出的许可，请随时通过下面的Email来和我们取得联系： permissions@oreilly.com 我们愿意听到您的声音 有关本书的建议和问题请致电出版社： O'Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 （美国或加拿大） 707-829-0515 （国际或地区） 707-829-0104 （传真） 本书的网页列举了本书的勘误表、实例以及附加信息。网址为： http://www.oreilly.com/catalog/9780596529369 有关本书的建议或技术问题，请发email至： bookquestions@oreilly.com 如果需要关于我们的书籍、学术会议、资源中心以及O'Reilly Network的更多信息，请访问我们的网站： http://www.oreilly.com Safari®Enabled 当你在你所喜欢的技术书籍的封面上，看到Safari®Enabled图标时，这就意味着，你可以从O'Reilly Network Safari书架上找到它的在线版本。 Safari提供了比电子书更好的解决方案。它是一个虚拟的图书馆，它允许你轻松地搜索上千种顶级的技术书籍、剪切和粘贴实例代码、下载书籍中的章节，并且在你需要最准确、最前沿的信息时，它可以帮助你迅速找到答案。你可以在如下网址上免费尝试： http://safari.oreilly.com 致谢 像这类书不可能是一个人的创造力和劳动的结果－它来自于许多人的共同努力，包括那些概念的定义者、问题的解决者以及本书中一些库的建立者。 我要感谢的是本书中涉及到的所有库的建立者，感谢他们自愿，并且无偿地提供了这些库。尽管这些库的大部分开发者，没有因为他们的劳动而赚取任何费用，但他们还是提供了优美的网站、文档、bug修复以及新版本的发布，所有的这些内容都可以任你下载，并且可以在我们的任何应用程序中使用。 我还要感谢公共领域照片网站（Public Domain Photos：http://pdphoto.org/About.php）的建立者Jon Sullivan，是他给了我所有可以免费使用的照片，包括在第2章的应用程序中所使用的“appletini”２。 我要感谢为了这本书和我一起工作的人，包括我的审阅者：Elaine Nelson、Dare Obasanjo、Roger Johansson、Jesse Skinner、Roy Owens、Anthony Holder III、 Anne Zalenka和Kathy Sierra。我还要感谢我的编辑，Simon St.Laurent。这是我为O'Reilly独自创作的第三本书，了解我的人都非常钦佩Simon St.Laurent的耐心。 我还要感谢帮助我整理这本书的人，包括Lucie Haskins、Reba Libby、Laurel Ruma和Amy Thomson。 这本书会是一本非常好的书，因为我得到了所有的支持。  关于本书的勘误、请访问http://blog.csdn.net/bvbook

无封面