Ajax 技术入门简介

 

　　}

　　}

　　这些代码同样既不难也不复杂。它等待服务器调用，假如是就绪状态，则使用服务器返回的值(这里是用户输入的城市和州的 ZIP 编码)设置另一个表单字段的值。于是包含 ZIP 编码的 zipCode 字段忽然出现了，而用户没有按任何按钮!这就是前面所说的桌面应用程序的感觉。快速响应、动态感受等等，这些都只因为有了小小的一段 Ajax 代码。

　　细心的读者可能注重到 zipCode 是一个普通的文本字段。一旦服务器返回 ZIP 编码，updatePage() 方法就用城市/州的 ZIP 编码设置那个字段的值，用户就可以改写该值。这样做有两个原因：保持例子简单，说明有时候可能希望 用户能够修改服务器返回的数据。要记住这两点，它们对于好的用户界面设计来说很重要。

　　连接 Web 表单

　　还有什么呢?实际上没有多少了。一个 Javascript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 Javascript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依靠于调用 第一个 Javascript 方法，它启动了整个过程。最明显的办法是在 HTML 表单中增加一个按钮，但这是 2001 年的办法，您不这样认为吗?还是像 清单 7 这样利用 Javascript 技术吧。

　　清单 7. 启动一个 Ajax 过程

<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

　　　假如感觉这像是一段相当普通的代码，那就对了，正是如此!当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。

共6页: 上一页 [1] [2] [3] [4] [5] 6 下一页

评论加载中…