Ajax 和 XML: 用于表格的 Ajax-文章

2008 年 4 月 02 日 Asynchronous JavaScript™ + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好，无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。常用的缩写词 DHTML：动态 HTML HTML：超文本标记语言 XSLT：可扩展样式表语言转换在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。选项卡式窗口选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易，如清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用，请参阅参考资料。清单 1. index.html Tab 1 | Tab 2 | Tab 3

在该文件的顶部，我包含了 Prototype.js 库，它处理所有 Ajax 工作。然后，您会看到一个到各个页面的链接列表，每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个

，其 ID 为 content。loadTab 函数调用 Ajax.Updater 来用指定的 HTML 文件更新内容

。清单 2 显示第一个选项卡 HTML 文件。所有其他文件都类似于该文件。清单 2. tab1.html Tab 1 当我在自己的浏览器中浏览该文件时，我看到类似图 1 的某些内容。图 1. 初始选项卡页然后，当我单击第二个选项卡时，我会看到如图 2 所示的内容。图 2. 单击第二个选项卡之后选项卡式窗口的现场演示要在真实的环境中查看选项卡式窗口示例，请观看此在线演示。您可以通过对内容使用隐藏的

标签，然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此，如果用户选择不查看内容，则构建内容的计算时间将会减少或消除。下面的三个示例是使用 Ajax 技巧（或类似于 Ajax 的某种技术)处理表格的所有方法。回页首使用 Ajax 的基本表格我的第一个使用 Ajax 构建表格的演示是，通过 Ajax 向服务器发送 XML 请求，此技巧的价值是双重的。首先，它根据需要加载数据，并且可以适当地更新，这使得用户体验非常愉快。其次，该技巧需要一个 XML 数据源，该数据源不仅对 Ajax 代码有用，它对于希望通过 XML 使用您的数据的任何客户端都非常有价值。清单 3 显示了 XML 驱动的表格示例代码。清单 3. index.html

使用 Ajax 的基本表格的现场演示要在真实环境中查看基本表格示例，请观看此在线演示。 Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素，分解 XML 数据。然后，它从嵌入的标签中获取 author、 title 和 publisher 值。最后，它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中。清单 4 显示了本示例的 XML 代码。清单 4. books.xml Jack Herrington O'Reilly Jack Herrington O'Reilly Jack Herrington O'Reilly 图 3 显示了生成的 DHTML 文件。图 3. XML 驱动的表格页本示例非常适合于小型结果集，但对于较大的结果集会怎样呢？回页首使用 Ajax 的分页表格为了使用 Ajax 创建分页表格，我介绍一种稍有不同的技巧。这并不是因为我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧，您可以从中选择适合您的应用程序需求的技巧。在本例中，我使用一个 PHP 数据源，该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以清单 5 开始。清单 5. index.html

1 | 2 | 3 | 4 | 5 | 6

大多数页面都位于指向表格的各种页面的链接中。然后，states

标签收到来自 stats.php 页面的表格内容。为了运行多页面的示例，我需要一个较大的数据集，因此我找到了一些美国人口统计信息并创建了一个 PHP 函数 getdata，该函数返回一个数组，其中包含这些年来各个州及其人口。清单 6 显示了该函数的一段摘录。清单 6. data.php 现在，为了获得数据的各个部分，我创建了一个 stats.php 页面，该页面提供了一个开始和结束索引，返回一个只包含该部分数据的 HTML 表格。清单 7 显示了该文件。清单 7. stats.php

当我在自己的浏览器中浏览该页面时，如图 4 所示，它将自动加载第一个页面。图 4. 分页表格显示当我单击表格的各个部分时，stats.php 中的表格会动态地加载。图 5 显示了当我单击数据的第二页时发生的情况。图 5. 分页表格显示的第二页使用 Ajax 的分页表格的现场演示要在真实环境中查看页面表格示例，请观看此在线演示。该技巧类似于我对选项卡所使用的技巧。通过 Ajax 传递 HTML 通常与 XML 一样有效。并且更容易在浏览器上实现，因为 XML 不需要被解析并再次转换回 HTML。我演示的第三种表格构建技巧是动态构建表格的最容易的非 Ajax 方法。回页首隐藏的分页表格清单 8 中的页面显示了在没有 Ajax 作为后端的情况下创建分页表格的一种简单技巧。清单 8. index.php

