开始之前

这份教程针对的是对于开发富 Web 应用程序感兴趣的人，富 Web 应用程序把异步 JavaScript 和 XML（Ajax）与 PHP 结合起来，用户每次点击时，不必刷新整个页面，就可以动态更新内容。这份教程假设读者了解基本的 PHP 概念，包括 if 和 switch 语句以及函数的使用。

关于本教程

在本教程中，将学习 Ajax 以及围绕它的应用的问题。将用 PHP 构建一个 Ajax 应用程序，显示以前写的一个教程中的面板。点击面板链接只会重新载入内容区，并用选定面板的内容替换它，从而节约了带宽和页面装入的时间。然后将把简单 Ajax 工具包（Sajax）集成进 Ajax 应用程序，它可以同步 Ajax 的使用，从而简化开发。

概述

在深入之前，先看看 Ajax、示例 PHP 应用程序和 Sajax。 Ajax

Ajax 允许 Web 开发人员创建交互的 Web 页面，同时避免必须等候页面载入这一瓶颈。通过 Ajax 创建的应用程序，只需点击按钮，就可以用全新的内容替换 Web 页面某一区域的内容。它的精彩之处在于不必等候页面装入，只有这一个区域的内容需要载入。以 Google Maps 为例：可以点击和四处移动地图，却不必等候页面载入。

Ajax 的问题

在使用 Ajax 时有些事需要注意。像其他 Web 页面一样，Ajax 页面是可以加书签的，所以在使用 GET 与 POST 进行请求时就会造成问题。国际化和编码方案数量的增加，使得把这些编码方案标准化变得日益重要。在这份教程中将了解这些重要的问题。

示例 PHP 应用程序

首先要用 Ajax 创建一个应用程序，然后用 Sajax 创建，以展现使用这个工具包的好处。应用程序是以前编写的教程中的一部分，带有面板链接。它被用作示例，以展示使用 Ajax 的优势。因为在各个面板上点击时，它们会异步装入，而不必等候页面剩下的部分再次装入。这个示例应用程序还会展示如何创建自己的 Ajax 应用程序。

Sajax

如果想创建 Ajax 应用程序，又不想受 Ajax 复杂的细节所累。答案就是 Sajax。通过使用 ModernMethod 人员开发的库，Sajax 为 Web 开发人员抽象出了 Ajax 的高层细节。在底层，Sajax 的工作与 Ajax 相同。但是，通过使用 Sajax 库提供的高层函数，可以忽略 Ajax 的技术细节。

什么是 Ajax？

这一节是个入门介绍，用示例解释 Ajax 的概念，包括在点击链接时发生了什么，Ajax 用于 PHP 应用程序时需要的 HTML 和 JavaScript 代码。下一节将更深入一些，实际地使用在这一节学习的 Ajax 概念创建 PHP 应用程序。

幕后内容

Ajax 是异步 JavaScript 和 XML 的组合。之所以说异步，是因为可以点击页面上的链接，然后它只装入与点击对应的内容，同时保持标题或其他任何设定的信息不动。

点击链接时，在背后工作的是 JavaScript 函数。JavaScript 创建与 Web 浏览器通信的对象，并告诉浏览器装入特定页面。然后可以像平常一样浏览同一页面上的其他内容，当浏览器完全装入新页面的时候，浏览器会在 HTML 的 div 标记指定的位置显示内容。

CSS 样式代码用来和 span 标记一起创建链接。

CSS 样式代码

示例应用程序需要 CSS 代码，这样 span 标记看起来就像使用常规的锚标记（＜a href=… ＞）创建的真正链接一样，也会像真正的链接一样被点击。

清单 1. 指定 span 标记的显示信息

这些 span 标记用在示例应用程序中，颜色符合所有 IBM developerWorks 教程中链接使用的颜色。样式标记的第一行指定已经访问过的链接的颜色保持不变。鼠标经过时加下划线，光标变成指针，就像普通的锚标记（＜a href… ＞）一样。现在来看看如何创建使用这个 CSS 样式代码的链接。

