使用 PHP 和 DHTML 设计 Web 2.0 应用程序，第 1 部分: 使用这些技术打造有特色的应用

来源：百度文库编辑：神马文学网时间：2024/04/26 06:56:04

文档选项

将此页作为电子邮件发送

最新推荐

Java 应用开发源动力－下载免费软件，快速启动开发
级别: 中级
Jack Herrington (jack_d_herrington@codegeneration.net), 高级软件工程师, "Code Generation Network"
2006 年 9 月 07 日
2006 年最时髦的词莫过于 Web 2.0。Web 2.0 究竟意味着什么，这是一个热门的争论话题，但它似乎与一种很酷的动态 Web 应用程序有关。那些 Web 应用程序 —— 通常以 PHP 开发 —— 使用动态 HTML（DHTML）创建页面，移动及更改此页面时无需返回服务器进行更新。Jack Herrington 在 “使用 PHP 和 DHTML 设计 Web 2.0 应用程序” 系列文章中教您开始使用这项技术。
DHTML 是包含 JavaScript 代码的 HTML，这些代码可更改浏览器中的页面布局，而无需返回服务器。在您编写 HTML 页面时，您实际上是在编写一个对象树。所有标记 —— 小小的和

—— 都成为 JavaScript 空间中的对象。使用 JavaScript，您可以更改其内容、层叠样式表（Cascading Style Sheets，CSS）的式样以及位置 —— 均无需再返回服务器。DHTML 是 HTML、CSS 和 JavaScript 的交集。
自浏览器中添加了 JavaScript 代码后，使用 DHTML 的技术就已出现，但对此技术的支持一直参差不齐。早期，Microsoft® Internet Explorer 在这方面做得非常出色，但同一时期的 Netscape V4 缺乏支持。近来，Mozilla 和 Firefox 渐渐提供了可靠的 DHTML 支持。有些人认为形势已经与过去完全不同，Internet Explorer 现已在这方面落后。
在您的页面中结合 JavaScript 将使页面具有动态性，并且能够带来更出色的用户体验。用户可更快地获得更多数据、从不同角度查看信息、无缝地在站点中导航 —— 而站点不必返回服务器处获得大量页面。
然而，也存在避免使用 JavaScript 的理由：浏览器兼容性。早期仅使用平面 HTML 时，Internet Explorer 呈现页面的方式与 Netscape 不同。那些问题已得到解决。但随着 CSS 支持的添加，出现了新的兼容性问题。如今，多半 CSS 问题已被解决，但又出现了 JavaScript 兼容性问题。
这些兼容性问题没有简单的解决方案。您需要根据需要测试和支持的浏览器的数量来衡量 JavaScript 的收益。
这里我们给出几条建议：
使 JavaScript 尽可能地简单。发现兼容性问题时，首先上网查找最佳解决方法。您往往会找到经过精心研究的答案。拥有一个平面 HTML 代用系统，以应对您不支持的那些浏览器。保留一份支持的浏览器列表（及其版本号）。在 Mac 和 Microsoft Windows® 中查看 Internet Explorer。
本文的示例尽可能保持简单清楚。但仅在 Firefox 上进行了测试，所以会出现一些兼容性问题。本文将在出现兼容性问题的地方提醒您，以便您获得更多的实践经验。
实现 DHTML 最简便的方法就是首先在平面 HTML 页面中编写，不使用 PHP 或任何服务器端语言，随后以该代码作为 PHP 代码模板来生成 DHTML。通过这种方式，您可检查解决方案的基础，并将服务器的问题与客户机的问题区分开来。在本文中，每个示例都首先给出 HTML，随后再给出相应的 PHP 代码。

回页首
第一个示例简单且兼容：浮动广告框。图 1 展示了一个带有 Close 按钮的对话框，浮动于页面之上。

用户可单击 Close 按钮关闭广告框，如图 2 所示。

