查看完整版本: Ajax的数据交换

Ajax的数据交换

Ajax 核心 API（即所谓的 XMLHttpRequest）的唯一用途就是发送 HTTP 请求，在 Web 浏览器与服务器之间进行数据交换。 Web 页面中运行的 JavaScript 代码，可以使用 XMLHttpRequest 将该请求参数提交至服务器端脚本，例如 Servlet  或 JSP 页面。

调用的 Servlet/JSP 将发回一个响应，其中包含了一般用于不需刷新整个页面即可更新用户查看内容的数据。此种方法在性能和可用性方面均体现出了独有的优势，因为这将降低网络通信量，而且 Web UI 的使用几乎与桌面 GUI 一样。

但是，开发这种用户界面并不简单，因为您必须在客户端上使用 JavaScript、在服务器端上使用 Java（或等效语言）实施数据交换、验证以及处理。中国自学编程网，[url]www.zxbc.cn[/url] 然而，在许多情况下，考虑到将会由此获得的益处，付出额外精力构建一个基于 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 文件都是演示如何使用该实用方法的示例。  [Page]

在客户端构建请求
将数据发送至 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.name) + \"=\"
+ escape(params.value);
}
return query;
}
假设您要编码以下参数：

var someParams = [
{ name:\"name\", value:\"John Smith\" },
{ name:\"email\", value:\"john@company.com\" },
{ name:\"phone\", value: \"(123) 456 7890\" }
];
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 请求发送至服务器。

回帖是一种美德

*** 作者被禁止或删除 内容自动屏蔽 ***