创建使用 span 标记的链接

在“构建 PHP 应用程序”一节中要创建的链接，将用来通过 JavaScript 与浏览器通信，告诉浏览器要去什么地方，要提取什么内容。它们不是使用锚标记的传统链接，而是使用 span 标记创建的。span 标记的观感由清单 1 的 CSS 代码决定。这里是示例：

onclick 处理程序指定这个 span 被点击时要运行哪个脚本。还有其他几个与 onclick 类似的指示符可以使用，包括 onmouseover 和 ondblclick。请注意在 onclick 字段中显示的是 JavaScript 函数 loadHTML ，而不是传统的 http:// 链接或由清单 panels-ajax.php? 创建的相对链接。接下来学习 loadHTML 函数。

XMLHttpRequest 对象

如果正在使用 Mozilla、Opera 或其他这类浏览器中的一个，那么可以使用内置的 XMLHttpRequest 对象动态地取得内容。Microsoft 的 Internet Explorer 浏览器采用另外一个对象，稍后将会学到。它们使用的方式实际上相同，而且对它们提供支持，只是添加几行额外代码的问题。

XMLHttpRequest 对象用来通过 JavaScript 检索页面内容。稍后在示例应用程序中会使用这个代码，同 ActiveXObject 的 loadHTML 函数一起使用。请参阅清单 2 了解用法。

清单 2. 初始化和使用 XMLHttpRequest 对象

在清单 2 中作为参数传递的 destination 变量指出 XMLHttpRequest 对象要去装入内容的地方，由 ＜div id=”content”＞＜/div＞ 标记指定。然后代码会检查 XMLHttpRequest 对象是否存在，如果存在，就创建一个新的。然后，事件处理程序被设置为 processStateChange 函数，这个函数是对象在每次状态变化时都会调用的函数。请求剩下的部分就是用 open 方法进行设置，设置传输类型为 GET，并设置对象要装入的 URL。最后调用对象的 send 方法，让对象实际发挥作用。
ActiveXObject

在 Internet Explorer 中，用 ActiveXObject 代替 XMLHttpRequest。它的函数与 XMLHttpRequest 的函数相同，甚至函数名都是一样的，如清单 3 所示。

清单 3. 初始化和使用 ActiveXObject

在这种情况下（使用 Internet Explorer），实例化一个 Microsoft.XMLHTTP 类型 的新 ActiveXObject 对象。然后，设置事件处理程序，调用对象的 open 函数。然后调用对象的 send 函数，这样 ActiveXObject 就工作了。

processStateChange 函数

这里描述的函数叫作事件处理程序或回调函数。回调函数的目的是当对象状态发生变化时，能够处理状态变化。在具体的应用中，这个函数的目的应当是处理状态变化、检验对象是否到达预期状态、读取动态装入的内容。

processStateChange 函数由 XMLHttpRequest 或 ActiveXObject 对象在对象状态发生变化时调用。当对象进入状态 4 时，表明页面的内容已经接收完成（请参阅清单 4）。

清单 4. 处理状态变化

当 XML HTTP 对象到达状态 4 时，内容就已经就绪，可以提取并在浏览器的预期位置上显示。位置是 contentDiv，内容从文档中检索。如果请求是正确的，而且也按正确的顺序检索，那么响应的状态应当是 200。HTML 响应保存在 request.responseText 中，把它设置到 contentDiv.innerHTML，就可以在浏览器中显示它。

如果在传输过程中没有发生错误，一切正常，那么新内容就会在浏览器中出现；否则，request.status 就不等于 200。请参阅清单 5 了解错误处理代码。

清单 5. 错误处理

清单 5 会把有关传输错误的信息发送给浏览器。在示例应用程序中将把这个函数用作回调函数。接下来，学习 GET 和 POST 的问题和它们的差异。

GET 与 POST

