掌握 Ajax

lastwinner

凌乱的 HTML
在继续之前，谈到浏览器如何将标记转换为树表示，还有一个主题值得探讨，即浏览器如何处理不是格式良好的标记。格式良好 是 XML 广泛使用的一个术语，有两个基本意思：

• 每个开始标记都有一个与之匹配的结束标记。所以每个 <p> 在文档中与 </p> 匹配，每个 <div> 与 </div> 匹配，等等。
• 最里面的开始标记与最里面的结束标记相匹配，然后次里面的开始标记与次里面的结束标记相匹配，依此类推。所以 <b><i>bold and italics</b></i> 是不合法的，因为最里面的开始标记 <i> 与最里面的结束标记 <b> 匹配不当。要使之格式良好，要么 切换开始标记顺序，要么 切换结束标记顺序。（如果两者都切换，则仍会出现问题）。

深入研究这两条规则。这两条规则不仅简化了文档的组织，还消除了不定性。是否应先应用粗体后应用斜体？或恰恰相反？如果觉得这种顺序和不定性不是大问题，那么请记住，CSS 允许规则覆盖其他规则，所以，例如，如果 b 元素中文本的字体不同于 i 元素中的字体，则格式的应用顺序将变得非常重要。因此，HTML 的格式良好性有着举足轻重的作用。
如果浏览器收到了不是格式良好的文档，它只会尽力而为。得到的树结构在最好情况下将是作者希望的原始页面的近似，最坏情况下将面目全非。如果您曾将页面加载到浏览器中后看到完全出乎意料的结果，您可能在看到浏览器结果时会猜想您的结构应该如何，并沮丧地继续工作。当然，搞定这个问题相当简单：确保文档是格式良好的！如果不清楚如何编写标准化的 HTML，请咨询 参考资料 获得帮助。

lastwinner

DOM 简介
到目前为止，您已经知道浏览器将 Web 页面转换为对象表示，可能您甚至会猜想，对象表示是 DOM 树。DOM 表示 Document Object Model，是一个规范，可从 World Wide Web Consortium (W3C) 获得（您可以参阅 参考资料 中的一些 DOM 相关链接）。
但更重要的是，DOM 定义了对象的类型和属性，从而允许浏览器表示标记。（本系列下一篇文章将专门讲述在 JavaScript 和 Ajax 代码中使用 DOM 的规范。）

lastwinner

文档对象
首先，需要访问对象模型本身。这非常容易；要在运行于 Web 页面上的任何 JavaScript 代码中使用内置 document 变量，可以编写如下代码：
var domTree = document;
当然，该代码本身没什么用，但它演示了每个 Web 浏览器使得 document 对象可用于 JavaScript 代码，并演示了对象表示标记的完整树（图 1）。

lastwinner

