使用jQuery和PHP构建一个受Ajax驱动的Web页面(1)

大多数 PHP 开发人员都是以老式的方法学习技能。他们一般先学习如何定义和构建简单的 PHP 页面，然后再了解如何将这些页面连接到简单的 MySQL 表，于是就可以由此进行自己的开发了。随着技能水平的提高，他们还逐渐学会了如何创建更为复杂的 PHP 功能，以及如何连接 MySQL 内的表并执行其他高级任务。

在这个过程中，他们有可能还会掌握一些客户端技能来将 Web 应用程序投入使用。也有可能学会有关 XHTML 或 CSS 甚至一些 JavaScript 编程的知识。随着所参与项目的种类的增多，他们甚至有机会接触到 Ajax 以便为您的 Web 应用程序赋予 Web 2.0 或 “桌面” 的感觉。不过，如果您初次使用 Ajax 的经验与我类似的话，您可能已经做了太多的工作 — 手动实现各种函数、经历创建一个受 Ajax 驱动页面的艰难过程。

对于某些人而言，Ajax 仍是个谜。它似乎是 Web 开发/交互社区中的 “酷小孩（cool kid）” 和 “坏小孩（bad boys）” 才会做的事情，而他们则没有时间和耐心或者能力去了解并使用它。这真是个遗憾，因为很多客户的确喜欢添加 Ajax 风格的功能 — 它让 Web 应用程序更容易使用。如果您是这些 PHP 开发人员中的一员，也请不要害怕：读完本文，您所掌握的知识足以让您成为一名真正的 Ajax 专业人士。

本文展示了如何使用 jQuery 来向 PHP Web 应用程序轻松添加 Ajax 功能。我们将使用 PHP 和 MySQL 构建一个简单的 Web 应用程序 — 一个包含名字和电话号码的电话本。这个应用程序具备预期的所有标准功能 — 比如可以查找名字或电话号码、具有 MySQL 表等。接下来，还将向应用程序添加 jQuery，以便能够在键入时实时查找名字和电话号码。在完成上述任务后，您也就具备了有关 jQuery 及 Ajax 的充足的基础知识。

何为 Ajax？

描述 Ajax 的最佳方法是将其与传统方式进行对比。大多数 Web 页面和应用程序都在同步模式下工作。单击一个链接或表单的提交 按钮后，请求就被发送给服务器，而此服务器之后会处理该请求并发送回一个响应。总结此模型的最好方法是 “单击、等候、查看”。这就是您所熟知的一个永不终止的漂洗-和-重复（rinse-and-repeat）的循环过程。换言之，如果页面需要经常显示被更新的信息，那么就必须放上某类自动刷新 hack，或者是让用户刷新或单击一个链接执行刷新。

Ajax 改变了这一切。Ajax 中的第一个字母 A 代表的是 异步。Ajax 允许以任何一种编程语言创建页面，然后用来自数据库或其他后端服务器过程的信息刷新该页面的不同部分。比如，假如说您有一个电子商务站点，上面显示了所销售的产品。在每个产品页面，都有几个常见项目：标题、销售说明、缩略图图片、库存数量。

假如，您想让网站的访问者能够获得库存数量的最新信息。您就可以添加一个 Ajax 函数，该函数能运行包含 MySQL 查询的一个单独的 PHP 页面，然后就可重新填充原始页面上的信息，无需用户输入，也不必考虑事件的单击-等待-查看模式的同步性。

Ajax 中的 j 代表的是 JavaScript，它是所有行为的驱动力。这既是好事也是坏事 — 好的一面是由于是客户端代码，所以它是可移植的，而且不会影响到服务器；对 PHP 开发人员而言不好的一面是它完全不同于他们所习惯使用的那个环境。这就需要像 jQuery 这样的工具和框架来大大简化您与 Ajax 交互的方式，加快代码完成的进度。

最后的两项：+ 和 x 又代表什么呢？它们代表的是 及 XML，不过，XML 部分并不确切。大量 Ajax 应用程序在没有任何 XML 代码时仍工作得很好：它们只来回传递 HTML，甚至是纯文本。更准确的说法是让 x 代表 XMLHttpRequest，因为可使用该对象在后台检索数据，而不会干扰现有页面的显示或行为。

何为 jQuery？

jQuery 是 John Resig 创建的一种轻量的 JavaScript 库，在 2006 年早期发布于 Internet。它是免费的开源软件，具有 Massachusetts Institute of Technology (MIT) 和 GNU General Public License 的双重许可。由于它简单直观，因此赢得了开发界很多人的拥护。

那么它为何如此流行呢？因为它提供了一种简单易用的库，简化了 JavaScript，因此任何人（没错，甚至一个彻彻底底的后端程序员）无需艰苦的工作就能创建非凡的效果。您可以进行 Document Object Model (DOM) 元素选择、修改和处理 CSS、使元素更加吸引人以及处理 Ajax。所有这些功能性的实现都来自于一个 JavaScript 文件，该文件可从 jQuery 站点下载（参见 参考资料）。

下载 jQuery 之后，通过包括进一个简单的 ﹤script﹥ 标记就可以将其添加到任何的 HTML 或 PHP 文件:

﹤script type="text/javascript" src="/path/to/jquery.js"﹥﹤/script﹥

假设，您有一个非常简单却很烦人的任务要完成 — 需要很多手动操作，比如在您站点上的每个表单标签末尾添加一个冒号（:）。您可以遍历并寻找每个表单标签并在每行的末尾添加一个冒号，您也可以部署如下的 jQuery 代码:

清单 1. 使用 jQuery 添加一个冒号

﹤script type="text/javascript"﹥

$(document).ready(function(){

$("label").append(":");

});

﹤/script﹥

此函数很简单：它将一直等待，直到页面准备好并全部加载（$(document).ready() 部分）完毕，这时将运行一个匿名函数，该函数寻找所有 DOM label 元素，然后向所找到的文本的末尾追加一个冒号。$() 函数的功能是允许以其本地名字访问 DOM 元素，这就让此接口成为了已经熟悉 DOM 的那些开发人员的最佳选择。

当然，用 jQuery 还能做很多其他的事情，这只是一个好的开端。借助一个简单的内置函数，jQuery 可以确保您的代码能够工作，因为它会等待页面加载。有了另一行代码，就能对代码所找到的所有 DOM label 元素进行彻底更改，所有都在客户机内进行，而无需乏味地遍历所有标记并在那里进行更改。

1