清单 1 为页面代码。
Ad box demonstration

This is our home page. Welcome to it. Here we talk about all of our great products.

Products

This is a list of our products:

The amazing all in one toothpix holder and axe grinder.
The complete Jean Claude Van Damme DVD collection.

本例的大部分工作是使用 CSS 完成的。使用 position CSS 属性，使广告框浮在页面文本之上。left 和 top 属性根据元素与页面左上角的相对位置定位元素。
为使广告框消失，您为 close 锚定标记编写了一些 JavaScript 代码。这里并未使用 http 协议，而是使用 javascript 协议，并调用了 closead 函数。closead JavaScript 函数获取 ad

的对象引用，并改变 CSS 样式 visibility，从 visible 设置为 hidden，这样广告框就消失了。
本例展示了一些 DHTML 基本原理。首先是 id 属性的用法。为动态引用一个项目，通过 id 属性给予其一个惟一的 ID。在本例中，您为广告框设置的 ID 为 ad。随后使用 document.getElementById 方法获取广告框的

对象。
本例还示范了可在锚定标记中使用的 javascript 伪 URL。使用它，您可以在放置链接的任意位置调用 JavaScript。
这些技术兼容其他浏览器。所有现代浏览器均支持 JavaScript、CSS、绝对定位和在运行时对 visibility 属性这样的动态元素进行设置。

回页首
现在已经有了广告框的 DHTML 代码，接下来让我们看看如何在 PHP 中实现它（参见清单 2）。该广告框的惟一可选项就是显示与否。PHP 代码通过一个函数调用写出了广告框，根据环境决定是否调用页面。
Ad box demonstration

This is our home page. Welcome to it. Here we talk about all of our great products.

Products

This is a list of our products:

The amazing all in one toothpix holder and axe grinder.
The complete Jean Claude Van Damme DVD collection.

全新的 place_ad PHP 函数通过灵活的 title 字符串将广告置于页面之上。为获得在多个页面上发布广告的能力，您可将此函数提取出来，放在一个单独的文件中，这样，每次需要在页面上插入广告时，只需包含此独立文件即可。

回页首
浮动对话框主题的另一变种就是弹出框。您可使用弹出框提供用户请求的附加信息。考虑图 3 所示文本。

如果用户能看到关于长颈鹿的更多信息，岂不是更好吗？文本包含一个便捷的链接，如果您单击此链接，将看到图 4 所示的弹出框。

本例中，您应请求提供了一个对话框，并依据文档中的文本定位此对话框。代码如清单 3 所示。
Pop up Example

Animals

A giraffe is a very interesting animal.
本例中，包含弹出信息的 popup

最初定义为 hidden，绝对位置为页面左上角。随后 giraffe 文字旁的锚定标记将调用 JavaScript 来显示弹出框。
popup JavaScript 方法使用 word ID 查找 giraffe 文本。随后使用 offsetLeft 和 offsetTop 值使弹出框恰好位于文本之下。若弹出框已为可见状态，则隐藏它。
您可在显示弹出框之前设置其内容，只需设置 popup

对象的 innerHTML 成员即可。
此代码的兼容性相当好。但依然可能会出现问题，这是因为每个浏览器的 offsetLeft 和 offsetTop 值可能有所不同，对于带有复杂嵌套内容的页面而言更是如此。为在复杂页面中获得更准确的位置读数，您可能需要递归增加 offsetLeft 和 offsetTop 值，为此，使用 offsetParent 对象在您沿 HTML 对象树移动时获取各对象的父对象。

回页首
有了 DHTML 代码后，即可更轻松地在 PHP 应用程序中使用弹出框。清单 4 给出了 PHP 代码。
Pop up Example

Animals

A is a very interesting animal. ?tml>
在本例中，您将标题的生成与各弹出框的放置相分离。页面必须调用 head 标记中的 popup_header，然后添加 id 值为 popup 的