GET 和 POST 是进行 HTTP 请求和在请求中传递变量的两种方法。开发人员不应当随意选择使用哪种方法，因为两种方法都有使用意义。GET 请求把变量嵌在 URL 中，这意味着它们是可以加书签的。如果变量可能会修改数据库、购买商品或者做其他类似操作，这种方法会有副作用。假设偶然间加了书签的页面有一个购买商品的 URL ，里面包含地址、信用卡号以及 $100 的产品，全都嵌在 URL 中，那么重新访问这个 URL 就意味着购买这件商品。

所以，只有在变量没有副作用，可以经常重新载入也不会发生什么的时候，才可以进行 GET 请求。适合 GET 请求的一个变量可能是分类 ID。可以反复重新载入，分类会反复显示，但是没有任何累积的效果。

在另一方面，当变量对源（例如数据库）有作用时或者为了个人信息安全，应当采用 POST 请求。比如在购买一件 $100 的产品时，应当用 POST 请求。如果给付款页面加了书签，由于 URL 中没有变量，所以什么也不会发生，也不会意外地购买了不想购买的东西，或者在已经拥有的情况下又买了一次。

GET 和 POST 的意义在 Ajax 中有同样的作用。在构建本文的应用程序和未来的应用程序时，理解 GET 和 POST 请求的差异是很重要的。这会有助于避免 Web 应用程序开发的常见缺陷。

编码方法

对于通过 HTTP 传输的数据进行编码，有多种方法，而 XML 只接受其中少数几种。互操作性最大的一种编码方法是 UTF-8，因为它向后兼容美国信息交换标准码（ASCII）。有许多在其他国家使用的国际字符的编码方式不向后兼容 ASCII ，如果不进行恰当的编码，就不适合放在 XML 文件中。

例如，把字符串 ”Internationalization” 放在浏览器中，用 UTF-8 编码的话，会把它变成 I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n。经典 ASCII 字符的 UTF-8 编码与相同字符的 7 位 ASCII 码对应，这使 UTF-8 是一个理想的编码方法选择。

了解这一点是很重要的，因为在通过 HTTP 传输和接收文档的过程中都要处理编码问题，在使用 Ajax 时也是一样。使用 Ajax 进行传输时，也应当使用 UTF-8 编码，因为标准化可以提高互操作性。

借助于CSS，你可以容易地为你的现有站点定制搜索框，并且使你以后的任何重新设计都变得非常容易。

首先要讨论的CSS类是ajaxWebSearchBox（该类实现搜索框）。因为搜索框要确定位置，所以它必须要有一个绝对位置：

在此，绝对位置是唯一的要求。所有的其它属性都是根据你的口味可选的。在这个示例中，该框有一个微蓝色的背景，一个500像素的宽度，以及在四边上各有1个像素的填充。这个填充导致围绕该框的内容的是1个像素宽的边界。

下一个类是ajaxWebSearchHeading，它包含该框的头部文本和关闭链接。为了把关闭链接放在右上角，它使用绝对位置。因为这个原因，它要求ajaxWebSearchHeading使用一个相对位置：

在此，唯一要求的属性也是position属性。其它的属性有助于给出该元素一个好看的外观。其背景颜色是浅蓝色，而文本部分是白色，14像素高且是Tahoma字体。该元素的高度是21个像素并且在顶部和左边都填充以边界。

如前面所述，该关闭链接的位置是绝对的：

该元素被放置在距右边5个像素，距顶部3个像素的位置（该元素被放在右上角）。这个链接没有任何文本修饰并且颜色呈白色。当用户的鼠标停在该链接上时，文本颜色变红。

注意，这里没有使用访问过的或活动的”假”类。这是因为该窗口总是忽略这个链接的href属性(它已经在它的事件处理器中返回了false)。因此，该链接从来不会真正处于活动或被访问状态。

然后，ajaxWebSearchResults类使结果栏的风格如下：

这个元素不要求使用CSS属性。现有属性仅用于定义结果栏并且使它比较容易读取。背景颜色是一个浅蓝色并且围绕边缘有5个像素的填充。当然，你能够定制加载消息的风格：