每项都是一个节点
显然，document 对象很重要，但这只是开始。在进一步深入之前，需要学习另一个术语：节点。您已经知道标记的每个部分都由一个对象表示，但它不只是一个任意的对象，它是特定类型的对象，一个 DOM 节点。更特定的类型，比如文本、元素和属性，都继承自这个基本的节点类型。所以可以有文本节点、元素节点和属性节点。
如果已经有很多 JavaScript 编程经验，那您可能已经在使用 DOM 代码了。如果到目前为止您一直在跟踪本 Ajax 系列，那么现在您一定 使用 DOM 代码有一段时间了。例如，代码行 var number = document.getElementById("phone".value; 使用 DOM 查找特定元素，然后检索该元素的值（在本例中是一个表单字段）。所以即使您没有意识到这一点，但您每次将 document 键入 JavaScript 代码时都会使用 DOM。
详细解释已经学过的术语，DOM 树是对象的树，但更具体地说，它是节点 对象的树。在 Ajax 应用程序中或任何其他 JavaScript 中，可以使用这些节点产生下列效果，比如移除元素及其内容，突出显示特定文本，或添加新图像元素。因为都发生在客户端（运行在 Web 浏览器中的代码），所以这些效果立即发生，而不与服务器通信。最终结果通常是应用程序感觉起来响应更快，因为当请求转向服务器时以及解释响应时，Web 页面上的内容更改不会出现长时间的停顿。
在多数编程语言中，需要学习每种节点类型的实际对象名称，学习可用的属性，并弄清楚类型和强制转换；但在 JavaScript 中这都不是必需的。您可以只创建一个变量，并为它分配您希望的对象（正如您已经看到的）：
var domTree = document;
var phoneNumberElement = document.getElementById("phone";
var phoneNumber = phoneNumberElement.value;
没有类型，JavaScript 根据需要创建变量并为其分配正确的类型。结果，从 JavaScript 中使用 DOM 变得微不足道（将来有一篇文章会专门讲述与 XML 相关的 DOM，那时将更加巧妙）。

lastwinner

结束语
在这里，我要给您留一点悬念。显然，这并非是对 DOM 完全详尽的说明；事实上，本文不过是 DOM 的简介。DOM 的内容要远远多于我今天介绍的这些！
本系列的下一篇文章将扩展这些观点，并深入探讨如何在 JavaScript 中使用 DOM 来更新 Web 页面、快速更改 HTML 并为您的用户创建更交互的体验。在后面专门讲述在 Ajax 请求中使用 XML 的文章中，我将再次返回来讨论 DOM。所以要熟悉 DOM，它是 Ajax 应用程序的一个主要部分。
此时，深入了解 DOM 将十分简单，比如详细设计如何在 DOM 树中移动、获得元素和文本的值、遍历节点列表，等等，但这可能会让您有这种印象，即 DOM 是关于代码的，而事实上并非如此。
在阅读下一篇文章之前，试着思考一下树结构并用一些您自己的 HTML 实践一下，以查看 Web 浏览器是如何将 HTML 转换为标记的树视图的。此外，思考一下 DOM 树的组织，并用本文介绍的特殊情况实践一下：属性、有元素混合在其中的文本、没有 文本内容的元素（比如 img 元素）。
如果扎实掌握了这些概念，然后学习了 JavaScript 和 DOM 的语法（下一篇文章），则会使得响应更为容易。
而且不要忘了，这里有清单 2 和 3 的答案，其中还包含了示例代码！
图 2. 清单 2 的答案

图 3. 清单 3 的答案

lastwinner

参考资料
学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文。
• 学习介绍 Ajax 的本 developerWorks 系列的前几篇文章：
  
      ·“掌握 Ajax，第 1 部分：Ajax 简介” 第 1 部分演示 Ajax 组件技术如何一起工作，并揭露 Ajax 的 核心概念，其中包括 XMLHttpRequest 对象（2006 年 1 月）。
     ·“掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求” 第 2 部分展示如何以跨浏览器方式创建 XMLHttpRequest 实例、构造和发送请求，以及响应服务器（2006 年 2 月）。
     ·“掌握 Ajax，第 3 部分: Ajax 中的高级请求和响应” 第 3 部分演示了 Ajax 中标准 Web 表单如何执行，并展示了如何掌握对 HTTP 状态代码、就绪态以及 XMLHttpRequest 对象的理解（2006 年 3 月）。
• 万维网联盟上的 DOM 主页：所有 DOM 相关内容的入口。
• DOM Level 3 Core Specification：定义核心 Document Object Model，涵盖了可用类型和属性以及在各种语言中 DOM 的用法。
• ECMAScript language bindings for DOM：如果您是 JavaScript 程序员并想在代码中使用 DOM，Level 3 Document Object Model Core 定义的本附录将投您所好。
• “面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序”：本文从 Java 角度来观察服务器端的 Ajax，介绍了一种用于创建动态 Web 应用程序体验的突破性方法（developerWorks，2005 年 9 月）。
• “面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化”：完整介绍了 Java 对象序列化的五种方法，并讨论了如何通过网络发送对象以及如何与 Ajax 交互（developerWorks，2005 年 10 月）。
• “使用 AJAX 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机”：这篇相当高级的文章深入探讨了将 Ajax 与现有的基于 SOAP 的 Web 服务相集成；展示了如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户机（developerWorks，2005 年 10 月）。
• “Ajax: A New Approach to Web Applications”：本文创造了 Ajax 这个名字，它是所有 Ajax 开发人员的必读之作。
• HTTP 状态代码：从 W3C 查看状态代码的完整清单。
• Head Rush Ajax，作者 Elisabeth Freeman、Eric Freeman 和 Brett McLaughlin（2006 年 2 月，O'Reilly Media, Inc.）：以深入浅出的方式将本文的概念装进您的大脑。
• Java and XML，第二版，作者 Brett McLaughlin（2001 年 8 月，O'Reilly Media, Inc.）：阅读作者对 XHTML 和 XML 转换的讨论。
• JavaScript: The Definitive Guide，作者 David Flanagan（2001 年 11 月，O'Reilly Media, Inc.）：提供使用 JavaScript 和动态 Web 页面的全面说明。未来版本将增加关于 Ajax 的两章。
• Head First HTML with CSS & XHTML，作者 Elizabeth 和 Eric Freeman（2006 年 12 月，O'Reilly Media, Inc.）：细读完整的代码，学习 XHTML、CSS 以及如何结合使用。
• developerWorks Web 体系结构专区：拓展您的 Web 构建能力。
• developerWorks technical events and Webcasts：为技术开发人员提供这些软件的最新简讯。
  

获得产品和技术

• IBM 试用软件：使用可直接从 developerWorks 下载使用的软件构建您的下一个开发项目。
  

讨论

• developerWorks 博客：加入 developerWorks 社区。

回页首
关于作者



Brett McLaughlin 从 Logo 时代就开始使用计算机。（还记得那个小三角吗？）近年来，他已经成为 Java 和 XML 社区最著名的作者和程序员之一。他曾经在 Nextel Communications 实现过复杂的企业系统，在 Lutris Technologies 编写过应用服务器，最近在 O'Reilly Media, Inc. 继续撰写和编辑这方面的图书。Brett 即将出版的新书 Head Rush Ajax，和畅销书作者 Eric 与 Beth Freeman 一起为 Ajax 带来了获奖的革命性 Head First 方法。最近的著作 Java 1.5 Tiger: A Developer's Notebook 是关于 Java 技术最新版本的第一本书，经典的 Java and XML 仍然是在 Java 语言中使用 XML 技术的权威著作。

lastwinner

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

lastwinner

第 5 部分: 操纵 DOM
使用 JavaScript 即时更新 Web 页面

Brett McLaughlin, 作者，编辑, O'Reilly Media Inc.
2006 年 4 月 27 日
上一篇中 Brett 介绍了文档对象模型（DOM），它的元素在幕后定义了 Web 页面。这一期文章中他将进一步探讨 DOM。了解如何创建、删除和修改 DOM 树的各个部分，了解如何实现网页的即时更新！
如果阅读过本系列的 上一篇文章，那么您就非常清楚当 Web 浏览器显示网页时幕后发生的一切了。前面已经提到，当 HTML 或为页面定义的 CSS 发送给 Web 浏览器时，网页被从文本转化成对象模型。无论代码简单或复杂，集中到一个文件还是分散到多个文件，都是如此。然后浏览器直接使用对象模型而不是您提供的文本文件。浏览器使用的模型称为文档对象模型（Document Object Model，DOM）。它连接表示文档中元素、属性和文本的对象。HTML 和 CSS 中所有的样式、值、甚至大部分空格都合并到该对象模型中。给定网页的具体模型称为该页面的 DOM 树。
了解什么是 DOM 树，以及知道它如何表示 HTML 和 CSS 仅仅是控制 Web 页面的第一步。接下来还需要了解如何处理 Web 页面的 DOM 树。比方说，如果向 DOM 树中增加一个元素，这个元素就会立即出现在用户的 Web 浏览器中 —— 不需要重新加载页面。从 DOM 树中删除一些文本，那些文本就会从用户屏幕上消失。可以通过 DOM 修改用户界面或者与用户界面交互，这样就提供了很强的编程能力和灵活性。一旦学会了如何处理 DOM 树，您就向实现丰富的、交互式动态网站迈出了一大步。
注意，下面的讨论以上一篇文章 “利用 DOM 进行 Web 响应” 为基础，如果没有阅读过那一期，请在继续阅读之前首先阅读上一篇文章。

lastwinner

————————————————————————————————————
首字母缩写的拼读问题
从很多方面来说，文档对象模型应该被称为文档节点模型（Document Node Model，DNM）。当然，大多数人不知道节点 一词的含义，而且 “DNM” 也不像 “DOM” 那么容易拼读，所以很容易理解 W3C 为何选择了 DOM。
————————————————————————————————————
跨浏览器、跨语言
文档对象模型是一种 W3C 标准（链接参见 参考资料）。因此，所有现代 Web 浏览器都支持 DOM —— 至少在一定程度上支持。虽然不同的浏览器有一些区别，但如果使用 DOM 核心功能并注意少数特殊情况和例外，DOM 代码就能以同样的方式用于任何浏览器。修改 Opera 网页的代码同样能用于 Apple's Safari&reg;、Firefox&reg;、Microsoft&reg; Internet Explorer&reg; 和 Mozilla&reg;。
DOM 也是一种跨语言 的规范，换句话说，大多数主流编程语言都能使用它。W3C 为 DOM 定义了几种语言绑定。一种语言绑定就是为特定语言定义的让您使用 DOM 的 API。比如，可以使用为 C、Java 和 JavaScript 定义的 DOM 语言绑定。因此可以从这些语言中使用 DOM。还有几种用于其他语言的语言绑定，尽管很多是由 W3C 以外的第三方定义的。
本系列文章主要讨论 JavaScript 的 DOM 绑定。这是因为多数异步应用程序开发都需要编写在 Web 浏览器中运行的 JavaScript 代码。使用 JavaScript 和 DOM 可以即时修改用户界面、响应用户事件和输入等等 —— 使用的完全是标准的 JavaScript。
总之，建议您也尝试一下其他语言中的 DOM 绑定。比如，使用 Java 语言绑定不仅能处理 HTML 还可处理 XML，这些内容将在以后的文章中讨论。因此本文介绍的技术还可用于 HTML 之外的其他语言，客户端 JavaScript 之外的其他环境。

lastwinner

节点的概念

节点是 DOM 中最基本的对象类型。实际上，您将在本文中看到，基本上 DOM 定义的其他所有对象都是节点对象的扩展。但是在深入分析语义之前，必须了解节点所代表的概念，然后再学习节点的具体属性和方法就非常简单了。

在 DOM 树中，基本上一切都是节点。每个元素在最底层上都是 DOM 树中的节点。每个属性都是节点。每段文本都是节点。甚至注释、特殊字符（如版权符号 &copy;）、DOCTYPE 声明（如果 HTML 或者 XHTML 中有的话）全都是节点。因此在讨论这些具体的类型之前必须清楚地把握什么是节点。