理解 Ajax 及其工作原理，构建网站的一种有效方法

清单 6. 处理服务器响应
字串7

function updatePage() {

  if (xmlHttp.readyState == 4) {

    var response = xmlHttp.responseText;

    document.getElementById("zipCode").value = response;

  }

}

 
字串8
 

字串4

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

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

字串1

字串3 回页首

字串5

连接 Web 表单 字串3

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

字串4

清单 7. 启动一个 Ajax 过程

字串5

<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>

 
字串5
 

字串8

如果感觉这像是一段相当普通的代码，那就对了，正是如此！当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。有点儿明白怎么回事了吧？好，就是如此！