快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

和记娱乐怡情怎么样_蓝莲花网进入



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

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 :

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 ";

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

DataModel 类的 parsePortfolioDoc() 措施应用 XMLUtil 验证和阐发 xml 参数,并返回一个 DOM 文档:

private static final String SCHEMA_NAME

= "/ajaxapp/model/portfolio.xsd";

private static DocumentBuilderFactory parserFactory;

private static Document parsePortfolioDoc(String xml)

throws IOException, SAXException,

ParserConfigurationException {

synchronized (DataModel.class) {

if (parserFactory == null)

parserFactory = XMLUtil.newParserFactory(SCHEMA_NAME);

}

DocumentBuilder parser = XMLUtil.newParser(parserFactory);

InputSource in = new InputSource(new StringReader(xml));

return parser.parse(in);

}

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

提取所需信息。您可以应用 DOM API 或查询说话(如 XQuery 或 XPath)来浏览 DOM 树。Java 为 XPath 供给了标准的 API,后面会用到。XMLUtil 类创建一个具有 newXPath() 措施的 X和记娱乐怡情怎么样PathFactory:

import javax.xml.xpath.*;

...

protected static XPathFactory xpathFactory;

static {

xpathFactory = XPathFactory.newInstance();

}

public static XPath newXPath() {

return xpathFactory.newXPath();

}

以下措施在给定的高低文中求解 XPath 表达式,返回结果值:

import javax.xml.xpath.*;

import org.w3c.dom.*;

...

public static String evalToString(String expression,

Object context) throws XPathExpressionException {

return (String) newXPath().evaluate(expression, context,

XPathConstants.STRING);

}

public static boolean evalToBoolean(String expression,

Object context) throws XPathExpressionException {

return ((Boolean) newXPath().evaluate(expression, context,

XPathConstants.BOOLEAN)).booleanValue();

}

public static double evalToNumber(String expression,

Object context) throws XPathExpressionException {

return ((Double) newXPath().evaluate(expression, context,

XPathConstants.NUMBER)).doubleValue();

}

public static Node evalToNode(String expression,

Object context) throws 和记娱乐怡情怎么样XPathExpressionException {

return (Node) newXPath().evaluate(expression, context,

XPathConstants.NODE);

}

public static NodeList evalToNodeList(String expression,

Object context) throws XPathExpressionException {

return (NodeList) newXPath().evaluate(expression, context,

XPathConstants.NODESET);

}

DataModel 的 setData() 措施应用 XPath 求解措施从组合 XML 文档提守信息:

public synchronized void setData(String xml)

throws IOException, SAXException,

ParserConfigurationException,

