通过本教程可以学习如何使用 jQuery 这个轻量的 JavaScript 框架来向 PHP 页面添加 Asynchronous JavaScript + XML (Ajax) 功能。
大多数 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 元素进行完全更改，一切都在客户机内进行，而无需庸俗地遍历一切符号并在那里进行更改。
#p#
创立一个简略的应用程序:一个电话本
有了 jQuery 的基本常识之后，咱们就能够开端用 PHP 和 MySQL 构建一个简略的电话本应用程序了。这个应用程序包括三个部分:
◆一个 MySQL 表，用来保存人名和电话号码
◆具有查找表单的 index.php 文件
◆用来查询数据库表的 find.php 页面
咱们将顺次构建这些元素。
创立数据库表
在 MySQL 内创立数据库表或许是最简略的部分。咱们期望此应用程序是一个包括有最少数信息的表 — 比方，一个 ID（表的键）、一个姓姓名段以及一个电话号码字段。最终这两个字段可所以字母数字，所以将运用 varchar() 函数。咱们将创立 ID 字段作为一个 autoincrement primary key。将此表称为目录 并运用如下的 Structured Query Language (SQL) 代码来创立它:
清单 2. 运用 SQL 创立目录表
|
CREATE TABLE `directory` ( `id` INT NOT NULL AUTO_INCREMENT , `name` VARCHAR( 64 ) NOT NULL , `phone` VARCHAR( 16 ) NOT NULL , PRIMARY KEY ( `id` ) ) TYPE = MYISAM ; |
正如您所见，这儿没有什么杂乱的。实践上，之后您将有许多时机自己更新这个应用程序。扩展此应用程序的一种办法是增加一个要害字或地址字段，而二者均能让您进一步精粹查找。不过，现在，咱们仍是先从简略的开端吧。
创立了该表之后，需求填充它。能够运用 phpMyAdmin 或指令行来输入一个姓名和电话号码。也能够运用如下的 SQL 指令集:
清单 3. 运用 SQL 填充此表
|
insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111'); insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112'); insert into `directory` (name,phone) values ('John Smith', '512-555-0113'); insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114'); insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115'); |
输入了这些值之后，假定从指令行的目录操作运转一个 select * 或单击 phpMyAdmin 内的 Browse ，请保证能够取得一个记载列表。
创立 index.php 文件
接下来，为应用程序创立一个简略的主页。此页面是一个 PHP 文件，称为 index.php，但此时它包括最多的仍是 HTML 代码。当完结了 find.php 文件后（下一步），咱们还会回来来完结这一代码块。
此时，所需做的便是创立一个包括表单的骨架 HTML 文件。表单内的每个元素均包括一个专一的 ID，由于咱们想要能够运用 jQuery 标识每一块。
清单 4. 包括表单的 HTML 文件
|
﹤html﹥ ﹤head﹥ ﹤title﹥Welcome!﹤/title﹥ ﹤/head﹥ ﹤body﹥ ﹤h1﹥Search our Phone Directory﹤/h1﹥ ﹤form id="searchform" method="post"﹥ ﹤div﹥ ﹤label for="search_term"﹥Search name/phone﹤/label﹥ ﹤input type="text" name="search_term" id="search_term" /﹥ ﹤input type="submit" value="search" id="search_button" /﹥ ﹤/div﹥ ﹤/form﹥ ﹤div id="search_results"﹥﹤/div﹥ ﹤/body﹥ ﹤/html﹥ |
上述代码中有两点应该会当即引起您的留意。其一，没有动作与此表单相关联。这不要紧：请记住，此表单将不会遵从传统的 “单击、等候、检查” 的同步形式。相反，咱们将会增加能够监督 search_term 字段内的用户动作的功用。
应该留意到的第二点是 search_results DOM 元素 — 表单下面的空白元素。这个 DOM 元素将会包括从查找中取得的一切呼应。在对此进行深入研究之前，让咱们先来创立 find.php 页面。
#p#
创立 find.php 文件
find.php 文件是一切操作产生的当地。在此文件内，应用程序衔接到数据库并针对此目录表运转查询。
find.php 文件的榜首部分包括衔接信息。出于本文的意图考虑，我将该信息嵌入到了此文件。关于大多数开发人员而言，此信息将会处于一个顺便的或必需的文件内，或是作为一个更大的结构的一部分。
清单 5. 创立 find.php 文件
|
﹤?php define(HOST, "your.host.here"); define(USER, "your-user-name"); define(PW, "your-password"); define(DB, "your-db-name"); $connect = mysql_connect(HOST,USER,PW) or die('Could not connect to mysql server.' ); mysql_select_db(DB, $connect) or die('Could not select database.'); |
接下来，将会从此 index.php 文件内的表单取得一个查找词。对该查找词进行一些简略处理，然后将该值刺进到数据库内。我挑选运用 strip_tags() 和 substr() 函数来删去查找词内的一切 HTML 符号并对之进行简化。进行这类预处理不失为一个好的做法 — 不能百分之百信任用户的输入。
实践上，当具有了一个明晰的查找词后，就能够经过 mysql_escape_string() 运转它，这可进一步消除或许会损坏数据库的其他圈套（比方，单引号）。
$term = strip_tags(substr($_POST['search_term'],0, 100));
$term = mysql_escape_string($term);
现在，构建 SQL 句子。咱们期望从此目录表能够检索到匹配查找词的一切姓名和电话号码。运用 LIKE 让查找词能匹配姓名和电话这两个字段，然后运用 mysql_query() 运转此查询。
清单 6. 构建 SQL 句子
|
$sql = "select name,phone from directory where name like '%$term%' or phone like '%$term%' order by name asc"; $result = mysql_query($sql); |
运转了此查询后，能够打印成果。初始化一个 $string 变量来保存成果，然后运用 mysql_num_rows() 检查是否得到了任何成果。假定没有取得针对此查找词的成果，能够将 $string 设置为等于 “No matches!”。假定确实取得了成果，可打印成果集内的每个姓名和电话号码。在进程的结尾，运用 echo 指令打印整个字符串：
清单 7. 运用 echo 指令打印字符串
|
$string = ''; if (mysql_num_rows($result) ﹥ 0){ while($row = mysql_fetch_object($result)){ $string .= "﹤b﹥".$row-﹥name."﹤/b﹥ - "; $string .= $row-﹥phone."﹤/a﹥"; $string .= "﹤br/﹥\n"; } }else{ $string = "No matches!"; } echo $string; ?﹥ |
当然，这个 PHP 功用自身就非常有用，可是现在，这一点没有杰出体现出来。需求能够为此脚本供给一个查找词。鄙人一节，咱们将完结这一意图。
向 index.php 增加 jQuery
至此，咱们得到的是一对一般的 PHP 页面和一个简略的 MySQL 表。当增加了 jQuery 后，这个一般的应用程序就会变成一个新颖的、受 Ajax 驱动的应用程序，它将更相似于 Mac OS X 上的 Spotlight 或 Google Desktop Search 这样的桌面查找应用程序。
现在，翻开 index.php 文件并保证增加了对最新下载的 jQuery.js 文件的调用。
﹤script src="./jquery.js"﹥﹤/script﹥
接下来，创立一个简略的函数来阻挠查找表单体现得像典型的表单那样。（运用 preventDefault() 函数完结此意图）。将一切 Submit 按钮和 key-up 作业（即在经过键盘键入字符时产生的作业）从头指向到一个即将创立的新函数，称为 Ajax_search()。
清单 8. 创立函数以阻挠查找表单体现得像典型的表单那样
|
﹤script type='text/javascript'﹥ $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); |
您留意到咱们是怎么运用 slideUp() 函数来暂时躲藏 search_results DOM 元素的吗？以及又是怎么运用 $() 函数来按姓名引证该 DOM 元素？假定您非常了解 CSS，那么 jQuery 办法就非常直观和天然了。比方，假定有一个具有专一 ID search_results 的 DOM 元素，您就能够运用 $("#search_results") 来引证它。就这么简略。
别的还留意到，任何时候，任何人单击了 Search 或在 search_term 字段键入一个字符，一个匿名函数都会阻挠默许行为的产生并会将 应用程序流程从头指向到 ajax_search() 函数，该函数咱们接下来将会构建。
ajax_search() 函数非常简略。咱们想要显现 DOM 元素 search_results（之前现已将其躲藏）、取得 search_term 输入字段的值、将该值传递给一个异步运转 find.php 文件的函数（$.post()），然后等候呼应。当呼应到来后（还记得么，咱们现已保证了该 find.php 将会回来某种呼应，即便在没有匹配的情况下也是如此），jQuery 用该呼应填充 search_results DOM 元素。
清单 9. ajax_search() 函数
|
function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length﹥0){ $("#search_results").html(data); } }) } ﹤/script﹥ |
一切体系都安排妥当后，就能够键入一个恳求并检查此查找引擎的实践作业情况了，每个 key-up 作业都会处理记载。它在单击 Submit 时也能作业。比方，在图 1 中，假定在查找字段内键入字母 a，应用程序就会回来 Jane 和 Sara Smith 这两条记载，由于这两个姓名中都包括此字母。
图 1. 运转中的受 Ajax 驱动的查找
结束语
当然，针对此应用程序还有许多作业可做。比方，能够增加一个要害字字段，然后答应按要害字查找。或许，能够让每个人的记载包括针对其所拿手的不同范畴的符号或要害字。尔后，假定您在项目中遇到问题，就能够经过资源查找来找到能够帮助您的人。此外，还能够增加一个电子邮件字段、一个生日字段 — 无论什么都能够 — 然后扩展查找参数。
要害的一点是此应用程序的 jQuery 部分并不关怀在后端产生的作业。它所知道的便是将一个查找词传递给一个称为 find.php 的文件。find.php 文件并不知道也不关怀它从一个 jQuery 函数接纳指令。它所重视的是只需查找词来自于一个正常的表单提交进程，它就运用该数据来完结查询，然后回来匹配该查找词的那些记载。
【修改引荐】
- 运用 jQuery 简化 Ajax 开发
- 跟ASP.NET MVC一同运用jQuery