标记。随后，只要需要弹出框，页面就会调用 PHP 函数 popup。
PHP 函数 popup 接受 3 个参数：弹出框的 ID、纯文本版本以及单击项目时弹出的文本。函数随后会呈现一个锚定标记，其外观几乎与原 DHTML 中的版本完全相同。
由于一个页面上可能会显示多个弹出框，所以添加了第三个参数以提供弹出框中显示的文本。为实现这一功能，为 JavaScript 函数 popup 再添加一个参数。

标记的 innerHTML 随后会设置为这个新参数的内容。

回页首
在页面中隐藏和显示数据的另一选择就是微调控制项（spinner）。在此模型中，页面划分为几部分，各部分可使用微调控制项独立隐藏或显示。图 5 展示了带有两部分微调控制项的页面，各部分最初都是关闭的。

单击 Level One 部分中的 Open 链接将显示此部分的内容，如图 6 所示。

您可以使用图形来取代文字 open 和 closed。按照惯例，通常使用向右的三角形取代 closed，向下的三角形取代 open；也可使用加减号，加号表示 closed，减号表示 open。（对于哪种方式更好的评价涉及到 Mac 与 Windows 对比的争论。这两个平台上的微调控制项正与这两种不同的方式分别对应。）
清单 5 中的代码展示了这些微调控制项的工作原理：
Spinner Example

open Level One

This is the content of level one.

open Level Two

This is the content of level two.

两组

定义了各部分及其内容。按照惯例，为标题赋予 ID lev 加上一个数字（例如，lev2），正文使用相同的 ID 加后缀 _body。lev2 是微调控制项的链接，lev2_body 是该项目的正文。
微调控制项的智能部分是在 spin 函数中实现的，它查看微调控制项正文部分的可见性，并加以转换，将可见转变为隐藏、隐藏转变为可见。
在项目不可见时，将 height 属性设置为 0px，而在项目可见时将此属性设置为 auto。对于 Internet Explorer，项目不可见时，其空间也会随之折叠。但对于 Firefox，内容不可见时，其空间依然作为占位符存在。您需要将 height 设置为 0px，才能使空间正确地折叠起来。
为使用图形取代文本来表示展开和关闭状态，更改代码，改变微调控制项对象的 innerHTML 值，使其指定一个图像标记而非文本。

回页首
为在 PHP 中实现微调控制项，采用服务器端创建 DHTML 代码的标准模式即可，在 start 和 end 函数中划分 HTML 的各部分。PHP 代码如清单 6 所示。

open

Spinner Example This is the content of level one. This is the content of level two.
通过调用 start_spinner 和 end_spinner 划分内容的各部分。start_spinner 函数接受两个参数：微调控制项的 ID 及其标题。end_spinner 调用结束 start_spinner 中打开的

标记，以容纳微调控制项的内容。
您可将微调控制项的内容作为第三个参数引入。但在一般情况下，这些内容部分形式复杂，若您以这种方式编写代码，界面使用起来将非常困难。在 start 和 end 函数中划分动态部分的模式意味着您可以随意选择其中 PHP 的复杂度。

回页首
选项卡是查看内容不同部分的另一种常见方法。在 MetaCritic 站点上可以看到选项卡的轻量级版本（参见参考资料），该站点使用选项卡切换游戏列表的查看方式 —— 按名称查看或按评价分数查看，而且不必返回服务器。图 7 展示了此游戏列表的简化示例。

若要查看按评价分数排列的游戏，单击 By Score 链接。列表会发生变化，如图 8 所示。

MetaCritic 站点没有在客户端进行复杂的排序，而是使用了相当于 flash 卡的一种方式：一个选项卡上的列表按名称排列，另外一个选项卡按分数排列。单击链接时，则隐藏一个选项卡，显示另外一个选项卡。代码如清单 7 所示。
Tabs Example Sort by: By Name By Score

Crank Shaft	22
Driver	42
Football 2006	72
Soccer 2006	99
Xevious	32