这个元素没有一个类名，但是你仍然能够通过使用前面的示例中展示的parent child标志控制它的风格。这个示例把文本放置在＜div/＞元素的中央，并且给它一个加粗蓝色的字体，且有14个像素高。

最后一个你需要风格化的元素是结果链接。这些链接有一个类名叫ajaxWebSearchLink：

唯一要求的属性是display属性（被设置为block）。这使每一个链接都能够在它自己的行上显示。填充空白部分大约有两个像素宽，使各个链接之间 分开一些，从而使它们更易于读取。字体名为Tahoma并且有12像素高。它们的颜色是暗蓝色，与ajaxWebSearchResults的浅蓝色背景 形成对照。

当用户在这些链接上移动鼠标时，背景颜色被设置为蓝色，而文本颜色改变为白色。

在前面的代码的最后一条规则中访问过的”假”类被设置。这是为了给用户提供用户接口暗示-它们已经被使用过。通过把访问过的”假”类设置为显示一种紫色，用户就可以知道它们已经访问过那个链接，从而节省他们的时间-不必再访问一个他们可能不想看的页面。

现在，让我们来看一下如何实现搜索框。

九、 实现Web搜索搜索框

实现这个搜索框是很简单的。首先，你必须把websearch.php文件上传到你的web服务器(当然，必须安装PHP)。然后，你需要一个HTML 文档来引用所有的组件。msnWebSearch对象依赖于XParser类，这个类又依赖于zXml库(可从 www.nczonline.net/downloads/下载)。你必须引用下面这些文件：

为了执行搜索，应该把msnWebSearch.search()方法设置为该元素的onclick处理器：

第一个新的链接执行一个针对准确词组”Professional Ajax”的搜索，而第二个链接将搜索这其中的各个单词。还要注意，在onclick事件中返回的是false-这强迫浏览器忽略掉href属性。点击这 些链接将在光标位置绘制搜索框，并且就在此处显示你的搜索结果。

populateResults()方法负责使用搜索结果填充结果栏。它接受两个参数：包含该结果的元 素和一个XParser对象(XParser是一个基于Javascript的RSS读取器，可从 www.wdonline.com/javascript/xparser/自由下载):

这个方法以编程方式并通过DOM方法生成＜a/＞元素；这样以来，这些元素将被添加到一个在第一行创建的文档片断中。下一行删除添加在drawResultBox()中的正加载的＜div/＞元素。

下一步是创建这个链接：

这段代码遍历回馈的各个项，并且由该数据生成链接并把＜a/＞元素添加到文档片断最后。

当退出循环时，该文档片断被添加到divResultsPane以显示搜索结果:

六、 关闭结果框

为了关闭搜索结果框，msnWebSearch对象提供了close()方法。close()方法负责处理该链接的onclick事件（关闭该小框）：

该搜索框其实并没有关闭；事实上，它被从该文档中删除了。为此，需要检索divSearchBox元素。第一行代码完成这一任务-通过检索这个元素的父 结点的父结点实现。因为close()负责处理onclick事件，所以this引用这一链接。下一行从文档中删除divSearchBox元素。最后一 行，返回false，从而强迫浏览器不要沿用一个链接的缺省行为（转到在href属性中标注的位置）。

七、 构建搜索接口

msnWebSearch对象的最后一个方法是search()，它提供执行一个搜索的接口。你可以使用一个元素的onclick事件来调用search()。它接受两个方法：一个事件对象和搜索术语：

第一行调用drawResultBox()方法并且把事件e传递给它。下一行编码该URL以实现合适的转换。这个URL被传递给XParser构造器以 创建一个新的分析器。当搜索回馈完成加载并使用结果填充搜索框时，该分析器的onload事件处理器调用populateResult()方法。
当然，构建这个搜索框的一个理由是，使其更适合于你自己的站点的外观。

