在Java2平台企业版中应用异步JavaScript技术和XML（AJAX）

转载：http://www.nirvanastudio.org/category/ajax/

作者Greg Murray, 2005年6月9日June 9, 2005  翻译：ShiningRay@Nirvana Studio2005年9月9日

任何试过过Flickr、GMail、Google Suggest或者是Google Maps的人都会意识到一种新型的动态Web应用正在逐渐浮出水面。这些应用外观和表现都和传统的桌面应用程序很像，而他们不需要依赖于插件或者是特定于浏览器的功能。过去Web应用只是一系列HTML页面，他们任意一部份内容的更改都必须重新载入页面。像JavaScript编程语言和层叠样式表 （CSS）之类的技术已经成熟，可以有效地应用他们来创建高动态的Web应用，而且可以运行在所有的主流浏览器中。本文将会详细介绍你马上就可以使用的一些技术，让他们使你的Web应用像桌面应用更加丰富和更有交互性。

介绍异步JavaScript技术和XML（AJAX）

---

使用JavaScript技术，一个HTML页面可以异步地对服务器（一般是载入页面的服务器）发送请求并获取XML文档。然后JavaScript可以使用XML文档来更新或改动HTML页面的文档对象模型（DOM）。最近形成了一个术语AJAX（Asynchronous JavaScript Technology and XML）来描述这种交互模型。

AJAX其实不是很新的东西。这些技术对于Windows平台上专注于Internet Explorer的开发人员来说，已经存在好几年了。直到最近，这个技术才被作为Web远程技术或者远程脚本技术被大家了解。Web开发人员也有一段时间曾经使用过插件、Java applet和隐藏框架来模拟这种交互模型。最近发生的变化是，对XMLHttpRequest对象的支持已经成为所有平台上的主流浏览器都包括的特性了。JavaScript技术的XMLHttpRequest对象是。尽管在正式的JavaScript技术标准中并没有提到这种对象，然而今天主流的浏览器都对他提供了支持。而当代的浏览器如Firefox、Internet Explorer以及Safari在JavaScript技术和CSS的支持上有些细微的差别，但是这种差别是可以处理的。如果你要考虑支持较老的浏览器，AJAX也许就不能成为你的解决方法。

基于AJAX的客户端之所以独特的原因是客户端包含了用JavaScript嵌入的特定于页面的控制逻辑。应用JavaScript技术的页面基于事件进行交互，如文档载入、鼠标点击、焦点改变甚至是定时器。AJAX交互使得表现层逻辑更加清晰地与数据分离。一个HTML页面也可以根据需要每次读入适当的数据，而不是每次需要显示一个更改时都重新载入整个页面。AJAX要求一种不同的服务器架构来支持它这种交互模型。以前，服务器端Web应用关注于对每个导致服务器调用的客户端事件都生成HTML文档。然后客户端对每个回应都要重新读入并重新渲染完整的HTML页面。富Web应用(Rich Web Application)关注于，让一个客户端获取一个HTML文档让它表现为一个模板或者是一个容器，可以基于事件并使用从服务器端组件中获取的XML 数据来对文档注入内容。

一些AJAX交互的应用如：

• 实时表单数据检验：像用户ID、序列号、邮政编码或者是特殊的票据代码这类需要服务器端验证的数据也可以在用户提交表单之前进行验证。
• 自动补全:像电子邮件地址、姓名或城市名之类的表单数据都可以根据用户情况自动补全。
• 处理细节操作：根据一个客户端事件，一个HTML页面可以根据现存的一些数据再去获取更多详细的信息，如现在有一个产品列表，客户端可以控制查看单独的产品信息而无需刷新页面。
• 复杂的用户界面控件：像树型控件、菜单和进度条之类不要求页面刷新的控件也能实现。
• 页面内刷新数据：HTML页面可以从服务器上查询最新的数据如分数、股指、天气还有其它的特定于应用的数据。
• 服务器端通知：一个HTML页面可以通过对服务器进行定时查询来模拟一个服务器的事件通知推送，实现像通知客户端一个消息、刷新页面数据或将客户端重定向到另一个页面。

这个列表并未把所有的应用都列出来，但它已经显示了AJAX交互可以让Web应用比从前能做更多的事情。但尽管这些好处是值得关注的，这种方式也有一些缺点：

• 复杂度：服务器端开发人员必需理解，HTML客户端页面中的表现层逻辑以及生成HTML客户端页面所需的XML内容的服务器端逻辑。HTML页面开发人员必须了解JavaScript技术。如果开发新的框架和发展已有的框架来支持这种交互模型，那么AJAX应用的创建就会越来越简单。
• XMLHttpRequest对象的标准化：XMLHttpRequest对象还不是JavaScript技术标准的一部分，这就意味着根据客户端的不同，应用的行为也有所会不同。
• JavaScript技术的实现：AJAX交互极大地依赖于JavaScript技术，而由于客户端的原因JavaScript还有一些细微的差别。见QuirksMode.org来了解更多关于浏览器之间区别的内容。
• 调试:AJAX应用也难于调试，因为流程逻辑是同时嵌在客户端中和服务器上的。
• 代码可见：客户端的JavaScript可以很容易通过“查看源代码”被人看见。一个没有良好设计的AJAX应用很可能被黑客攻击或被他人剽窃。