Crank Shaft	22
Xevious	32
Driver	42
Football 2006	72
Soccer 2006	99

两个列表分别位于两个

标记中：names 和 score。names

拥有按名称排序的游戏列表，score 拥有按分数排序的列表。show 函数连接到 By Name 和 By Score 链接，首先使所有列表均不可见，随后使所选列表可见。
还有其他一些有趣的东西。首先，您使用 className 属性动态地更改了链接的 CSS 类。这也就是所选按钮从白色变为黑色的原因。
其次，观察 names 和 score 的 CSS。两个

均按绝对位置定位于左上部，但不在页面的左上角。这是因为它们位于 ID 值为 container 的

中，而 container 的位置设置为 relative。container

有效地重置了包含于其中的项目的原点。表格是相对于容器而不是页面来定位的。
这种 DHTML 不但复杂度合理、有趣，而且几乎与所有现代浏览器兼容。

回页首
在 PHP 中开发 DHTML 的另外一种工具就是输出缓存区的使用。输出缓存区存储页面中的文本、选项卡和重复素材，并将其作为字符串返回，供以后使用。为实现选项卡，将使用输出缓存区，在把选项卡内容呈现到页面中之前将其作为字符串存储（参见清单 8）。
$title, ‘html‘ => "" ); } function end_tab() { global $tabs, $current_tab; $tabs[ $current_tab ][ ‘html‘ ] = ob_get_contents(); ob_end_clean(); } function get_tab_ids() { global $tabs; $ids = array(); foreach( $tabs as $tabid => $tab ) { $ids []= "‘".$tabid."‘"; } return $ids; } function get_first_tab() { $tabs = get_tab_ids(); return $tabs[0]; } function place_tab_buttons() { global $tabs; foreach( $tabs as $tabid => $tab ) { ?> $tab ) { ?>

Crank Shaft	22
Driver	42
Football 2006	72
Soccer 2006	99
Xevious	32

Crank Shaft	22
Xevious	32
Driver	42
Football 2006	72
Soccer 2006	99

Tabs Example Sort by:

PHP 代码首先定义了两个变量：tabs 和 current_tab。tabs 数组保存各选项卡的 id、title 和 html 值。current_tab 指向 start_tab 和 end_tab 调用间创建的选项卡。start_tab 函数接受两个参数：选项卡的 id 值和 title 值。它随后会启动输出缓存。
end_tab 函数终止输出缓存，并将作为结果的 HTML 存储在 tabs 数组的 current_tab 的 html 值中。
再往下看，可以看到 start_tab 和 end_tab 调用中包含要在选项卡中呈现的选项卡内容。
将选项卡呈现在页面上的重要函数就是 place_tab_buttons 和 place_tab_content。place_tab_buttons 函数创建有着选项卡名称的锚定标记，单击锚定标记时，将切换选项卡。place_tab_content 函数创建具有输出缓存区存储的各选项卡内容的

标记。
get_tab_ids 和 get_first_tab 是创建 JavaScript 的辅助函数。它们分别返回选项卡 ID 的完整列表和第一个选项卡的 ID。

回页首
“使用 PHP 和 DHTML 设计 Web 2.0 应用程序” 系列的下一篇文章将介绍通过 JavaScript 生成动态图片的内容。下篇文章将教您如何动态创建新的 HTML 元素，并在 PHP 应用程序所显示的页面中定位这些元素。

回页首
学习
您可以参阅本文在 developerWorks 全球站点上的英文原文。
PHP.net 是学习 PHP 所有内容的入门网站。
Ajaxian blog 是一个探索客户端编码技巧的好地方。
Ajax Freaks 是另外一个不错的客户端站点。
WebReference.com 有许多关于浏览器兼容性问题的出色文章和参考资料。
O‘Reilly 的Dynamic HTML: The Definitive Reference 是关于 Dynamic HTML 的最佳图书。
要查看本文讨论的选项卡示例，请访问Metacritic.com。
阅读 developerWorks 的文章 “A cross-browser DHTML table”，学习如何使用 DHTML 和 JavaScript 创建跨浏览器的表格，并且实现 Java 表组件的大多数功能。
阅读 “使用 AJAX 构建应用程序：学习用 AJAX 构建支持实时验证的 Web 应用程序”，在作者的指导下构造一个示例图书订购应用程序，从而掌握如何构建基于 AJAX 的 Web 应用程序，并在不必刷新页面的情况下实现实时校验。
访问 IBM developerWorks 的PHP 项目资源，了解 PHP 的更多信息。
随时关注developerWorks 技术活动和网络广播。
访问 developerWorks开放源码专区，获得广泛的 how-to 信息、工具和项目更新，帮助您使用开放源码技术进行开发，并将其与 IBM 的产品配合使用。
获得产品和技术
使用IBM 试用软件革新您的下一个开放源码开发项目，可通过下载获得，也可通过 DVD 获得。
讨论
通过参与developerWorks blogs 加入 developerWorks 社区。

回页首

Jack D. Herrington 是一名高级软件工程师，有着二十余年的经验。他撰写了三本图书：Code Generation in Action、Podcasting Hacks 和即将出版的 PHP Hacks。他的作品还包括三十多篇文章。

回页首

使用 PHP 和 DHTML 设计 Web 2.0 应用程序，第 1 部分: 使用这些技术打造有特色的应用使用 PHP 和 DHTML 设计 Web 2.0 应用程序，第 2 部分: 使用 JavaScript 创建 HTML 动态元素使用 PHP 和 DHTML 设计 Web 2.0 应用程序，第 2 部分: 使用 JavaScript 创建 HTML 动态元素使用 PHP 和 DHTML 设计 Web 2.0 应用程序使用 HTML 5 创建移动 Web 应用程序，第 2 部分: 使用 HTML 5 开启移动 Web 应用程序的本地存储使用 Rational AppScan 保证 Web 应用的安全性，第 2 部分: 使用 Rational AppScan 应对 Web 应用攻击针对开发人员的WebLogic Server应用管理，第 6 部分使用 JMX 自定义应用程序管理使用 Rational AppScan 保证 Web 应用的安全性，第 1 部分: Web 安全与 Rational AppScan 入门使用开源软件设计、开发和部署协作型 Web 站点，第 2 部分: 设计有效的用户体验使用 Acegi 保护 Java 应用程序，第 1 部分: 架构概览和安全过滤器在 AIX Version 5.3 中使用 Java 和 PHP 技术进行开发，第 1 部...1 在 AIX Version 5.3 中使用 Java 和 PHP 技术进行开发，第 1 部... PHP V5.2 中的新增功能，第 1 部分: 使用新的内存管理器 PHP V5.2 中的新增功能，第 1 部分: 使用新的内存管理器使用开源软件设计、开发和部署协作型 Web 站点，第 10 部分: 外部网 Web 站点的... 使用 Axis2 和 JiBX 将 Java 类转换成 Web 服务，第 1 部分: 使用 XML 通过 Java 类定义 Web 服务使用开源软件设计、开发和部署协作型 Web 站点，第 1 部分: 简介和概述像专业人员一样开发 Ajax 应用程序，第 1 部分: 使用 Prototype Java... 使用 AJAX 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机 PHP V5.2 中的新增功能，第 3 部分: 使用新的 JSON 扩展 PHP V5.2 中的新增功能，第 4 部分: 使用新的 ZIP 扩展 PHP V5.2 中的新增功能，第 4 部分: 使用新的 ZIP 扩展使用开源软件设计、开发和部署协作型 Web 站点，第 5 部分: Drupal 入门使用开源软件设计、开发和部署协作型 Web 站点，第 13 部分: Eclipse 中的 ...