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

最新推荐文章于 2026-06-24 21:30:02 发布

翻译最新推荐文章于 2026-06-24 21:30:02 发布 · 464 阅读

标签

#ajax #action #服务器 #javascript #xmlhttprequest

ajax 专栏收录该内容

8 篇文章

订阅专栏

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

<select name="ddlRegion"

onchange="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>

</form>

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

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

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

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

添加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节，我们将继续讲客户端代码，但是首先，我们得说说服务器。