XPathExpressionException {

try{

ArrayList stockList

= new ArrayList();

Document doc = parsePortfolioDoc(xml);

NodeList nodeList = XMLUtil.evalToNodeList(

"/portfolio/stock", doc);

for (int i = 0; i元素的 innerHTML 属性在页面某处插入 HTML。然则,向 Ajax 客户端返回不带任何和记娱乐怡情怎么样表示标记的数据则更为有效。您可以应用 XML 款式或 JSON。

天生 XML 相应。Java EE 供给了很多创建 XML 文档的选项:可经由过程 JSP 天生、经由过程 JAXB 从工具树创建、或使用 javax.xml.transform 天生。以下示例中的转换法度榜样将串行化一个 DOM 树:

import javax.xml.transform.*;

import javax.xml.transform.dom.*;

import javax.xml.transform.stream.*;

...

public static TransformerFactory serializerFctory;

static {

serializerFctory = TransformerFactory.newInstance();

}

public static void serialize(Node node, OutputStream out)

throws TransformerException {

Transform和记娱乐怡情怎么样er serializer = serializerFctory.newTransformer();

Properties serializerProps = new Properties();

serializerProps.put(OutputKeys.METHOD, "xml");

serializer.setOutputPro和记娱乐怡情怎么样perties(serializerProps);

Source source = new DOMSource(node);

Result result = new StreamResult(out);

serializer.transform(source, result);

}

有这么多可在办事器端天生 XML 的标准选项和开拓源框架,您独一所要做的便是选择一个得当你的选项。然则,在客户端上,因为只能应用 DOM 来阐发 XML,是以环境异常不合。某些浏览器还支持 XPath 和 XSLT。

在先前的 Ajax 文章中,您进修了若何经由过程 JSP 天生 XML,然后在客户端上使用 JavaScript 和 DOM 对其进行阐发。另一个办理规划是应用 JSON 而非 XML 作为相应 Ajax 哀求的数据款式。如前所述,JSON 字符串可经由过程 eval() 函数转化为 JavaScript 工具树。较之使用 JavaScript 从 DOM 树提守信息而言,这更为简单些。您所需的便是一个在办事器端天生 JSON 的优越实用类。

JSON 编码。JSONEncoder 类供给了编码翰墨、工具和数组的措施。结果存储在 java.lang.StringBuilder 中:

package ajaxapp.util;

public class JSONEncoder {

private StringBuilder buf;

public JSONEncoder() {

buf = new StringBuilder();

}

...

}

character() 措施编码单一字符:

public void character(char ch) {

switch (ch) {

case \\:

case \\":

case \\\:

buf.append(\\\);

buf.append(ch);

break;

case \ :

buf.append(\\\);

buf.append( );

break;

case \

:

buf.append(\\\);

buf.append(

);

break;

case \

:

buf.append(\\\);

buf.append(

);

break;

default:

if (ch >= 32 && ch \\\);

buf.append(u);

for (int j = 12; j >= 0; j-=4) {

int k = (((int) ch) >> j) & 0x0f;

int c = k0)

if (buf.charAt(buf.length()-1) == ,)

buf.deleteCharAt(buf.length()-1);

}

startObject() 措施附加一个 { 字符,用于表示一个 JavaScript 工具的开始:

public void startObject() {

buf.append({);

}

property() 措施编码 JavaScript 属性:

public void property(String name, Object value) {

buf.append(name);

buf.append(:);

literal(value);

comma();

}

endObject() 措施附加一个 } 字符,用于表示一个 JavaScript 工具的停止:

public void endObject() {

deleteLastComma();

buf.append(});

comma();

}

startArray() 措施附加一个 [ 字符,用于表示一个 JavaScript 数组的开始:

public void startArray() {

buf.append([);

}

element() 措施编码 JavaScript 数组的元素:

public void element(Object value) {

literal(value);

comma();

}

endArray() 措施附加一个 ] 字符,用于表示一个 JavaScript 数组的停止:

public void endArray() {

deleteLastComma();

buf.append(]);

comma();

}

toString() 措施返回 JSON 字符串:

public String toString() {

deleteLastComma();

return buf.toString();

}

clear() 措施清空缓冲区:

public void clear() {

buf.setLength(0);

}

DataModel 应用 JSONEncoder 类来编码其掩护的数据:

public synchronized String getData() {

JSONEncoder json = new JSONEncoder();

json.startArray();

for (int i = 0; i

...

...

${dataModel.data}

这个功课并未完成,由于 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,使用它可以造访已阐发文档的布局。例如,在大年夜多半环境下您都想轻忽注释,并可能不乐意拥有相邻的文本节点。来看下面这个简单示例:

var xml = "data&"

+ "";

您可以应用先前先容的实用函数阐发上述 XML 字符串:

var dom = parse(xml);

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

var element = dom.documentElement;

var childNodes = element.childNodes;

var text = "";

for (var i = 0; i ";

table += "

";

table += "Symbol";

table += "Trend";

table += "Last Price";

table += "";

for (var i = 0; i0 ? "+" : "-";

var lastPrice = new Number(share.lastPrice).toFixed(2);

table += "

";

table += "

" + symbol + "";

table += "

" + trend + "";

table += "

" + lastPrice + "";

table += "";

}

table += "";

document.getElementById("table").innerHTML = table;

}

经由过程设置由 getElementById() 返回的工具的 innerHTML 属性,可将天生的 HTML 插入空

元素中,例如:

本文的示例将 updateInfo() 函数用作回调来处置惩罚对 Ajax 哀求的相应,该哀求是经由过程 ajaxLogic.js 文件中的 sendInfoRequest 发送到办事器的。假如盼望每 5 秒更新一次信息,可应用 JavaScript 的 setInterval() 函数:

var symbols = [ ... ];

setInterval("sendInfoRequest(symbols, updateInfo)", 5000);

一个名为 DataFeed 的类模拟办事器真个馈送。ajaxCtrl.jsp 页面调用该馈送的 getData() 措施,将相应作为 JSON 字符串返回。在客户端,updateInfo() 函数使用 eval(request.responseText) 对该 JSON 字符串进行阐发,如上述代码示例中所示。

您可能还会对下面的文章感兴趣: