用 AJAX 构建支持实时验证的 Web 应用程序

作者：Naveen B… 文章来源：IBM developerWorks 点击数：810 更新时间：2006-3-22
【字体：小大】
如果您有任何疑问，请到开发论坛上提问。
AJAX 介绍
AJAX 支持动态、异步的 Web 体验，不需要页面刷新。它集成了以下技术：
XHTML 和 CSS 提供了基于标准的表示。 文档对象模型（DOM）提供了动态显示和交互。 XML 和 XSLT 提供了数据交换和操纵。 XMLHttpRequest 提供了异步数据检索。 javascript 把每一样东西绑定在一起。
AJAX 技术的核心是 javascript 对象：XMLHttpRequest。这个对象是通过浏览器实现提供的 —— 先是通过 Internet Explorer 5.0 然后通过 Mozilla 兼容的浏览器。请进一步观察这个对象。
使用 XMLHttpRequest，可以用 javascript 发出到服务器的请求，并在不阻塞用户的情况下处理响应。在创建 Web 站点并用 XMLHttpRequest 在客户机浏览器上无刷新地执行屏幕更新的同时，它还提供了更多灵活性和丰富的用户体验。
XMLHttpRequest 应用程序的示例包括 Google 的 Gmail 服务、Google 的 Suggest 动态查询界面以及 MapQuest 的动态地图界面。在下一节，在演示图书订购应用程序的设计和实现时，详细介绍了如何使用 XMLHttpRequest 对象。
应用程序设计
基于 Web 的示例图书订购应用程序包含以下用 AJAX 实现的客户端函数：
订购 ID 验证 一个 View Authors 列表 一个 View Publishers 列表
这里的目的是介绍 Web 页面中的实时验证 和页面刷新 如何让客户交互更平滑、更有效。
图 1 的图表说明了示例图书订购应用程序的设计架构：

应用程序是一个使用 Java 服务器页面（JSP）技术开发的单一 Web 页面。用户可以用 Web 浏览器（例如 Microsoft® Internet Explorer）调用 Web 页面并输入应用程序要实时验证的订购 ID。在 ID 异步验证的时候，用户可以输入更多信息。用户可以根据作者 或出版者 查看图书的书名。屏幕会根据用户的选择填充作者列表 或出版者列表。根据选择，书名列表 会被填充。所有这些列表都是实时填充的 —— 换句话说，页面没有刷新，但是数据仍然来自后台层。我们把这种现象叫做实时刷新。
从图 1 可以看出，XMLHttpRequest javascript 对象帮助进行实时异步处理。该对象采用 XML 格式通过 HTTP 对位于 Web 容器内的 LibraryServlet 发出请求。然后 servlet 查询数据库、提取数据并发送回客户机，还是采用 XML 格式通过 HTTP 进行传送。请求和响应都是在没有刷新页面的情况下实时发生的。
就是这一点使得 AJAX 如此强大。用户不需要等候页面重新载入才能完成，因为这里没有页面重载。
在下一节 中，我将演示如何根据这个设计来实现图书订购应用程序。我要介绍代码并做一些分析。（要得到本教程的示例代码，请下载文件 x-ajax-library.war。）
实现应用程序
在这一节，我们研究示例图书订购应用程序的代码，并进一步查看每个基于 AJAX 的 javascript 组件：
验证订购 ID 查看作者 查看出版者 查看书名
先从验证订购 ID 的函数 开始。这个代码生成文本字段，用户可以在里面输入订购 ID。用户输入 ID 并移到表单的下一个字段时，触发 onBlur 事件。这个事件调用 javascript 函数 validate()：
var req; function validate(formObj) { init(); req.onreadystatechange = subscriptionValidator; req.send("subscriptionID=" + formObj.subscriptionID.value); }
validate() 函数接受 formObj 作为参数。它首先调用 init() 函数：
function init() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } var url = "/Library/LibraryServlet"; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); }




现在看 init() 函数的工作（我们把代码分成几部分）：
if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }
init() 函数首先创建 XMLHttpRequest 对象。这个请求对象是 AJAX 的核心。它以 XML 格式发送和接收请求。这段代码检查浏览器对 XMLHttpRequest 对象的支持（多数浏览器都支持它）。如果使用 Microsoft Internet Explorer 5.0 以上版本，那么就执行第二个条件。
req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
代码创建了 XMLHttpRequest 对象之后，需要设置某些请求属性。在前面的代码中，第一行设置请求方法、请求 URL 和请求的类型（是否异步）。它通过调用 XMLHttpRequest 对象上的 open() 方法做这件事。
这里我们要使用 POST 方法。理想情况下，当需要在服务器上修改状态时，请使用 POST。我们的应用程序并不修改状态，但我们仍然倾向于使用 POST。url 是要执行的 servlet 的 URL。true 表明我们要异步地执行请求。
对于 POST 方法，我们需要设置 Content-Type 这个请求头。对于 GET 方法来说不需要这个设置。
function validate(formObj) { init(); req.onreadystatechange = subscriptionValidator; req.send("subscriptionID=" + formObj.subscriptionID.value); }




继续查看验证方法，下面把 subscriptionValidator 回调句柄分配给 onreadystatechange，请求状态的每个变化都会触发它。
这个回调句柄 都负责什么呢？因为正在异步地处理请求，所以需要一个回调句俩，从服务器返回完整响应的时候调用它 —— 回调句柄是对订购 ID 进行验证的地方（也就是编写实际的验证代码的地方）。
句柄充当侦听器。它一直等待响应完成。（稍后 将详细介绍句柄代码 。）为了发送请求，最后一行调用了 send() 方法。请求以名称=值 对的形式发送。对于 GET 方法，请求作为 URL 的一部分发送，所以 send() 方法被传递了一个空参数。
请求被发送到 servlet。servlet 处理请求并实时地发回响应。这就是 servlet 处理请求的方式。下一个代码段表示了 LibraryServlet 的 doPost() 方法。
public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ID = null; ID = req.getParameter("subscriptionID"); if (ID != null) { String status = "" + this.validID(ID) + ""; this.writeResponse(resp, status); } }




doPost() 方法从请求参数得到 subscriptionID。为了验证 ID，它调用 validID() 方法。这个方法验证 ID，如果 ID 正确，则返回 true，否则返回 false。它用 XML 格式构造返回状态，并调用 writeResponse() 方法来写响应。现在来看 writeResponse() 方法。
public void writeResponse(HttpServletResponse resp, String output) throws IOException { resp.setContentType("text/xml"); resp.setHeader("Cache-Control", "no-cache"); resp.getWriter().write(output); }
响应用 XML 格式发送。第一行设置响应的内容类型为 text/xml。第二行把头 Cache-Control 的值设为 no-cache。这个值是必需的。AJAX 要求响应的输出不能被浏览器缓存。最后一行调用 getWriter().write() 方法来写响应。




请求由 servlet 处理，响应被发送回客户机。请记住，所有这些都在后台发生，没有页面刷新。现在前面 讨论过的回调句柄方法会处理并解析响应：
function subscriptionValidator() { if (req.readystate == 4) { if (req.status == 200) { var messageObj = req.responseXML.getElementsByTagName("message")[0]; var message = messageObj.childNodes[0].nodeValue; if (message == "true") { msg.innerHTML = "Subscription is valid"; document.forms[0].order.disabled = false; } else { msg.innerHTML = "Subscription not valid"; document.forms[0].order.disabled = true; } } } }




如前所述，XMLHttpRequest 对象是构造和发送请求的核心对象。它也负责读取和解析从服务器返回的响应。请看下面几部分代码。
if (req.readystate == 4) { if (req.status == 200) {
前面的代码检查请求的状态。如果请求处在就绪状态，就读取和解析响应。
就绪状态是什么意思呢？当请求对象的属性 readystate 的值是 4 时，就意味着客户机接收到了响应而且接收完成。下面我们检查请求的状态（响应是正常页面还是错误页面）。为了保证响应正常，要检查状态的值是否为 200。如果 status 的值是 200，就会处理响应。
var messageObj = req.responseXML.getElementsByTagName("message")[0]; var message = messageObj.childNodes[0].nodeValue; if (message == "true") { msg.innerHTML = "Subscription is valid"; document.forms[0].order.disabled = false; } else { msg.innerHTML = "Subscription not valid"; document.forms[0].order.disabled = true; } }
接下来，请求对象通过调用 responseXML 属性读取响应。请注意 servlet 用 XML 格式发送回响应，所以我们使用 responseXML。如果响应是以文本格式发送的，那么可以使用 responseText 属性。
在这个示例中，我们处理 XML。servlet 把响应构建在一个 标记中。要解析这个 XML 标记，请在 XMLHttpRequest 对象的 responseXML 属性上调用 getElementsByTagName() 方法。它得到标记的名称以及标记的子值。根据解析到的值，格式化响应并用 HTML 改写。
现在就完成了对订购 ID 的验证，没有页面刷新。




其他的功能 —— 查看作者、查看出版者 和查看书名 —— 工作的方式类似。只是需要为每个功能定义独立的句柄：
function displayList(field) { init(); titles.innerHTML = " "; req.onreadystatechange = listHandler; req.send("select=" + escape(field)); } function displayTitles(formObj) { init(); var index = formObj.list.selectedIndex; var val = formObj.list.options[index].value; req.onreadystatechange = titlesHandler; req.send("list=" + val); }
请记住，示例应用程序允许用户根据作者和出版者查看书名。所以显示的或者是作者列表 或者是出版者列表。在这类场景中，应用程序只能根据用户的选择调用一个回调句柄 —— 换句话说，对于作者和出版者列表，只有一个 listHandler 回调句柄。
显示书名列表需要使用 titlesHandler。其余的功能仍然一样：servlet 处理请求，用 XML 格式写回响应。然后读取、解析、格式化响应，用 HTML 改写。可以用 HTML 把列表呈现为 select......options 标记。这个示例代码段显示了 titlesHandler 方法。
var temp = ""; for (var i=0; i" + listObj.childNodes[0].nodeValue + ""; } temp = temp + ""; titles.innerHTML = temp;
迄今为止，我们演示了如何实现实时验证和刷新。使用 AJAX，可以选择多种方式给 Web 站点的用户交互添加特色。下面运行应用程序。
运行和测试应用程序
请下载示例代码 wa-ajax-Library.war 并把它拷贝到 Tomcat 的 Webapp 目录（例如，c:\Tomcat 5.0\Webapps）。要启动 Tomcat 服务器，请输入以下命令：
cd bin C:\Tomcat 5.0\bin> catalina.bat start
Tomcat 现在启动了，AJAX Web 应用程序也部署在其中。
要测试应用程序：
请打开 Web 浏览器，指向 http://localhost:tomcatport/Library/order.jsp，其中变量 tompcatport 是 Tomcat 服务器运行所在的端口。
将看到订购屏幕。
在 Enter Subscription ID 字段中，输入用户 ID（“John” 除外）并离开字段。
向服务器异步发出的订购 ID 请求会被验证。可以看到 “Subscription not valid” 消息，如图 2 所示：

应用程序在不刷新浏览器的情况下，异步地验证用户并提供运行时验证。
输入用户 ID 值 John。
将看到消息 “Subscription is valid”。订购有效之后，应用程序就激活 Order 按钮。
请选择 By Author 或 By Publisher 按钮分别填充作者或出版者下拉列表。 从下拉列表选择一个作者或出版者。
书名区域被动态填充（如图 3 所示）。

在选择作者或出版者时，应用程序请求服务器在运行时提供来自服务器的与选中作者或出版者对应的书名信息。在不刷新浏览器的情况下显示书名信息。
现在成功安装和测试了示例 AJAX 应用程序。
结束语
AJAX 从开始至今已经走了很长的路。我们相信 AJAX 不仅仅可以用作设计模式，不过 AJAX 仍然有一些问题：
浏览器对 XMLHttpRequest 对象的支持可能是个限制。大多数浏览器都支持 XMLHttpRequest 对象，但是有少数不支持（通常是较老版本的浏览器）。 AJAX 最适合显示少量数据。如果要处理大量数据并在列表中实时显示，那么 AJAX 可能不是合适的解决方案。 AJAX 非常依赖于 javascript。如果浏览器不支持 javascript 或者用户禁止了脚本选项，那么根本就不能利用 AJAX。 AJAX 异步的性质不会保证多个请求的同步请求处理。如果需要对验证或刷新进行优先处理，那么要相应地设计应用程序。
即使有这些可能的问题，AJAX 仍然是提高 Web 页面和解决页面重载问题的最佳解决方案。
描述 名字 大小 下载方法
Web application Web archives wa-ajax-Library.war 8KB  FTP

关于下载方法的信息Get Adobe® Reader®
学习
您可以参阅本文在 developerWorks 全球站点上的英文原文。
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序（developerWorks，2005 年 10 月）：这篇文章介绍了解决页面重载恶梦的创建动态 Web 应用程序的开创性方式。
XML 问题: 超越 DOM（developerWorks，2005 年 5 月）：详细介绍了文档对象模型（DOM）作为构建动态 Web 应用程序的一种方法。
Using Ajax with PHP and Sajax（developerWorks，2005 年 10 月）：如果对于用 AJAX 和 PHP 开发动态更新内容的富 Web 应用程序感兴趣，请参阅这份教程。
AJAX 及使用 E4X 编写 Web 服务脚本，第 1 部分（developerWorks，2005 年 4 月）：在这个系列中，可以发现用于 XML 的 AJAX 和 ECMAScript 的细节。
面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化（developerWorks，2005 年 10 月）：学习在 AJAX 应用程序中序列化数据的五种方式。
Build quick, slick Web sites（developerWorks，2005 年 9 月）：把 XHTML 添加到 Web 设计中，以获取快速装入、富于响应性的 Web 页面。
developerWorks 的Web 架构专区：找到关于基于 Web 的解决方案的文章、教程和更多内容。
Survey AJAX/javascript libraries：请访问 OSA 基金会的 wiki。
XUL Planet 的object reference section：得到 XMLHttpRequest 的细节，还有各种其他 XML 对象，以及 DOM、CSS、HTML、Web 服务、Windows 和 Navigation 对象。
讨论
参与论坛讨论。
Ajax.NET Professional：一个讨论 AJAX 各方面内容的精彩 blog。
developerWorks blogs：加入 developerWorks 社区。


Naveen Balani 把他的大多数时间花在设计和开发基于 J2EE/SOA 的框架和产品上。他为 IBM developerWorks 编写了各种不同的文章，涉及的主题包括：ESB、SOA、JMS、WebServices Architectures、CICS、AXIS、DB2 XML Extender、WebSphere Studio、MQSeries、Java Wireless Devices 和 DB2 Everyplace for Palm、J2ME、MIDP、Java-Nokia、Visual Studio .Net 以及无线数据同步。可以通过他的电子邮件naveenbalani@rediffmail.com 与他联系。

 

Rajeev Hathi 目前在 Satyam 计算机有限公司担任高级系统分析员。他把时间花在设计和开发基于 J2EE 的框架上。他喜欢研究新技术和新领域。他的业余爱好是运动和音乐。可以通过他的电子邮件rajeev_hathi@hotmail.com 与他联系。