使用 javascript 的强大功能将无缝的数据库交互操作添加到 web 页面……

　　近来一段时间，ajax(异步 javascript 和 xml)风靡 web 开发界。正如 google 的一些特性(suggest、maps、gmail 等)所展示的那样，ajax 可以在无需用户提交表格或单击链接的情况下执行服务器请求。换句话说，web 浏览器可以执行服务器请求并处理响应，无需用户进行任何操作，甚至感觉不到该操作正在发生。使用 ajax 最直接的好处就是非常方便，而且相当酷。

　　在本文中，我将讨论使用 ajax 创建简单的 web 页到 javascript 函数、xmlhttprequest、php 脚本，最后到 oracle 数据库所需要的所有必要代码。对于代码，我将从整体角度讨论各段代码：每段代码的功能及其重要性。通过阅读该方法文档，您不仅可以获得一些示例代码，还希望您更深入地了解整个 ajax 概念。

　　背景

　　我将用到的示例是一个注册表单(或者说是其中的一小部分)。我必须确保 users 表中的电子邮件地址都是唯一的，从而使用户无法用同一地址多次注册。这通常是用户将表单提交给处理 php 脚本后验证过程的一部分。但用户为什么必须等待才能进行验证呢?相反，如果一旦用户输入其电子邮件地址并进入下一表单域，就立即验证该电子邮件地址那该多好呀。为此，我仍需查询该数据库，这就需要用到 ajax 了。

　　本例简化的表结构可以使用以下 sql 语句创建(无需其他表，我已经清除了标识键等内容)。

　　显然，您可以以多种方式对此进行扩展。但目前，重要的是该示例代码假设您已经建立了这样的一个表并能够从 php 脚本连接它。该表必须包含一些记录才能使本示例完好运行，因此您应该按如下方式填充该表：

　　当创建并填充该表之后，就可以开始进行编码了。正如我提到的，这里涉及到两个脚本。要开发和测试所有内容，您需要：

• 　　创建查询 oracle 数据库的 php 脚本。
• 　　手动测试 php 脚本查看其运行情况。
• 　　编写与 php 脚本交互的 javascript 代码。
• 　　将 html 表单联接到 javascript。
• 　　测试整个程序。

　　第 1 步：编写数据库查询

　　整个 php 脚本称为 ajax.php。(参见示例代码 zip。)该脚本的目的是在 oracle 中运行一个查询并基于查询结果打印一条消息。这是非常基本的 oracle、sql 和 php 操作，但我将通过它来阐明正在进行的操作。

　　该脚本需要在该 url 中接收一个电子邮件地址，它保存在变量 $_get['email'] 中。然后该脚本连接到 oracle 数据库。该查询还计算 users 表中有多少记录包含该电子邮件地址：

　　这应该返回 0 或 1(或者什么也不返回)。该查询在 oracle 中执行，其结果绑定到 php $rows 变量。现在 $rows 表示数据库中有多少记录包含该电子邮件地址。对于 ajax，该脚本的重要部分如下所示。

　　将基于 $rows 的值打印这两条消息中的一条。这就是该页面的全部内容了!其中完全不需要 html，因为该脚本不会用作标准的 web 页面。

　　如果您想改进此脚本，可以检验该电子邮件地址是否匹配电子邮件地址的正则表达式模式。如果是这样，正常执行查询;否则，输出一个语句表明它不是有效的电子邮件地址。至少，您可能想防止 sql 注入攻击。(也就是，在没有有效性保证时避免在查询中使用 $_get 变量。)

　　第 2 步：测试 php 脚本

　　由于整个 ajax 程序涉及几种技术(html、javascript、php、sql 和 oracle)，您最好逐步测试每个部分。否则，您可能很难知道问题到底发生在哪里。测试这个 php 脚本应该相当容易：

• 　　确保您已经在 oracle 中创建了该表并填充了它。
• 　　编辑 ajax.php，以便它针对您的 oracle 安装使用有效的连接参数。
• 　　将脚本保存为 ajax.php。
• 　　将其放置在您 web 服务器的适当目录中。
• 　　从您 web 浏览器访问 http://yoururl/ajax.php?email=x。