Web世界中一项广为使用的功能就是搜索。随着Web技术的日益发展，为了更好地满足客户的需求，常规搜索 引擎开始对更多的非常规方式”敞开了大门”。在这方面，Yahoo!率先提供出其Y!Q服务。这个新的服务能够使你搜索任何web页面，前提是该页面的作 者必须包括在他们的web页面中。是服务技术实现了把相关的搜索结果呈现到读者眼前，从而向读者展示更多的信息而不必离开他们的当前页面。

Yahoo!的Y!Q服务的确是一个伟大的想法，但是它的出现也受到了一些批评。原因何在？首先，它要求客户端必须使用Yahoo!的 Javascript并且你必须添加一个＜form/＞元素，以便满足Yahoo!的搜索要求。对于许多网站作者来说，提供该服务要求付出太多的努力。并 且，在所有这些条件满足之后，搜索结果将以Yahoo!风格展现，从而破坏了用户网站的外观感觉。

幸运的是，Yahoo!并非唯一的 提供”从你的网站提供搜索结果”服务的搜索引擎。MSN Search也提供一种类似服务，除了它能够使web开发者控制外观感觉以外。这种能力来自于MSN Search提供它的搜索结果的RSS版本，从而使得订阅一个特定的搜索或使用Ajax方法把该结果添加到你的页面成为可能。

尽管Google已经率先实现了这种新的”从你的站点进行搜索”技术；但是，在本文成文之时，与Google相关的Google BlogSearch Beta也已经能够以RSS或者Atom格式提供返回的结果。

二、 服务器端组件

使用MSN Search执行搜索时，你会看到一个桔黄色的XML图像出现在结果页面的底部。点击这个图像将会把你带到一个新的页面，并提供给你订阅该搜索的URL。

这样以来，你就可以编写服务器端代码以检索远程馈送。对于本文中的搜索窗，你将使用PHP检索搜索馈送。来自于服务器应用程序请求信息的URL看起来如下所示：

查询字符串只有一个变量：”search”；因此，应用程序应该查找此查询项。在服务器端，你需要创建一个页面来”拉动”这个数据：

前两行设置要求的头部以便浏览器能够正确处理数据(XML形式，并且没有对结果予以缓冲)。下一行代码使用isset()函数来决定是否搜索键存在于查询字符串中。

为了把一个合适的请求发送到远程主机，搜索术语应该通过许多函数的”过滤”。首先，它被传递给stripslashes()函数。如果在PHP配置中启 动了”magic quotes”(缺省情况下是支持的)，那么，到达PHP引擎的任何引号都会被使用一个斜杠（如，\”search query\”）自动地脱掉。该stripslashes()函数负责删除这些符号，仅留下”search query”。在删除斜杠后，转到urlencode()函数，由这个函数负责编码字符以用于查询字符串。空格、引号、”&”等符号都被编码。

注意 如果搜索术语不能通过这些函数的”过滤”，那么，MSN服务器将返回一个代码400-”Bad Request”。

当为转换搜索术语准备好后，它被包括到URL中并存储于$url变量中。最后，file_get_contents()函数负责打开远程文件，读取其内容并以一个字符串形式把它返回到$xml变量中，然后使用echo命令把它打印到页面中。

三、 客户端组件

本文中的搜索窗口（Widget）的客户端代码基于一个静态对象msnWebSearch创建-它被定义为一个没有任何属性(现在)的对象：

这个对象用于一个HTMLElement的onclick事件中执行搜索：

这个msnWebSearch对象提供若干取得搜索结果的方法，并负责绘制和放置包含这些数据的HTML。第一个方法是drawResultBox()，它负责绘制HTML。这个方法形成的HTML如下所示：

该结果框分为两部分：一个头部和一个结果栏(见图1)。头部告诉用户这个新的搜索窗包含来自一个MSN搜索的结果。它还包含一个”X”用于关闭该小窗口。其结果栏包含块风格的链接，当点击这些链接时将打一个新的窗口。

图1.结果框分为两部分：一个头部和一个结果栏