当开发人员在使用AJAX交互模型上获得更多的经验后，AJAX技术的框架和模式就会慢慢浮现出来。现在就关注于完全通用的AJAX交互框架，还为时过早。本文和相关的解决方案将关注于在现有的Java 2平台企业版（J2EE）上如何对AJAX进行支持，像servlet，JavaServer Page（JSP）软件、JavaServer Face应用和Java标准标签库（JSTL）。

AJAX交互剖析

---

现在我们已经讨论了AJAX是什么以及一些高层次的问题。那现在让我们把所有的零件放在一起来展示一个具有AJAX的J2EE应用。

首先考虑一个例子。一个Web应用包括了一个静态HTML页面，或者是一个由JSP生成的HTML页面，这个JSP中还包括了一个HTML表单，它需要服务器端逻辑来对表单中的数据进行检验，而不用刷新页面。一个名为ValidateServlet服务器端组件(servlet)用来提供这种验证逻辑。图一描述了这种具有验证逻辑的AJAX交互的细节。

图1: 一个提供验证逻辑的AJAX交互

以下条目代表了图1中出来AJAX交互的过程：

1. 发生一个客户端事件。
2. 创建和配置一个XMLHttpRequest对象。
3. XMLHttpRequest对象进行一个调用。
4. ValidateServlet对请求进行处理。
5. ValidateServlet返回一个包含了结果的XML文档。
6. XMLHttpRequest对象调用callback()函数并处理结果。
7. 更新 HTML DOM。

现在让我们逐个研究这个AJAX模型的每一步。

1.发生一个客户端事件。

在一个事件发生时可以调用相应的JavaScript函数。在这里，validate()函数可以被映射到一个链接或者是表单组件的onkeyup事件上去。

<input type="text"
    size="20"
    id="userid"
    name="id"
    onkeyup="validate();">

每次用户在表单域中按下一个键时，表单元素将都调用validate()函数。 

2. 建立和配置一个XMLHttpRequest对象

创建和配置一个XMLHttpRequest对象

var req;
 
function validate() {
    var idField = document.getElementById("idField");
    var url = "validate?id=" + escape(idField.value);
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    req.open("GET", url, true);
    req.onreadystatechange = callback;
    req.send(null);
}

validate()函数建立了一个XMLHttpRequest对象并对象中的open函数。open函数需要两个参数：HTTP方法，可以是GET或POST; 和对象进行交互的服务器端组件的URL；一个布尔变量，表示是否要进行异步调用。API是XMLHttpRequest.open(String method, String URL, boolean asynchronous)。如果一个交互被设置为异步， (true) 那就必须指明一个回调函数。可以使用req.onreadystatechange = callback;来设置这个交互的回调函数。详细内容见第六节。

3.XMLHttpRequest对象进行调用

当收到了语句req.send(null);，就会进行一次调用。HTTPGET的情况下，内容可以是null或者留空。当调用XMLHttpRequest的这个函数时，也会对已经配置了的URL进行调用。在下面这个例子中，要发送的数据(id)将作为一个URL参数。

使用HTTPGET,两个重复的请求将返回同样的结果。当使用HTTPGET方法时，要注意URL的长度，包括已经转义的URL参数，可能会受到某些浏览器和服务器端的Web容器的限制。当发送的数据会影响到服务器端的应用程序的状态时，就应该使用HTTPPOST方法。使用HTTPPOST必须要对XMLHttpRequest对象设置一个Content-Type头，使用以下语句：

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));

当从JavaScript中发送表单值得时候，你应该考虑对字段值进行编码。JavaScript中有一个函数escape()，应该用他来确保区域化的内容被正确编码，同时特殊字符也被正确转义。

4. ValidateServlet对请求进行处理.

一个映射到URI "validate" 的servlet将检验user ID是不是已经在数据库中存在了。

一个servlet处理一个XMLHttpRequest ，就像对待其它的HTTP请求一样。下面的例子显示了服务器从请求中抽取出id参数并检验是否被占用了。

public class ValidateServlet extends HttpServlet {
 
    private ServletContext context;
    private HashMap users = new HashMap();
 
    public void init(ServletConfig config) throws ServletException {
        this.context = config.getServletContext();
        users.put("greg","account data");
        users.put("duke","account data");
    }
 
    public void doGet(HttpServletRequest request, HttpServletResponse  response)
    throws IOException, ServletException {
 
        String targetId = request.getParameter("id");
 
        if ((targetId != null) && !users.containsKey(targetId.trim())) {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("<message>valid</message>");
        } else {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("<message>invalid</message>");
        }
    }
}

