在Ajax应用程序中实现数据交换资源-CSDN文库

158 浏览量 2021-02-04 09:05:58 上传评论收藏 225KB PDF 举报

资源推荐

资源详情

资源评论

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

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()，该函数可连接检索自数组的参数，通过 = 将每个

参数的名称和值相分离，并将 & 字符置于每个名称-值对之间:

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:"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 请求发送至服务器。

创建 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 = "<portfolio>";

for (var i = 0; i < stocks.length; i++) {

var stock = stocks[i];

xml += "<stock ";

xml += attribute("symbol", stock.symbol);

xml += attribute("shares", stock.shares);

xml += attribute("paidPrice", stock.paidPrice);

xml += "";

}

xml += "</portfolio>";

return 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() 方法时自动将其串行化。

发送请求。在先前的文章中，我介绍了 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 文档。由于您只对最新的股价感兴趣，因

此应终止任何未完成的先前请求:

var ctrlURL = "ajaxCtrl.jsp";

var feedRequest = null;

function sendInfoRequest(symbols, callback) {

if (feedRequest)

abortRequest(feedRequest);

var params = new Array();

for (var i = 0; i < symbols.length; i++)

params[i] = {

name："symbol",

value:symbols[i]

};

feedRequest = sendHttpRequest(

"GET", ctrlURL, params, callback);

}

在调用请求对象的 abort() 方法之前，abortRequest() 函数(可在 ajaxUtil.js 文件中找到)会将

onreadystatechange 属性设置为不执行任何操作的回调。此外，删除该请求对象以避免内存泄漏，这点至

关重要:

function abortRequest(request) {

function doNothing() {

}

request.onreadystatechange = doNothing;

request.abort();

delete feedRequest;

}

我们来考虑另一种情况:在传输要保存在数据库中的整个用户数据时，应同步发送请求，因为您可能不希望

用户在保存这些数据进行时对其进行修改。在这种情况下，首选 XML 格式，这是因为在文档中进行对象模

型编码通常要比使用很多字符串参数更简单。此外，保存数据的请求并不频繁，服务器可以毫无问题地处理

负载。可将 XML 文档编码为参数，这样您就可以使用 EL 语法 (${param.xml}) 在 JSP 页面中访问该文档

了。以下就是发送在 XML 文档中编码的模型数据的函数:

function sendSaveRequest(xml) {

var params = [ { name:"xml", value:xml } ];

var saveRequest = sendHttpRequest("POST", ctrlURL, params);

if (saveRequest)

delete saveRequest;

}

如果需要恢复对象模型，则也可同步发送请求，从服务器检索数据。在这种情况下，服务器应当返回一个

JSON 响应，以便您可利用 eval(loadRequest.responseText) 轻松将其转换为 JavaScript 对象树:

function sendLoadRequest() {

var model = null;

var loadRequest = sendHttpRequest("GET", ctrlURL);

if (loadRequest) {

model = eval(loadRequest.responseText);

delete loadRequest;

}

return model;

}

以下两部分介绍了通常在服务器上对 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)) 验证数字值是否无效。

剩余35页未读，继续阅读

评论收藏

内容反馈

weixin_38682086

粉丝: 6
资源: 984

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

AJAX中实现交换数据

PHP+AJAX简单的数据交换实例

jsonXML——这种用于表示客户端与服务器间数据交换有效负载的格式，几乎已经成了Web services的同义词。然而，由于Ajax和REST技术的出现影响了应用程序架构，这迫使人们开始寻求`XML的替代品，如：JavaScript Object Notation（JSON）。

运用Ajax实现无跳转的数据交换

利用OPC实现VC应用程序与PLC的数据交换

VC实现非模态对话框与应用程序之间的数据交换

ajax的小的实现,小程序

Ajax高级程序设计pdf

如何使用Ajax技术开发Web应用程序

Ajax技术实现动态获取数据的树状菜单

VC实现模态对话框与应用程序之间的数据交换

利用OPC实现VC应用程序与PLC的数据交换.pdf

利用OPC实现VC应用程序与PLC的数据交换.docx

MapGIS-Model-3D-Data-SDK:MapGIS-Model-3D-Data＆SDK是一种三维数据交换格式，它是由MapGIS定义的用于多终端应用程序的开发工具。 它网格化并组织了大量的三维数据。 此外，它采用流传输模式来实现高效的分析和渲染，以实现多终端集成

基于ASP.net的SQLServer与文本应用程序数据交换的研究与实现.pdf

AJAX技术在Web应用中的研究与实现.pdf

一个简单的Ajax聊天应用程序

AJAX小程序

基于ASP.NET+XML +JSON实现的Ajax 异步数据操作程序源码例子

Ajax 和 XML 借鉴最优秀的 Ajax 应用程序

xml-micro-exchange-js：基于XML和XPath的易失性NoSQL无状态微数据源，用于Web应用程序和IoT的数据交换（node-js的实现）

利用DDE实现RSView32与VB应用程序的数据交换[整理].pdf

利用OPC实现VC应用程序与WinCC的数据交换.pdf

利用OPC实现VC应用程序与RSView32的数据交换[整理].pdf

EDA/PLD中的利用OPC实现VC应用程序与PLC的数据交换

ASP.NET AJAX深入浅出系列课程(31)：构建高性能ASP.NET AJAX应用程序

最新资源

MapGIS-Model-3D-Data-SDK:MapGIS-Model-3D-Data＆SDK是一种三维数据交换格式，它是由MapGIS定义的用于多终端应用程序的开发工具。它网格化并组织了大量的三维数据。此外，它采用流传输模式来实现高效的分析和渲染，以实现多终端集成