Mongoose House

在 Ajax 应用程序中实现数据交换

作者：Andrei Cioroianu
了解如何利用 XML 和 JavaScript Object Notation 在 Ajax 客户端和 Java 服务器之间传输数据。

2006 年 6 月发表

Ajax 核心 API（即所谓的 XMLHttpRequest）的唯一用途就是发送 HTTP 请求，在 Web 浏览器与服务器之间进行数据交换。Web 页面中运行的 JavaScript 代码，可以使用 XMLHttpRequest 将该请求参数提交至服务器端脚本，例如 Servlet 或 JSP 页面。调用的 Servlet/JSP 将发回一个响应，其中包含了一般用于不需刷新整个页面即可更新用户查看内容的数据。此种方法在性能和可用性方面均体现出了独有的优势，因为这将降低网络通信量，而且 Web UI 的使用几乎与桌面 GUI 一样。

但是，开发这种用户界面并不简单，因为您必须在客户端上使用 JavaScript、在服务器端上使用 Java（或等效语言）实施数据交换、验证以及处理。然而，在许多情况下，考虑到将会由此获得的益处，付出额外精力构建一个基于 Ajax 的界面是值得的。

在本文中，我将介绍一种用于在 Ajax 客户端和服务器之间传输数据的主要方法，并比较传统 Web 应用程序模型与该 Ajax 模型的不同点。此外，文中还将探讨在服务器端与客户端处理数据的技巧。

首先，您将了解如何在客户端使用 JavaScript 编码请求对象的参数。您可以使用所谓的 URL 编码（Web 浏览器使用的默认编码），或可将请求参数包含在 XML 文档中。服务器将处理该请求，并返回一个其数据也必须进行编码的响应。本文将探讨 JavaScript Object Notation (JSON) 和 XML，这些都是主要的响应数据格式选项。

本文的大部分内容将主要介绍 Ajax 应用程序中通常使用的与 XML 相关的 API。在客户端，XML API 的作用虽非常有限，但已够用。在多数情况下，利用 XMLHttpRequest 即可完成所有必需操作。此外，还可使用 JavaScript 在 Web 浏览器中分析 XML 文档并串行化 DOM 树。在服务器端，可用于处理 XML 文档的 API 和框架有很多种。本文将介绍如何使用针对 XML 的标准 Java API 来实施基本任务，该 API 支持 XML 模式、XPath、DOM 以及许多其他标准。

通过本文，您可以了解到在 Ajax 应用程序中实现数据交换所用的最佳技巧和最新的 API。其中涉及的示例代码分别位于以下三个程序包中：util、model 和 feed。util 程序包中的类提供了用于 XML 分析、基于模式的验证、基于 XPath 的查询、DOM 串行化以及 JSON 编码的方法。model 程序包包含的示例数据模型可用于从 XML 文档进行初始化，然后再转换至 JSON 格式。model 目录中还有一个 Schema 示例，可用于 XML 验证。feed 程序包中的类可用于模拟数据馈送，其通过 Ajax 每 5 秒检索一次来获得信息，以刷新 Web 页面。本文阐释了如何通过终止未完成的 Ajax 请求并在使用完 XMLHttpRequest 对象后将其删除，避免 Web 浏览器的内存泄漏。

web 目录中包含了 JSP 和 JavaScript 示例。ajaxUtil.js 中包含了发送 Ajax 请求、终止请求以及处理 HTTP 错误的实用函数。该文件还提供了可用于 XML 和 URL 编码、XML 分析以及 DOM 串行化的 JavaScript 实用程序。ajaxCtrl.jsp 文件充当 Ajax 控制器，接收每一个 Ajax 请求、转发参数至数据模型，或供给处理，然后返回 Ajax 响应。其余的 Web 文件都是演示如何使用该实用方法的示例。

在客户端构建请求