　　将 x 替换为数据库中的一个现有电子邮件地址(例如，http://yoururl/ajax.php?email=this@that.com)。您应该看到“email address has already been registered!”消息。然后使用一个还未存储的电子邮件地址。您应该看到“email address is available!”。当这些正常运行后，您就可以进入本例的实际 ajax 部分了。

　　第 3 步：编写 javascript

　　该过程的这一部分可能是最难的，除非您已经进行过大量的 javascript 编程。在任何情况中，javascript 代码都是 ajax 过程的核心，因为是它在执行和处理 php 页面的请求。我将详细介绍该代码。

　　javascript 代码将定义三个函数。第一个函数创建一个请求对象变量：

　　您无需任何修改就能将此代码用于任何 ajax 应用程序。如果使用的 web 浏览器是 microsoft internet explorer，则 ro 变量初始化为类型 microsoft.xmlhttp 的 activexobject。对于其他所有浏览器，ro 是直接的 xmlhttprequest 对象类型。这对它来说实在没有其他意义。该 ro 变量现在是一个具有执行异步请求所需所有功能的对象。创建该请求对象变量之后，该函数将返回该变量。

　　当首次加载该页面时，该函数立即由 javascript 代码调用：

　　现在 http 代表该对象，而且在其他函数中全局可用。

　　第二个是调用 php 脚本的函数：

　　该函数接受一个参数(将验证的电子邮件地址)。然后它打开一个到 php 脚本的连接。正如 open() 方法中的第一个参数所示的，该请求的类型将是 get 而非 post。把该电子邮件地址附加到该 url 后，得到一个诸如 ajax.php?email=this@that.com 的页面请求。如您所知，这是 php 脚本的正确调用方式。encodeuricomponent() 函数只是对提交的值进行编码以使它是 url 安全的。该函数的第三行告诉该对象当发出请求后应该调用哪个 javascript 函数。最后一行实际发出请求。

　　再重复一下，第一个函数 createrequestobject() 创建所需的对象变量。第二个函数 sendrequest() 发出 php 脚本的实际请求。现在我们需要一个处理该请求的函数：

　　前一个函数告诉请求对象当发出请求后调用该函数。该函数首先检查请求是否成功发出。如果成功发出，http.readystate 将等于 4。它也可以等于 0 到 3 之间的整数(如果您感兴趣，可以在线搜索其实际含义)，但等于 4 意味着请求成功。该请求的结果将存储在 http.responsetext 属性中，结果是 php 脚本返回的两条消息之一。具体说来，如果该请求成功，则 http.responsetext 将是“email address has already been registered!”或“email address is available!”。

　　此时，javascript 知道 php 脚本的结果是什么。您只需用 javascript 通知用户该结果。一个简单的方法是使用一个 alert() 对话框：

　　如果您将此置于该条件中，当您在测试整个应用程序时将看到该结果。(实际上，alert() 是一个极佳的调试工具，它可以揭示 javascript 代码的实际运行情况。)但是，我发现这些警告对于最终用户来讲有些烦人，我宁愿在该表单的电子邮件输入旁打印该消息。为此，我选用了 dom(文档对象模型)。具体地讲，我将 http.responsetext 指定给页面上一个称为 email_label 的元素。您将在第 4 步中看到这一点。

　　哟!希望您能跟得上。再说一遍，这是本系列最重要、最复杂的一部分。javascript 使用这三个函数进行以下三个操作：定义浏览器特定的请求对象;向 php 脚本发出请求;处理请求结果。如果您对其中的任何函数感到困惑，或者在需要创建更复杂的 ajax 应用程序时，您可能需要研究一下 javascript 和 dom。

　　第 4 步：创建一个具有 javascript 功能的 html 表单

　　正如我前面写到的，本例的前提是一个至少接受一个电子邮件地址的注册表单。最小的表单可能是：

　　就这样!嗯，内容不多。您可能想要更多的输入(一个“submit”按钮，等等)。但就本例而言已经足够了。为了避免混淆，需要注意这里的动作属性和方法属性与 ajax.php 脚本(不处理该表单的提交)毫无关系。

　　此外，还需要两个操作。首先，该表单必须设法调用发出请求的 javascript 代码。为此，可以使用若干技巧：创建一个可点击的链接，等待点击提交按钮，等等。我已经确定，当用户输入一个电子邮件地址并前进到下一表单元素时就调用该 javascript。这需要 onchange() 方法(我将把它添加到电子邮件输入中)：

　　当用户在该输入中更改值时(包括首次输入任何内容，然后切换或点击到另一个输入)，将调用 javascript sendrequest() 函数。它接受一个参数(电子邮件表单输入的值)。如果您回头看看 javascript 代码，可以了解这里键入的值是如何发送给该函数(该函数进而发送给 php 脚本)。

　　另外，该 html 表单还需要一个位置供 javascript“写”接收的消息以便用户能看到。正如 handleresponse() 函数所示的，将把该消息赋给一个称为 email_label 的元素的 innerhtml。为此，在电子邮件地址输入后我对该 id 添加了一个 span 标记：

　　这是为了将 html 表单连接到 javascript。(有关最终代码，请查看示例代码 zip 中的清单 1。)现在我们来看一下它是如何工作的!

　　第 5 步：测试 ajax 程序

　　完成 html 和 javascript 之后，您应该将它保存为 ajax.html(或其他任何实际内容)，然后将其放在与 php 脚本相同的目录中。通过在您的 web 浏览器中运行它来加载表格，注意这是通过 url 来进行的，而非从文件系统打开它(例如，访问 http://yoururl/ajax.html)。在相应的输入中键入未使用过的电子邮件地址，然后切换或点击到下一输入。使用一个存储了的电子邮件地址重复操作。

　　以下两个屏幕快照显示了您应该看到的结果。非常神奇!

　　结论

　　在本文中，您已经看到如何使用 php 和 oracle 轻松实现一个 ajax 程序。这样，服务器端验证将在客户端中实现(但如果禁用了 javascript，您仍需保留服务器端验证)。我认为，这个具体示例为最终用户演示了一个极佳的特性，使他们免于：

• 　　提交表单
• 　　检查电子邮件地址是否已被注册
• 　　返回表单
• 　　重复这个过程

　　此外，我认为该示例和概念总得来说都非常酷。而在 web 上，这是个很重要的因素。

　　当然，您可以通过 ajax、php 和 oracle 进行其他大量工作。本文中的示例只将一段数据发送到 php 脚本，且只检索了一个字符串。其实，您可以发送和接收更多内容。如果您有大量数据要返回调用页面，您可以让 php 以 xml 格式返回数据，然后使用 javascript 分析并显示这些数据。如果您在线搜索，您将发现大量不同的示例。