0 ) { ?>

在本例中，我使用 PHP 代码创建了一系列

标记 — 一个标记用于表格中的一个页面。默认情况下显示第一个标记，而隐藏其他标记。updateTable 函数根据选择的页面显示或隐藏表格的各个部分。隐藏的分页表格的现场演示要在真实环境中查看隐藏的分页表格示例，请观看此在线演示。注意，我仍然包含了 Prototype.js 库 — 并非因为 Ajax 支持。我只是希望使用以下方法更容易获得每个

元素：$() 方法以及 show 和 hide 方法，所有这些方法都能够由这个库来实现。图 6 显示了这个页面。图 6. 模拟页面表格显示最后一个 Ajax 示例显示了一个滑动块控件。滑动块是一种新的显示形式，当显示的页面发生变化时，它会提供动态的左/右运动。回页首滑动块为了启用滑动块效果，我需要另外几个库。第一个库是 Scriptaculous 库，该库构建在 Prototype.js 之上。它提供滑动块使用的效果。第二个库是 Glider 库。清单 9 显示了一个滑动块示例。清单 9. index.html

Tab 1 | Tab 2 | Tab 3 | Tab 4

Tab 1

Tab 2

Tab 3

Tab 4

滑动块效果的现场演示要在真实环境中查看滑动块示例，请观看此在线演示。在该文件的顶部包含了各种脚本库。然后还有滑动块

，它包含一个名为 controls 的

和一个名为 scroller 的

，前者具有指向每个选项卡的锚标签，而后者包含每个选项卡的内容。底部的脚本创建一个 Glider 对象，该对象具有滑动块

元素的 ID。当我在自己的浏览器中打开此页面时，我看到类似于图 7 所示的内容。图 7. 使用滑动块实现的选项卡示例当我单击另一个选项卡时，内容便逐字地向其滑动。回页首结束语分享这篇文章…… 提交到 Digg 发布到 del.icio.us Slashdot 一下! 在本文中，我介绍了一些不同类型的界面元素，它们可以使用 Ajax、PHP 和 Prototype.js 库构建。希望您能够采纳其中的一些建议，并将其用于您自己的 Web 应用程序。它们非常容易，并且 Prototype.js 库确实使 Ajax 更加灵活。如果您愿意分享您的成功经历，请加入 developerWorks Ajax 论坛：我们非常愿意倾听您的建议。参考资料学习您可以参阅本文在 develperWorks 全球网站上的英文原文。 PHP 主页：为 PHP 程序员提供了宝贵的资源。 Prototype 库：了解这个用于简化动态 Web 应用程序开发的 JavaScript Framework。 Scriptaculous JavaScript 库：查找一些显示帮助器和特效，使用这个基于 Prototype 的框架改善您的 Web 站点。 Prototype.js 文档页：访问官方 Prototype blog 和其他很多资源的链接，获得关于 Prototype JavaScript 库的更多信息。 jQuery：探索另一个 JavaScript 库，它提供了与 Prototype.js 类似的功能。 Yahoo! User Interface Library：查看 Yahoo! 的 Ajax 工具箱。滑动块控件：在选项卡样式的交互操作上添加新特性。 IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。 XML 技术库：developerWorks XML 专区，获取大量技术文章和技巧、教程、标准和 IBM 红皮书。 developerWorks 技术事件和网络广播：随时关注这些领域的技术进展。 The 技术书店：浏览有关这些以及其他技术主题的书籍。获得产品和技术 IBM 试用版软件：使用可直接从 developerWorks 下载的试用版软件构建您的下一个开发项目。讨论参与论坛讨论。 XML 专区讨论论坛：参与任何与 XML 有关的讨论。 developerWorks XML 专区：分享您的观点：阅读本文后在这个论坛上发表您的评论和想法。XML 专区编辑主持该论坛，欢迎您的参加。 developerWorks blogs：访问这些 blog 并加入 developerWorks 社区。 Ajax 讨论论坛：参与由 Jack Herrington 主持的 Ajax 论坛。关于作者 Jack D. Herrington 是一位有着超过 20 年经验的高级软件工程师。他是 Code Generation in Action、Podcasting Hacks 和 PHP Hacks 这三本书的作者。他还发表了 30 多篇文章。可以通过 jherr@pobox.com 与 Jack 联系。

本文引用地址：http://www.open-soft.net.cn/article/2008/0405/article_2.html