将数据发送至 Web 服务器的最简单方法是将请求编码为查询字符串，该字符串根据使用的 HTTP 方法，既可附加至 URL，也可包含在请求正文中。如果需要发送复杂的数据结构，更好的解决方案是将信息编码在 XML 文档中。我将在本部分中介绍这两种方法。

编码请求参数。开发传统 Web 应用程序时，无需担心表单数据的编码，因为 Web 浏览器会在用户提交数据时自动执行该操作。但是，在 Ajax 应用程序中，您必须亲自编码请求参数。JavaScript 提供了一个非常有用的函数 escape()，该函数用 %HH（其中 HH 是十六进制代码）替换任何无法成为 URL 一部分的字符。例如，任何空白字符都用 %20 替换。

示例代码下载中提供了一个实用函数 buildQueryString()，该函数可连接检索自数组的参数，通过 = 将每个参数的名称和值相分离，并将 & 字符置于每个名称-值对之间：

假设您要编码以下参数：

buildQueryString(someParams) 调用将生成包含以下内容的结果：

name=John%20Smith&email=john@company.com&phone=%28123%29%20456%207890

如果希望使用 GET 方法，则必须将查询附加至 URL 的 ? 字符之后。使用 POST 时，应通过 setRequestHeader() 将 Content-Type 标题设置为 application/x-www-form-urlencoded，且必须将该查询字符串传递至 XMLHttpRequest 的 send() 方法，这会将该 HTTP 请求发送至服务器。

创建 XML 文档。利用字符串通过其属性和数据构建元素是用 JavaScript 创建 XML 文档最简单的方法。如果采用这种解决方案，则需要一个实用方法来转义 &、<、>、"、以及 ' 字符：

要使任务更为简单，还需要一些其他实用程序方法，例如：

以下示例从一个具有以下三个属性的对象的数组构建一个 XML 文档：symbol、shares 和 paidPrice：

如果您喜好使用 DOM，则可使用 Web 浏览器的 API 分析 XML 和串行化 DOM 树。通过 IE，您可以用新的 ActiveXObject("Microsoft.XMLDOM") 创建一个空文档。然后，可以使用 loadXML() 或 load() 方法分别从字符串或 URL 分析该 XML。在使用 IE 的情况下，每个节点都有一个称为 xml 的属性，您可以利用它获得该节点及其所有子节点的 XML 表示。因此，您可以分析 XML 字符串、修改 DOM 树，然后将该 DOM 串行化回 XML。

Firefox 和 Netscape 浏览器允许您使用 document.implementation.createDocument(...) 创建一个空文档。然后，可以使用 createElement()、createTextNode()、createCDATASection() 等创建 DOM 节点。Mozilla 浏览器还提供了两个分别名为 DOMParser 和 XMLSerializer 的 API。DOMParser API 包含 parseFromStream() 和 parseFromString() 方法。XMLSerializer 类具有串行化 DOM 树的相应方法：serializeToStream() 和 serializeToString()。

以下函数分析一个 XML 字符串并返回 DOM 文档：

第二个函数串行化一个 DOM 节点及其所有子节点，将 XML 作为字符串返回：

还可以使用 XMLHttpRequest 作为分析程序或串行化程序。在从服务器接收到对 Ajax 请求的响应后，该响应会自动进行分析。可通过 XMLHttpRequest 的 responseText 和 responseXML 属性分别访问文本版本和 DOM 树。此外，在将 DOM 树传递至 send() 方法时自动将其串行化。

发送请求。在先前的文章中，我介绍了 XMLHttpRequest API 和一个实用函数 sendHttpRequest()，您可以在提供下载的示例中的 ajaxUtil.js 文件中找到。该函数有四个参数（HTTP 方法、URL、一个参数数组和一个回调），可创建 XMLHttpRequest 对象，设置其属性并调用 send() 方法。如果提供了回调参数，则异步发送请求，并在收到响应后调用回调函数。否则，将同步发送请求，您可以在 sendHttpRequest() 返回后即刻处理响应。

如您所见，在使用 XMLHttpRequest 时必须进行一些重要选择

