掌握 Ajax

lastwinner

文档链接： http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/

lastwinner

第 4 部分: 利用 DOM 进行 Web 响应
将 HTML 转换为对象模型
级别: 初级
Brett McLaughlin, 作者和编辑, O'Reilly Media Inc.
2006 年 4 月 10 日
程序员（使用后端应用程序）和 Web 程序员（编写 HTML、CSS 和 JavaScript）之间的分水岭是长久存在的。但是，Document Object Model (DOM) 弥补了这个裂缝，使得在后端使用 XML 同时在前端使用 HTML 切实可行，并成为极其有效的工具。在本文中，Brett McLaughlin 介绍了 Document Object Model，解释它在 Web 页面中的应用，并开始挖掘其在 JavaScript 中的用途。

lastwinner

与许多 Web 程序员一样，您可能使用过 HTML。HTML 是程序员开始与 Web 页面打交道的方式；HTML 通常是他们完成应用程序或站点前的最后一步——调整一些布局、颜色或样式。不过，虽然经常使用 HTML，但对于 HTML 转到浏览器呈现在屏幕上时到底发生了什么，人们普遍存在误解。在我分析您认为可能发生的事情及其可能错误的原因之前，我希望您对设计和服务 Web 页面时涉及的过程一清二楚：

• 一些人（通常是您！）在文本编辑器或 IDE 中创建 HTML。
• 然后您将 HTML 上载到 Web 服务器，例如 Apache HTTPD，并将其公开在 Internet 或 intranet 上。
• 用户用 Firefox 或 SafariA 等浏览器请求您的 Web 页面。
• 用户的浏览器向您的服务器请求 HTML。
• 浏览器将从服务器接收到的页面以图形和文本方式呈现；用户看到并激活 Web 页面。

这看起来非常基础，但事情很快会变得有趣起来。事实上，步骤 4 和步骤 5 之间发生的巨大数量的 “填充物（stuff）” 就是本文的焦点。术语 “填充物” 也十分适用，因为多数程序员从来没有真正考虑过当用户浏览器请求显示标记时到底在标记身上发生了什么。

• 是否浏览器只是读取 HTML 中的文本并将其显示？
• CSS 呢？尤其是当 CSS 位于外部文件时。
• JavaScript 呢？它也通常位于外部文件中。
• 浏览器如何处理这些项，如果将事件处理程序、函数和样式映射到该文本标记？

实践证明，所有这些问题的答案都是 Document Object Model。因此，废话少说，直接研究 DOM。

lastwinner

Web 程序员和标记
对于多数程序员，当 Web 浏览器开始时他们的工作就结束了。也就是说，将一个 HTML 文件放入 Web 浏览器的目录上后，您通常就认为它已经“完成”，而且（满怀希望地）认为再也不会考虑它！说到编写干净、组织良好的页面时，这也是一个伟大的目标；希望您的标记跨浏览器、用各种版本的 CSS 和 JavaScript 显示它应该显示的内容，一点错都没有。
问题是这种方法限制了程序员对浏览器中真正发生的事情的理解。更重要的是，它限制了您用客户端 JavaScript 动态更新、更改和重构 Web 页面的能力。摆脱这种限制，让您的 Web 站点拥有更大的交互性和创造性。

lastwinner

程序员做什么

作为典型的 Web 程序员，您可能启动文本编辑和 IDE 后就开始输入 HTML、CSS 甚至 JavaScript。很容易认为这些标记、选择器和属性只是使站点正确显示而做的小小的任务。但是，在这一点上您需要拓展您的思路，要意识到您是在组织您的内容。不要担心；我保证这不会变成关于标记美观、您必须如何认识到 Web 页面的真正潜力或其他任何元物质的讲座。您需要了解的是您在 Web 开发中到底是什么角色。

说到页面的外观，顶多您只能提提建议。您提供 CSS 样式表时，用户可以覆盖您的样式选择。您提供字体大小时，用户浏览器可以为视障者更改这些大小，或者在大显示器（具有同等大的分辨率）上按比例缩小。甚至您选择的颜色和字体也受制于用户显示器和用户在其系统上安装的字体。虽然尽您所能来设计页面样式很不错，但这绝不是 您对 Web 页面的最大影响。

您绝对控制的是 Web 页面的结构。您的标记不可更改，用户就不能乱弄；他们的浏览器只能从您的 Web 服务器检索标记并显示它（虽然样式更符合用户的品味而不是您自己的品味）。但页面组织，不管是在该段落内还是在其他分区，都只由您单独决定。要是想实际更改您的页面（这是大多数 Ajax 应用程序所关注的），您操作的是页面的结构。尽管很容易更改一段文本的颜色，但在现有页面上添加文本或整个区段要难得多。不管用户如何设计该区段的样式，都是由您控制页面本身的组织。

lastwinner

标记做什么

一旦意识到您的标记是真正与组织相关的，您就会对它另眼相看了。不会认为 h1 导致文本是大字号、黑色、粗体的，而会认为 h1 是标题。用户如何看待这个问题以及他们是使用您的 CSS、他们自己的 CSS 还是这两者的组合，这是次要的考虑事项。相反，要意识到只有标记才能提供这种级别的组织；p 指明文本在段落内，img 表示图像，div 将页面分成区段，等等。