在这个例子中，一个简单的HashMap用来存放存在的用户名。在这个例子中，我们假设用户的ID是duke。

5.ValidateServlet返回一个包含结果的XML文档

用户ID "duke" 在users HashMap的用户ID列表中出现了。将在应答中写一个包含值为invalid的message元素的XML文档。更复杂的用例将要求DOM、XSLT或其他API来生成这个应答。

response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>invalid</message>");

开发人员必须注意两个事情。第一，Content-Type必须设为text/xml。第二，Cache-Control必须设为no-cache。XMLHttpRequest对象只会处理Content-Type为text/xml的应答，同时把将Cache-Control设为no-cache将确保浏览器不会从缓存相同的URL（包括参数）返回的应答。

6.XMLHttpRequest对象调用callback()函数并处理结果。

XMLHttpRequest对象已经配置为当有readyState改变的时候就调用callback()函数。让我们假设已经ValidateServlet调用了而且ValidateServlet是4,表示XMLHttpRequest的调用已经完成。HTTP状态代码200表示一个成功的HTTP交互。

function callback() {
if (req.readyState == 4) {
    if (req.status == 200) {
        // update the HTML DOM based on whether or not message is valid
    }
}
}

浏览器维护了一个所显示的文档的对象形式（也就是所谓的Docuemt Object Model或DOM）。HTML页面中的JavaScript可以访问DOM，同时在页面载入完之后，可以使用API来修改DOM。

根据成功的请求，JavaScript代码可以修改HTML页面的DOM。从ValidateServlet获得的对象形式的XML文档可以通过req.responseXML在JavaScript中获得，req是一个XMLHttpRequest对象。DOM API给JavaScript提供了获取这个文档中的内容以及修改HTML页面的DOM的方法。所返回的字符串形式的XML文档可以通过req.responseText获得。现在我们看看如何在JavaScript中使用DOM API，先看以下从ValidateServlet返回的XML文档。

<message>
valid
</message>

这个例子是一个简单的只包含了一个message元素的XML片断，里面只有一个简单的字符串valid或invalid。一个更高级的例子可以包含多于一个的消息和可以给用户看的有效的名字：

function parseMessage() {
    var message = req.responseXML.getElementsByTagName("message")[0];
    setMessage(message.childNodes[0].nodeValue);
}

parseMessages()函数将处理一个从ValidateServlet获取的XML文档。这个函数会调用setMessage()with the，并给出message作为参数来更新HTML DOM。

7.更新HTML DOM

JavaScript技术可以使用很多API从HTML DOM中获得任何元素对象的引用。推荐的获得元素引用的方法是调用document.getElementById("userIdMessage"), "userIdMessage"是HTML文档中出现的一个元素的ID属性。有了这个元素的引用，就可以使用JavaScript来修改元素的属性、修改元素的样式、添加、删除或修改子元素。

一个常见的改变元素主体内容的方法是设置元素的innerHTML属性，如下所示：

<script type="text/javascript">
function setMessage(message) {
    var userMessageElement = document.getElementById("userIdMessage");
    userMessageElement.innerHTML = "<font color=\"red\">" + message + " </font>";
}
</script>
<body>
<div id="userIdMessage"></div>
</body>

受到影响的那部分HTML页面会立刻根据innerHTML的设置重新渲染。如果innerHTML属性包含类似<image>或者是<iframe>之类的元素，那么由那些元素所指定的内容同样会被获取并渲染。

这种途径的主要缺点是HTML元素是作为字符串硬编码在JavaScript中的。JavaScript中硬编码的HTML标记不是一种好的实践，因为它使代码难于阅读、维护和修改。我们应该考虑在JavaScript中使用DOM API来创建和修改HTML元素。把显示和JavaScript代码的字符串混在一起只会让页面更难于阅读和编辑。

另一种修改HTML DOM的方法是动态地产生新的元素并把他们作为子元素追加到目标元素，如下面的例子所示：

<script type="text/javascript">
function setMessage(message) {
    var userMessageElement = document.getElementById("userIdMessage");
    var userIdMessageFont = document.getElementById("userIdMessageFont");
    var messageElement = document.createTextNode(message);

    if (userMessageElement.childNodes[0]) {
        // 更新元素
        userIdMessageFont.replaceChild(messageElement, userIdMessageFont.childNodes[0]);
    } else {
        // 建立一个新的元素
        var fontElement = document.createTextNode("font");
        fontElement.setAtribute("id", "userIdMessageFont");
        fontElement.setAtribute("color", "red");
        userMessageElement.appendChild(fontElement);
        fontElement.appendChild(messageElement);
    }
}
</script>
<body>
<div id="userIdMessage"></div>
</body>

这个范例展示了JavaScript技术的DOM API可以用来更有目的地建立或改变一个元素。当然JavaScript的DOM AP在不同的浏览器上也可能有差别，所以你必须在开发应用程序时小心。