• 将要使用的 HTTP 方法（GET 或 POST）
• 用于编码请求参数的格式（本文前面已探讨了 XML 和 URL 编码）
• 是进行同步（等待响应）调用还是异步（使用回调）调用
• 响应的格式，如 XML、XHTML、HTML 或 JavaScript Object Notation (JSON)（本文稍后将对此进行探讨）。

假设您希望从数据馈送了解一些股价信息，且无需用户干预即可定期刷新信息。在本例中，应异步发送 HTTP 请求，这是为了在检索信息时不阻塞用户界面。请求参数是一个符号数组，可在 URL 中进行编码。由于服务器可能超载，因此您不希望在进行频繁请求时发送 XML 文档。由于您只对最新的股价感兴趣，因此应终止任何未完成的先前请求：

在调用请求对象的 abort() 方法之前，abortRequest() 函数（可在 ajaxUtil.js 文件中找到）会将 onreadystatechange 属性设置为不执行任何操作的回调。此外，删除该请求对象以避免内存泄漏，这点至关重要：

我们来考虑另一种情况：在传输要保存在数据库中的整个用户数据时，应同步发送请求，因为您可能不希望用户在保存这些数据进行时对其进行修改。在这种情况下，首选 XML 格式，这是因为在文档中进行对象模型编码通常要比使用很多字符串参数更简单。此外，保存数据的请求并不频繁，服务器可以毫无问题地处理负载。可将 XML 文档编码为参数，这样您就可以使用 EL 语法 (${param.xml}) 在 JSP 页面中访问该文档了。以下就是发送在 XML 文档中编码的模型数据的函数：

如果需要恢复对象模型，则也可同步发送请求，从服务器检索数据。在这种情况下，服务器应当返回一个 JSON 响应，以便您可利用 eval(loadRequest.responseText) 轻松将其转换为 JavaScript 对象树：

以下两部分介绍了通常在服务器上对 XML 文档执行的操作，以及如何响应 Ajax 请求。

在服务器端处理请求

Servlet/JSP 容器分析各个 HTTP 请求并创建一个 ServletRequest 实例，该实例使您可以通过 getParameter() / getParameterValues() 获得请求参数，或通过 getInputStream() 获得请求正文。在 JSP 页面中，也可以使用 EL 语法（${param...} 和 ${paramValues...}）获得这些参数。请注意，只有在 Ajax 客户端使用了类似于 buildQueryString() 之类的实用函数，通过 application/x-www-form-urlencoded 格式来编码数据（本文前一部分有述）的情况下，才可通过 getParameter() 或 ${param...} 获得请求参数。如果在客户端上将 XML 文档或 DOM 树传递至 XMLHttpRequest 的 send() 方法，则必须在服务器端使用 ServletRequest 的 getInputStream() 方法。

数据验证。典型的 Web 应用程序会进行许多数据验证操作。多数可能的错误相当简单，例如缺少请求参数、数字格式错误等等。这些错误通常是由于用户忘记输入表单元素的值或提供了无效值引起的。Web 框架（如 JSF 和 Oracle ADF Faces）非常善于处理这些用户错误。在 Ajax 应用程序中，这些错误可以在客户端使用 JavaScript 来捕获和处理。例如，您可使用 isNaN(new Number(value)) 验证数字值是否无效。

出于安全和可靠性的考虑，应当在服务器端对数据进行重新验证，而不应想当然地认为 XML 请求格式设置正确。XML 模式是在服务器端验证复杂请求的有用工具。示例代码下载中包含了一个名为 XMLUtil 的类，它提供用于加载和使用模式文档的方法。以下代码段显示了如何初始化 SchemaFactory：

可以使用 getResourceAsStream() 查找并加载某个目录中的 XSD 文件或 CLASSPATH 中指定的 JAR：

然后，使用 SchemaFactory 实例通过 newSchema() 方法获取 Schema 对象：

您还可以使用以下方法创建 Oracle XMLSchema 对象：

