试译《Ajax in Action》第四部分（四）

 

9.2客户端架构

 

对大多数通常写服务器端代码的开发商来说，客户端架构是国外领土。在这种情况下，它并不那么可怕，因为我们仅需要花几步就可获取选项并填充到第二个选项列表中。如果你以前曾以 JavaScript 或服务器端方案实现过双组合，那么你已经经历过所涉及的部分过程。

如你在图 9.4 看到的，此应用程序的客户端互动不需要很多步。第一步，建立初始表单。然后，用户从表单中的第一个选项列表中选定一个项目。这就启动了客户端架构的第二步。这一步将创建一个 XMLHttpRequest 对象来与服务器交互。当收到服务器的响应时，用户所选，连同表单名称和将被更新的控制，一同被传递到了服务器。第三步要求我们把第二个 select 元素作为内容添加给服务器的 XML 响应。 JavaScript 的 XML DOM 方法被用来解析 XML 响应。

 

让我们复习前两步，它们发生在 Ajax 请求被发送给服务器之前。在 9.4 节，我们会更详细解释第三步，因为在我们能完全实现客户端架构之前，我们需要谈谈服务器。

9 ． 2 ． 1 设计表单

这个例子中的表单包括两个 select 元素。初始状态下，第一个 select 元素含有值，而第二个选项列表为空。图 9.5 显示了这个表单。

 

第一个表单元素可以三种相互独立的方式初步填充，如表 9.1 所示。

表 9.1 三种填充表单元素的方法

方法	优点	缺点
把值硬编码到 select 元素中	不需服务器端处理	选项是非动态的
用服务器端脚本填值	选项是动态的 并能获取自数据库	需要额外的 服务器处理
用 Ajax 填值；这种方法发回 给服务器来检索这些值	能同页面上的其他值 联结在一起	需要额外的 服务器处理

 

第一种方法是硬编码填值到 select 元素中。当你只有几个不会改变的选项时，这个方法很好。第二种方法使用服务器端脚本来填值。这种做法在网页被渲染时填充选项，选项可以从取自数据库或 XML 文件。第三种方法使用 Ajax 填值；这种方法发回给服务器来检索值，但是不重新渲染整个页面。

在本例中，由于只有四个非动态的选项，我们把值硬编码到选项列表中。动态地载入值到第一个选项列表的最佳对策是使用服务器端脚本，在页面被加载时填充列表。 Ajax 不应用来填充第一个选项列表，除非它的内容依赖于用户从表单中选择的其他值。

第一个选项列表需要有个 onchange 事件处理器加入它的 select 元素，如清单 9.1 所示。事件处理器调用 JavaScript 函数 FillTerritory(), 它发送一个请求给服务器，启动填充第二个选项列表的过程。

Listing 9.1 The double-combo form

<form name="Form1">

 <select name="ddlRegion"

οnchange="FillTerritory(this,document.Form1.ddlTerritory)" >

    <option value="-1">Pick A Region</option>

    <option value="1">Eastern</option>

    <option value="2">Western</option>

    <option value="3">Northern</option>

<option value="4">Southern</option>

 </select>

 <select name="ddlTerritory"></select>

</form>

清单 9.1 创建了一个表单，当第一个选项列表中一个选项被选中，它启动 FillTerritory() 进程。我们传递两个对象引用给 FillTerritory() 函数。第一个是附加事件处理器的选项列表对象，第二是要填充的选项列表对象。对我们来说，下一步将是为 FillTerritory() 开发客户端代码，它提交我们的请求到服务器。

9.2.2 设计客户机 / 服务器的互动

FillTerritory() 函数的主要目的是聚集发送请求到服务器所需的信息。这些信息包括：第一个列表中的选定项，表单名称，第二个选项列表的名称。有了这些信息，我们就可使用 JavaScript 库中的 Ajax 函数发送一个请求给服务器。我们需要做的第一件事情就是添加 Ajax 功能。代码需要链接到一个普通的外部的 JavaScript 文件， net.js, 它定义了内容装载机对象。把它加入你的 HTML 文档的 head 标签之间就行了：

<script type="text/javascript" src="net.js"></script>

内容装载机对象完成所有的工作：决定如何给服务器发送一个请求，我们在第三章介绍的以易用的包装器隐藏任何特定浏览器的代码。它允许我们再不刷新页面的情况下，从服务器发送并检索数据。

添加 Ajax 功能之后，我们可以构造 FillTerritory() 函数，如清单 9.2 所示，把它也添加到我们的文档的 head 标签之间。

清单 9.2 FillTerritory() 函数初始化 Ajax 请求

 

FillTerritory() 函数接受两个参数，在这个例子中是从第一个选项列表中的 onchange 事件处理器传递的。它们指向第一个和第二个 select 元素。 1 取第一个列表中用户选定的值。 2 设置服务器端脚本的目标 URL 。 3 然后创建发送到服务器的参数。创建一个与查询字符串有相同句法类型的字符串，用 ‘ ＆ ' 符号分开每个名值对。在本例中，我们正发送的那些值： q 代表选定区， f 代表表单名称， e 代表第二个 select 的名称。服务器端代码将用选定区的值查询数据库，并通过 XML 响应文档把表单名称和 select 元素发返客户端。客户端将用这些信息决定哪个表单和控制将更新。一旦参数串创建好，剩下的一件事就是启动 Ajax 进程。

       4 为了启动进程，我们调用 ContentLoader() 构造器，并传入目标 URL ，当收到服务器的响应时将被调用的函数，错误处理器函数，所使用 HTTP 方法和将被发送的参数。在这个例子中，当数据从服务器返回时， FillDropDown() 函数将被调用，我们使用 ContentLoader 的缺省错误处理器，一个 POST 请求。

在此处，内容装载机将等待服务器返回一个 XML 文档。在 9.4 节，我们将继续讲客户端代码，但是首先，我们得说说服务器。