还应该清楚，样式和行为（事件处理程序和 JavaScript）是在事后 应用于该组织的。标记就绪以后才能对其进行操作或设计样式。所以，正如您可以将 CSS 保存在 HTML 的外部文件中一样，标记的组织与其样式、格式和行为是分离的。虽然您肯定可以用 JavaScript 更改元素或文本的样式，但实际更改您的标记所布置的组织却更加有趣。

只要牢记您的标记只为您的页面提供组织、框架，您就能立于不败之地。再前进一小步，您就会明白浏览器是如何接受所有的文本组织并将其转变为超级有趣的一些东西的，即一组对象，其中每个对象都可被更改、添加或删除。

lastwinner

————————————————————————————————
关于标记的其他想法
纯文本编辑：是对是错？
纯文本是存储标记的理想选择，但是不适合编辑 标记。大行其道的是使用 IDE，比如 Macromedia DreamWeaver 或更强势点的 Microsoft® FrontPage®，来操作 Web 页面标记。这些环境通常提供快捷方式和帮助来创建 Web 页面，尤其是在使用 CSS 和 JavaScript 时，二者都来自实际页面标记以外的文件。许多人仍偏爱好用古老的记事本或 vi（我承认我也是其中一员），这并不要紧。不管怎样，最终结果都是充满标记的文本文件。
网络上的文本：好东西
已经说过，文本是文档的最好媒体，比如 HTML 或 CSS，在网络上被千百次地传输。当我说浏览器表示文本很难时，是特指将文本转换为用户查看的可视图形页面。这与浏览器实际上如何从 Web 浏览器检索页面没有关系；在这种情况下，文本仍然是最佳选择。
————————————————————————————————

lastwinner

文本标记的优点
在讨论 Web 浏览器之前，值得考虑一下为什么纯文本绝对 是存储 HTML 的最佳选择（有关详细信息，请参阅 有关标记的一些其他想法）。不考虑优缺点，只是回忆一下在每次查看页面时 HTML 是通过网络发送到 Web 浏览器的（为了简洁，不考虑高速缓存等）。真是再没有比传递文本再有效的方法了。二进制对象、页面图形表示、重新组织的标记块等等，所有这一切都比纯文本文件通过网络传递要更困难。
此外，浏览器也为此增光添彩。今天的浏览器允许用户更改文本大小、按比例伸缩图像、下载页面的 CSS 或 JavaScript（大多数情况），甚至更多，这完全排除了将任何类型的页面图形表示发送到浏览器上。但是，浏览器需要原 HTML，这样它才能在浏览器中对页面应用任何处理，而不是信任浏览器去处理该任务。同样地，将 CSS 从 JavaScript 分离和将 CSS 从 HTML 标记分离要求一种容易分离的格式。文本文件又一次成为该任务的最好方法。
最后但同样重要的一点是，记住，新标准（比如 HTML 4.01 与 XHTML 1.0 和 1.1）承诺将内容（页面中的数据）与表示和样式（通常由 CSS 应用）分离。如果程序员要将 HTML 与 CSS 分离，然后强制浏览器检索粘结页面各部分的一些页面表示，这会失去这些标准的多数优点。保持这些部分到达浏览器时都一直分离使得浏览器在从服务器获取 HTML 时有了前所未有的灵活性。

lastwinner

进一步了解 Web 浏览器

对于一些 Web 程序员来说，在前文阅读到的所有内容可能是对您在 Web 开发过程中角色的滑稽讲述。但说到浏览器的行为，许多最能干的 Web 设计人员和开发人员通常都没有意识到 “内幕” 的实际状况。我将在本节重点进行讲述。不要担心，代码很快就到，但是要克制您编码的急躁心情，因为真正了解 Web 浏览器的确切行为对于您的代码正确工作是非常关键的。

lastwinner

文本标记的缺点
正如文本标记对于设计人员和页面创建者具有惊人的优点之外，它对于浏览器也具有相当出奇的缺点。具体来说，浏览器很难直接将文本标记可视地表示给用户（详细信息请参阅 有关标记的一些其他想法）。考虑下列常见的浏览器任务：

• 基于元素类型、类、ID 及其在 HTML 文档中的位置，将 CSS 样式（通常来自外部文件中的多个样式表）应用于标记。
• 基于 JavaScript 代码（通常位于外部文件）将样式和格式应用于 HTML 文档的不同部分。
• 基于 JavaScript 代码更改表单字段的值。
• 基于 JavaScript 代码，支持可视效果，比如图像翻转和图像交换。

复杂性并不在于编码这些任务；其中每件事都是相当容易的。复杂性来自实际实现请求动作的浏览器。如果标记存储为文本，比如，想要在 center-text 类的 p 元素中输入文本 (text-align: center)，如何实现呢？

• 将内联样式添加到文本吗？
• 将样式应用到浏览器中的 HTML 文本，并只保持内容居中或不居中？
• 应用无样式的 HTML，然后事后应用格式？

这些非常困难的问题是如今很少有人编写浏览器的原因。（编写浏览器的人应该接受最由衷的感谢）
无疑，纯文本不是存储浏览器 HTML 的好办法，尽管文本是获取页面标记最好的解决方案。如果加上 JavaScript 更改 页面结构的能力，事情就变得有些微妙了。浏览器应该将修改过的结构重新写入磁盘吗？如何才能保持文档的最新版本呢？
无疑，文本不是答案。它难以修改，为其应用样式和行为很困难，与今天 Web 页面的动态本质在根本上相去甚远。