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

 

9.1 双组合脚本

      在一个双组合链接的列表中，一个选项列表的内容依赖另一个选项列表中被选中的那一项。当用户从第一个列表中选中一个值，第二个列表中的所有项动态地更新。这种功能被典型地叫做双组合脚本。

     为了实现第二个选项列表的动态填充，传统上有两种对策：一种在客户端实现，另一种在服务器端。为了理解这些策略背后的理念和使用它们的开发商的忧虑，让我们回顾一下它们是如何工作的。

 

9．1．1客户端对策的限制

    传统上，开发商的首选是使用单独的客户端对策。在web页面上，它通过使用JavaScript方法把那些选项列表中的值硬编码到JavaScritp数组中。一旦你挑选了一个衬衣的尺码，这个脚本会从数组中选择那些值来无缝地填充下一个选项列表。图9.1显示了这种对策。

 

    使用这种客户端方法的一个麻烦在于，因为它不能同服务器通讯，所以当用户做出第一个选择时，它不能抓取最新的数据。另一个麻烦在于初始加载页面的时间，随着这两个列表中可能的选项数目的增长，会导致规模不经济。

    想象一个有上千个选项的商店。每一个选项对应的值都必须放到JavaScript数组里。由于表达这些数组的代码将是页面内容的一部分，当第一次载入页面时，用户将面临长时间的等待。把所有信息预先传输到客户端是一种无效率的途径。

    另一方面，JavaScript方法有一种好处：在初始加载时间过后，它是快的。在从第一个选项列表里选择一个选项到第二个列表被填充之间没有重大的迟滞。所以，如果你有几个双组合方案不会显著地影响页面加载时间，这种对策才是实用的。

 

9．1．2服务器端对策的限制

    接下来的传统对策是众所周知的post back，即提交一个表单给服务器。在这种对策中， 经由submit()方法（表单的JavaScript表述），第一个选项列表中的onchange事件处理器触发一个页面回发给服务器。这个对策提交表单到服务器，传递用户从第一个select元素中的选择。服务器根据用户所选的值依次查询数据库，并在它渲染页面时，动态地为第二个列表填充新值。你可在图9.2看到服务器端对策的过程。

    服务器端对策的弊端在于与服务器的大量交互;每次页面被重载，都有时间延迟，因为整个页面必须重新渲染。图9.2显示了所有必需的额外处理。为了重新选择用户从被渲染页面的第一个select元素中的选择，附加的服务器端代码也是必需的。而且，如果这页面在提交表单之前被翻滚到一个特定点，在页面重载后用户不得不再翻滚到那个位置。

 

9．1．3基于Ajax的对策

      通过使用Ajax传递数据到服务器并为第二个选项列表获取期望的信息，我们可以避免JavaScript和服务器端对策的麻烦。这种对策使得查询数据库并动态地填充表单元素只有稍微的停顿。与JavaScript对策相比，我们节省了额外的页面加载时间，而那是把所有可选选项加载到数组中所必需的。与服务器端回发对策相比，我们不需要把整个页面发回给服务器，相反，我们只传递必要的信息。 页面没有被重载，所以你不需要关心页面的滚动位置或下拉列表中哪个选项被选中了。初始页面加载时间也缩减了，因为JavaScript数组不需要包含在页面中。

 

   例子将牵涉两个选项列表。第一个选项列表包含一个公司的销售地区。第二个选项列表显示被选区相应的范围，如图9.3所示。当用户从第一个选项列表中选择一个区域，客户端发送给服务器一个只包含必要信息的请求，这些信息用来识别被选区域和表单控制以填充范围列表。

   服务器查询数据库并返回一个xml文档，其中包含与选定区相关的范围名称，还有表单的名称和客户端需要更新的控制。让我们看看它是如何工作的。

   实施Ajax对策第一步在客户端。