使用 PHP 和 DHTML 设计 Web 2.0 应用程序，第 2 部分: 使用 JavaScript 创建 HTML 动态元素

来源：百度文库编辑：神马文学网时间：2024/04/20 00:10:36

文档选项

将此页作为电子邮件发送

最新推荐

Java 应用开发源动力－下载免费软件，快速启动开发
级别: 中级
Jack Herrington (jack_d_herrington@codegeneration.net), 高级软件工程师, "Code Generation Network"
2006 年 9 月 07 日
“使用 PHP 和 DHTML 设计 Web 2.0 应用程序” 系列文章的第 1 部分探讨了如何使用 JavaScript、层叠样式表（CSS）和 HTML 构建带有选项卡、微调控制项、弹出框等用户界面元素的 PHP 应用程序。第 2 部分将扩展上一篇文章的内容，将图形技术包含在内，使用 JavaScript 动态创建新的 HTML 元素。
第 1 部分介绍了移动、隐藏和显示 Web 页面内容的方法。但如何动态创建新的 HTML 元素呢？该如何图形化数据及使用类似的有趣技术呢？图 1 展示了全世界文盲率的图表（数据来自 Unesco，请参阅参考资料）。

这并非最有趣的数据集，但振奋人心。那么如果只想查看欧洲的文盲率呢？非常简单：单击下拉菜单，选择 Europe 即可。

图表显示出，欧洲的文盲率远远低于全球水平。清单 1 给出了产生此动态图表的代码。
Bar Graph Example Region:

Rates of illiteracy (larger is worse):

首先给出了一个 ID 为 "graph" 的空

。标记的 onload 属性告诉浏览器在载入页面时调用 plot 函数。这段代码有趣的地方就在于 plot 函数。
此函数首先创建了一个空字符串。接下来，它通过在字符串中添加、和

标记构建图表。此函数随后将 graph

标记的 innerHTML 属性设置为新生成的 HTML。
图形本身是一个表，有四列：年份、小分隔符、条形图及另外一个分隔符。条形符列的各行中是另外一个表。这些嵌套表有两个单元格：第一个单元格为蓝色，第二个单元格为白色。蓝色单元格的宽度为文盲率，白色单元格的宽度为 100% 减文盲率。结果得到简单的 HTML 条形图，没有任何图像。
Region 下拉菜单有一个 onchange 处理程序，只要选中新项目，此处理程序就会被调用。此时，以当前选中的值调用 plot 方法，图形即被更新。
此代码的兼容性非常好。所使用的 innerHTML 可用 createElement 和 appendChild 等 DOM 方法取代，可兼容所有现代浏览器。
在 PHP 中实现条形图时，本文着眼于如何从服务器的 PHP 代码中获取数据并将其置入 Dynamic HTML（DHTML）JavaScript 中。条形图的 PHP 代码如清单 2 所示。
Bar Graph Example Region:

Rates of illiteracy (larger is worse):

在文件顶端，为 years 和 countries 数组预先加载年份、国家列表及其扫盲值。随后，PHP 需要生成 DHTML 代码的三个区域。第一个填充 JavaScript 中的 years 数组，第二个填充 rates，第三个以国家名设置

本例的大部分代码都位于 JavaScript 函数 drawgraph 中。该函数创建两个数字数组 —— 一个存储 x 值，另外一个存储 y 值。x 轴的数字范围为 0 到 1，y 轴的数字是通过将各 x 值代入等式计算得出的。
数据通过等式生成，但代码为各轴设置了最小值和最大值，并按此自动调整数据。
将图像置入图形需要用到一种新技术：我们使用 document.createElement 来构建一个标记，随后使用 appendChild 将新创建的 img 对象添加到图形对象中。这项技术要优于使用字符串设置 innerHTML，因为代码更易于阅读和维护 —— 而且您不必担心字符串编码问题。
使用 createElement 的技术符合 World Wide Web Consortium（W3C）Document Object Model（DOM）规范，也是动态创建 HTML 元素的首选方法。

回页首
散点图示例自成体系。PHP 代码将散点图打包为组件。该组件的代码如清单 4 所示。

此代码定义了两个函数：graph_header 和 graph_place。graph_header 函数应在文档的开头部分调用，graph_place 则应在您需要加入图形的地方调用。清单 5 展示了更新的图形页面代码。
Dynamic Graphing Example Equation:

这比原始页面要简单得多。首先将组件代码包含进来。随后调用 graph_header 来添加 JavaScript 和 CSS。最后在希望将图形放置在页面上的地方调用了 graph_place 函数。

回页首
JavaScript 代码的强大与简单非常吸引人。但问题很快发生了变化，不再是插入的代码有多么少，而是革新的路能走多远。Google Maps（参见参考资料）是 DHTML 应用程序的典范，它证明了 DHTML 应用程序不仅在站点上有用，而且可集成到任何 Web 页面上 —— 只需编写一些简单的 JavaScript。但 Google 并没有就此止步：它又创建了 Gmail（参见参考资料），将 DHTML 的应用扩展到创建易于使用的邮件客户端 —— 就在浏览器中。（或许您的 JavaScript 无法成就至此，但如果您确实投入时间去努力，也会欣喜地发现能取得怎样的成果。）
每一名 DHTML 程序员都应该钻研的一项技术就是 Asynchronous JavaScript and XML（Ajax）。Ajax 为浏览器带来了后台处理 Web 请求的能力。这意味着，您的 DHTML 应用程序可回调到 PHP 应用程序，而不需刷新页面。随后页面可使用那些数据刷新所显示的信息 —— 完全不会使浏览页面的用户感觉不快。（关于 Ajax 文章与教程的相关信息，请参见参考资料部分。）

回页首
“使用 PHP 和 DHTML 设计 Web 2.0 应用程序” 系列的上一篇文章从新的时髦词 Web 2.0 展开讨论。而业界的另一重要时髦词就是富客户机应用程序。两者同样意味着极酷的 Web 应用程序，您可以同样的方式看待它们。大量技术日益涌现，目标都是创建功能丰富的 Internet 应用程序。Laszlo 和 MXML 大大简化了 Flash 的构建，Microsoft® 的 Vista 也引入了一些新理念。但就构建功能丰富的 Internet 应用程序而言，DHTML 依然是最有诱惑力的，原因就在于您可以使用 PHP 这样的现有技术来完成这一使命。
本文示范了通过简单的 CSS 和 JavaScript 丰富客户体验的几种方法。您可以在现有 Web 应用程序中实现同样的目标 —— 立即开始一个