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

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

    但是，开发这种用户界面并不简单，因为您必须在客户端上使用 Script、在服务器端上使用 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()，该函数可连接检索自数组的参数，通过 = 将每个参数的名称和值相分离，并将 & 字符置于每个名称-值对之间：

function buildQueryString(params) {
var query = "";
for (var i = 0; i < params.length; i++) {
query += (i > 0 ? "&" : "")
+ escape(params[i].name) + "="
+ escape(params[i].value);
    }
return query;
}

假设您要编码以下参数：

var someParams = [
{ name:"name",  value:"John Smith" },
{ name:"email", value:"[e-mail]" },
{ name:"phone", value: "[phone]" }
];

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

name=John%20Smith&email=[e-mail]&phone=%28123%29%20456%207890

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

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

function escapeXML(content) {
if (content == undefined)
return "";
if (!content.length || !content.charAt)
content = new String(content);
var result = "";
var length = content.length;
for (var i = 0; i < length; i++) {
var ch = content.charAt(i);
switch (ch) {
case '&':
result += "&";
break;
case '<':
result += "<";
break;
case '>':
result += ">";
break;
case '"':
result += """;
break;
case '\'':
result += "'";
break;
default:
result += ch;
        }
    }
return result;
}

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

function attribute(name, value) {
return " " + name + "=\"" + escapeXML(value) + "\"";
}

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

function buildPortfolioDoc(stocks) {
var xml = "";
for (var i = 0; i < stocks.length; i++) {
var stock = stocks[i];
xml += "
    如果您喜好使用 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 文档： 
function parse(xml) {
var dom;
try{
dom = new ActiveXObject("Microsoft.XMLDOM");
dom.async = false;
dom.loadXML(xml);
} catch (error) {
try{
var parser = new DOMParser();
dom = parser.parseFromString(xml, "text/xml");
delete parser;
} catch (error2) {
if (debug)
alert("XML parsing is not supported.");
        }
    }
return dom;
}

第二个函数串行化一个 DOM 节点及其所有子节点，将 XML 作为字符串返回： 
function serialize(dom) {
var xml = dom.xml;
if (xml == undefined) {
try{
var serializer = new XMLSerializer();
xml = serializer.serializeToString(dom);
delete serializer;
} catch (error) {
if (debug)
alert("DOM serialization is not supported.");
        }
    }
return xml;
}

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





【责编:Peng】
		
--------------------next---------------------