本文中,您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法:XML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时,可能会看到闪烁或抖动。事实上,通过看到的每个新页面可以清晰地看到请求和响应。
Web 2.0(在很大程度上)消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr 这样的站点(到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 参考资料)。比如在 Google Maps 上,您可以拖动地图,放大和缩小,只有很少的重绘操作。当然这里仍然有请求和响应,只不过都藏到了幕后。作为用户,体验更加舒适,感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。
需要关心的是如何使这些新的交互成为可能。显然,仍然需要发出请求和接收响应,但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚,我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。
但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下,Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人,这种能力可以让您的应用程序感觉更快、响应更及时,让他们不时地光顾您的网站。
回页首
XML 的就绪状态。
responseText
:服务器返回的请求响应文本。
如果不了解这些(或者其中的任何 一个),您也不用担心,后面几篇文章中我们将介绍每个方法和属性。现在应该 了解的是,明确用 XML,其中可以看到 phone
字段及其 id
属性。
清单 8. Break Neck Pizza 表单
<body>
<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
<form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>
还要注意,当用户输入电话号码或者改变电话号码时,将触发 清单 8 所示的 getCustomerInfo()
方法。该方法取得电话号码并构造存储在 url
变量中的 URL 字符串。记住,由于 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php
。最后,电话号码作为 GET 参数附加到该脚本中:"phone=" + escape(phone)
。
如果以前没用见过 escape()
方法,它用于转义不能用明文正确发送的任何字符。比如,电话号码中的空格将被转换成字符 %20
,从而能够在 URL 中传递这些字符。
可以根据需要添加任意多个参数。比如,如果需要增加另一个参数,只需要将其附加到 URL 中并用 “与”(&
)字符分开 [第一个参数用问号(?
)和脚本名分开]。
打开请求
有了要连接的 URL 后就可以配置请求了。可以用 XML,请参阅 清单 8)。输入电话号码然后离开该字段,将看到一个弹出的警告窗口(如 图 3 所示),但是点击 OK 又出现了……
图 3. 弹出警告的 Ajax 代码
");
} else
alert("status is " + request.status);
}
}
首先,得到 responseText
并使用 JavaScript split()
方法从管道符分开。得到的数组放到 response
中。数组中的第一个值 —— 上一个订单 —— 用 response[0]
访问,被设置为 ID 为 “order” 的字段的值。第二个值 response[1]
,即客户地址,则需要更多一点处理。因为地址中的行用一般的行分隔符(“\n”字符)分隔,代码中需要用 XHTML 风格的行分隔符 <br />
来代替。替换过程使用 replace()
函数和正则表达式完成。最后,修改后的文本作为 HTML 表单 div
中的内部 HTML。结果就是表单突然用客户信息更新了,如图 4 所示。
图 4. 收到客户数据后的 Break Neck 表单
结束本文之前,我还要介绍 XMLHttpRequest
的另一个重要属性 responseXML
。如果服务器选择使用 XML 响应则该属性包含(也许您已经猜到)XML 响应。处理 XML 响应和处理普通文本有很大不同,涉及到解析、文档对象模型(DOM)和其他一些问题。后面的文章中将进一步介绍 XML。但是因为 responseXML
通常和 responseText
一起讨论,这里有必要提一提。对于很多简单的 Ajax 应用程序 responseText
就够了,但是您很快就会看到通过 Ajax 应用程序也能很好地处理 XML。