接下来，您需要创建一个 DocumentBuilderFactory。如果在 CLASSPATH 中找到的是 JAXP 1.1 实现，则由 JAXP 1.2 定义的 setSchema() 方法可能会抛出 UnsupportedOperationException，此时需要将 JAXP 1.1 实现替换为 Java SE 5.0 的 JAXP 1.2 实现。在这种情况下，您仍可使用 newOracleSchema() 创建模式对象，并通过 setAttribute()方法对其进行设置：

然后，创建一个 DocumentBuilder 对象，并使用该对象验证和分析 XML 文档：

假设您要根据 portfolio.xsd 模式示例验证 XML 文档：

DataModel 类的 parsePortfolioDoc() 方法使用 XMLUtil 验证和分析 xml 参数，并返回一个 DOM 文档：

现在，您拥有了一个 DOM 树，接下来要获取形成 DOM 节点所需的数据。

提取所需信息。您可以使用 DOM API 或查询语言（如 XQuery 或 XPath）来浏览 DOM 树。Java 为 XPath 提供了标准的 API，后面会用到。XMLUtil 类创建一个具有 newXPath() 方法的 XPathFactory：

以下方法在给定的上下文中求解 XPath 表达式，返回结果值：

DataModel 的 setData() 方法使用 XPath 求解方法从组合 XML 文档提取信息：

一旦服务器端的数据模型中具备了数据，就可根据应用程序的要求对其进行处理了。然后，您必须响应 Ajax 请求。

在服务器端生成响应

将 HTML 作为 Ajax 请求的响应而返回是一种最简单的解决方案，这是因为您可以使用 JSP 语法构建标记，而 Ajax 客户端只需使用 <div> 或 <span> 元素的 innerHTML 属性在页面某处插入 HTML。但是，向 Ajax 客户端返回不带任何表示标记的数据则更为有效。您可以使用 XML 格式或 JSON。

生成 XML 响应。Java EE 提供了很多创建 XML 文档的选项：可通过 JSP 生成、通过 JAXB 从对象树创建、或利用 javax.xml.transform 生成。以下示例中的转换程序将串行化一个 DOM 树：

有这么多可在服务器端生成 XML 的标准选项和开发源框架，您唯一所要做的就是选择一个适合你的选项。但是，在客户端上，由于只能使用 DOM 来分析 XML，因此情况非常不同。某些浏览器还支持 XPath 和 XSLT。

在先前的 Ajax 文章中，您学习了如何通过 JSP 生成 XML，然后在客户端上利用 JavaScript 和 DOM 对其进行分析。另一个解决方案是使用 JSON 而非 XML 作为响应 Ajax 请求的数据格式。如前所述，JSON 字符串可通过 eval() 函数转化为 JavaScript 对象树。较之利用 JavaScript 从 DOM 树提取信息而言，这更为简单些。您所需的就是一个在服务器端生成 JSON 的良好实用类。

JSON 编码。JSONEncoder 类提供了编码文字、对象和数组的方法。结果存储在 java.lang.StringBuilder 中：

character() 方法编码单一字符：

string() 方法编码整个字符串：

literal() 方法编码 JavaScript 文字：

comma() 方法附加一个逗号字符：

deleteLastComma() 方法将移除缓冲区末尾最后一个逗号字符（如果有的话）：

startObject() 方法附加一个 { 字符，用于表示一个 JavaScript 对象的开始：

property() 方法编码 JavaScript 属性：

endObject() 方法附加一个 } 字符，用于表示一个 JavaScript 对象的结束：

startArray() 方法附加一个 [ 字符，用于表示一个 JavaScript 数组的开始：

element() 方法编码 JavaScript 数组的元素：

endArray() 方法附加一个 ] 字符，用于表示一个 JavaScript 数组的结束：

toString() 方法返回 JSON 字符串：

clear() 方法清空缓冲区：

DataModel 使用 JSONEncoder 类来编码其维护的数据：

如果提供了 xml 请求参数，则 ajaxCtrl.jsp 页面将设置模型的数据。否则，该页面会使用 ${dataModel.data} EL 表达式输出 getData() 返回的 JSON 字符串：

这个作业并未完成，因为 Ajax 客户端必须处理 JSON 数据。

在客户端处理响应

在典型的 Web 应用程序中，您使用 JSP、Web 框架和标记库在服务器端生成内容。Ajax 应用程序非常适合这种情况，因为 Web 框架（如 JavaServer Faces 和 Oracle ADF Faces）在构建 Ajax 应用程序时非常有用。然而，Ajax 和非 Ajax 应用程序之间仍然存在着明显不同。使用 Ajax 时，您必须在客户端处理数据，并用 JavaScript 动态生成内容来向用户提供数据。

如果使用 JSON 格式进行数据转换，则使用 JavaScript 提供的 eval() 函数将文本转换为对象树非常容易。如果喜欢使用 XML，则还需要执行许多其他操作，但这种格式也有其自身的优势。例如，许多类型的客户端可以使用 XML，而 JSON 只在 JavaScript 环境中易于分析。此外，在使用 XML 的情况下，可以更快地发现并修正错误，从而缩短了调试时间。

使用 JavaScript 访问 DOM 树。JavaScript 的 DOM API 非常类似于 Java 的 org.w3c.dom 程序包。主要的区别在于对属性的访问。在 JavaScript 中可直接访问属性，而 Java 将属性视为私有，您需要通过 get 和 set 方法进行访问。例如，您可通过 dom.documentElement 获得文档的根元素。

DOM 是一种低级的 API，利用它可以访问已分析文档的结构。例如，在大多数情况下您都想忽略注释，并可能不愿意拥有相邻的文本节点。来看下面这个简单示例：

您可以使用先前介绍的实用函数分析上述 XML 字符串：


您可以在 ajaxUtil.js 中找到 parse() 函数的代码；本例中，该函数返回一个 DOM 树，其根元素包含一个文本节点，其后是一条注释、另一个文本节点和一个字符数据节点。如果希望包含的文本不带注释，则必须迭代元素的子元素，连接文本和字符数据节点的值（其类型分别为 3 和 4）：

使用 DOM 时，应当构建一个小的实用函数集，以避免处理上述这些低级细节。

使用 JavaScript 生成动态内容。Web 浏览器使您可以通过文档对象访问 Web 页面的 DOM 结构。例如，您可以利用 document.getElementById(...) 非常轻松地找到一个元素。还可以创建可插入现有文档的新元素和文本节点。然而，如下所示，通过连接字符串构建 HTML 要更为简单：

通过设置由 getElementById() 返回的对象的 innerHTML 属性，可将生成的 HTML 插入空 <div> 元素中，例如：

本文的示例将 updateInfo() 函数用作回调来处理对 Ajax 请求的响应，该请求是通过 ajaxLogic.js 文件中的 sendInfoRequest 发送到服务器的。如果希望每 5 秒更新一次信息，可使用 JavaScript 的 setInterval() 函数：

一个名为 DataFeed 的类模拟服务器端的馈送。ajaxCtrl.jsp 页面调用该馈送的 getData() 方法，将响应作为 JSON 字符串返回。在客户端，updateInfo() 函数利用 eval(request.responseText) 对该 JSON 字符串进行分析，如上述代码示例中所示。

结论

在本文中，首先介绍了如何使用 URL 编码和 XML 格式从 Ajax 客户端向服务器传输数据。然后，阐释了如何通过 XML 模式验证数据、利用 XPath 提取所需信息以及在服务器端生成 XML 或 JSON 响应。最后，介绍了如何利用 JavaScript 处理 XML 和 JSON 响应，以及如何生成用于更新浏览器中 Web 页面的动态内容。

posted on 2006-08-25 09:54 Mongoose 阅读(768) 评论(0)  编辑  收藏