Ajax 核心 API（即所謂的 XMLHttpRequest）的唯一用途就是發(fā)送 HTTP 請(qǐng)求，在 Web 瀏覽器與服務(wù)器之間進(jìn)行數(shù)據(jù)交換。Web 頁面中運(yùn)行的 JavaScript 代碼，可以使用 XMLHttpRequest 將該請(qǐng)求參數(shù)提交至服務(wù)器端腳本，例如 Servlet 或 JSP 頁面。調(diào)用的 Servlet/JSP 將發(fā)回一個(gè)響應(yīng)，其中包含了一般用于不需刷新整個(gè)頁面即可更新用戶查看內(nèi)容的數(shù)據(jù)。此種方法在性能和可用性方面均體現(xiàn)出了獨(dú)有的優(yōu)勢(shì)，因?yàn)檫@將降低網(wǎng)絡(luò)通信量，而且 Web UI 的使用幾乎與桌面 GUI 一樣。

但是，開發(fā)這種用戶界面并不簡(jiǎn)單，因?yàn)槟仨氃诳蛻舳松鲜褂?JavaScript、在服務(wù)器端上使用 Java（或等效語言）實(shí)施數(shù)據(jù)交換、驗(yàn)證以及處理。然而，在許多情況下，考慮到將會(huì)由此獲得的益處，付出額外精力構(gòu)建一個(gè)基于 Ajax 的界面是值得的。

在本文中，我將介紹一種用于在 Ajax 客戶端和服務(wù)器之間傳輸數(shù)據(jù)的主要方法，并比較傳統(tǒng) Web 應(yīng)用程序模型與該 Ajax 模型的不同點(diǎn)。此外，文中還將探討在服務(wù)器端與客戶端處理數(shù)據(jù)的技巧。

首先，您將了解如何在客戶端使用 JavaScript 編碼請(qǐng)求對(duì)象的參數(shù)。您可以使用所謂的 URL 編碼（Web 瀏覽器使用的默認(rèn)編碼），或可將請(qǐng)求參數(shù)包含在 XML 文檔中。服務(wù)器將處理該請(qǐng)求，并返回一個(gè)其數(shù)據(jù)也必須進(jìn)行編碼的響應(yīng)。本文將探討 JavaScript Object Notation (JSON) 和 XML，這些都是主要的響應(yīng)數(shù)據(jù)格式選項(xiàng)。

本文的大部分內(nèi)容將主要介紹 Ajax 應(yīng)用程序中通常使用的與 XML 相關(guān)的 API。在客戶端，XML API 的作用雖非常有限，但已夠用。在多數(shù)情況下，利用 XMLHttpRequest 即可完成所有必需操作。此外，還可使用 JavaScript 在 Web 瀏覽器中分析 XML 文檔并串行化 DOM 樹。在服務(wù)器端，可用于處理 XML 文檔的 API 和框架有很多種。本文將介紹如何使用針對(duì) XML 的標(biāo)準(zhǔn) Java API 來實(shí)施基本任務(wù)，該 API 支持 XML 模式、XPath、DOM 以及許多其他標(biāo)準(zhǔn)。

通過本文，您可以了解到在 Ajax 應(yīng)用程序中實(shí)現(xiàn)數(shù)據(jù)交換所用的最佳技巧和最新的 API。其中涉及的示例代碼分別位于以下三個(gè)程序包中：util、model 和 feed。util 程序包中的類提供了用于 XML 分析、基于模式的驗(yàn)證、基于 XPath 的查詢、DOM 串行化以及 JSON 編碼的方法。model 程序包包含的示例數(shù)據(jù)模型可用于從 XML 文檔進(jìn)行初始化，然后再轉(zhuǎn)換至 JSON 格式。model 目錄中還有一個(gè) Schema 示例，可用于 XML 驗(yàn)證。feed 程序包中的類可用于模擬數(shù)據(jù)饋送，其通過 Ajax 每 5 秒檢索一次來獲得信息，以刷新 Web 頁面。本文闡釋了如何通過終止未完成的 Ajax 請(qǐng)求并在使用完 XMLHttpRequest 對(duì)象后將其刪除，避免 Web 瀏覽器的內(nèi)存泄漏。

web 目錄中包含了 JSP 和 JavaScript 示例。ajaxUtil.js 中包含了發(fā)送 Ajax 請(qǐng)求、終止請(qǐng)求以及處理 HTTP 錯(cuò)誤的實(shí)用函數(shù)。該文件還提供了可用于 XML 和 URL 編碼、XML 分析以及 DOM 串行化的 JavaScript 實(shí)用程序。ajaxCtrl.jsp 文件充當(dāng) Ajax 控制器，接收每一個(gè) Ajax 請(qǐng)求、轉(zhuǎn)發(fā)參數(shù)至數(shù)據(jù)模型，或供給處理，然后返回 Ajax 響應(yīng)。其余的 Web 文件都是演示如何使用該實(shí)用方法的示例。

在客戶端構(gòu)建請(qǐng)求

將數(shù)據(jù)發(fā)送至 Web 服務(wù)器的最簡(jiǎn)單方法是將請(qǐng)求編碼為查詢字符串，該字符串根據(jù)使用的 HTTP 方法，既可附加至 URL，也可包含在請(qǐng)求正文中。如果需要發(fā)送復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，更好的解決方案是將信息編碼在 XML 文檔中。我將在本部分中介紹這兩種方法。

編碼請(qǐng)求參數(shù)。開發(fā)傳統(tǒng) Web 應(yīng)用程序時(shí)，無需擔(dān)心表單數(shù)據(jù)的編碼，因?yàn)?Web 瀏覽器會(huì)在用戶提交數(shù)據(jù)時(shí)自動(dòng)執(zhí)行該操作。但是，在 Ajax 應(yīng)用程序中，您必須親自編碼請(qǐng)求參數(shù)。JavaScript 提供了一個(gè)非常有用的函數(shù) escape()，該函數(shù)用 %HH（其中 HH 是十六進(jìn)制代碼）替換任何無法成為 URL 一部分的字符。例如，任何空白字符都用 %20 替換。

示例代碼下載中提供了一個(gè)實(shí)用函數(shù) buildQueryString()，該函數(shù)可連接檢索自數(shù)組的參數(shù)，通過 = 將每個(gè)參數(shù)的名稱和值相分離，并將 & 字符置于每個(gè)名稱-值對(duì)之間：

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

假設(shè)您要編碼以下參數(shù)：

var someParams = [{ name:"name",  value:"John Smith" },{ name:"email", value:"john@company.com" },{ name:"phone", value: "(123) 456 7890" }];

buildQueryString(someParams) 調(diào)用將生成包含以下內(nèi)容的結(jié)果：

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

如果希望使用 GET 方法，則必須將查詢附加至 URL 的 ? 字符之后。使用 POST 時(shí)，應(yīng)通過 setRequestHeader() 將 Content-Type 標(biāo)題設(shè)置為 application/x-www-form-urlencoded，且必須將該查詢字符串傳遞至 XMLHttpRequest 的 send() 方法，這會(huì)將該 HTTP 請(qǐng)求發(fā)送至服務(wù)器。

創(chuàng)建 XML 文檔。利用字符串通過其屬性和數(shù)據(jù)構(gòu)建元素是用 JavaScript 創(chuàng)建 XML 文檔最簡(jiǎn)單的方法。如果采用這種解決方案，則需要一個(gè)實(shí)用方法來轉(zhuǎn)義 &、<、>、"、以及 ' 字符：

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

要使任務(wù)更為簡(jiǎn)單，還需要一些其他實(shí)用程序方法，例如：

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

以下示例從一個(gè)具有以下三個(gè)屬性的對(duì)象的數(shù)組構(gòu)建一個(gè) 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") 創(chuàng)建一個(gè)空文檔。然后，可以使用 loadXML() 或 load() 方法分別從字符串或 URL 分析該 XML。在使用 IE 的情況下，每個(gè)節(jié)點(diǎn)都有一個(gè)稱為 xml 的屬性，您可以利用它獲得該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)的 XML 表示。因此，您可以分析 XML 字符串、修改 DOM 樹，然后將該 DOM 串行化回 XML。

Firefox 和 Netscape 瀏覽器允許您使用 document.implementation.createDocument(...) 創(chuàng)建一個(gè)空文檔。然后，可以使用 createElement()、createTextNode()、createCDATASection() 等創(chuàng)建 DOM 節(jié)點(diǎn)。Mozilla 瀏覽器還提供了兩個(gè)分別名為 DOMParser 和 XMLSerializer 的 API。DOMParser API 包含 parseFromStream() 和 parseFromString() 方法。XMLSerializer 類具有串行化 DOM 樹的相應(yīng)方法：serializeToStream() 和 serializeToString()。

以下函數(shù)分析一個(gè) 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;}

第二個(gè)函數(shù)串行化一個(gè) DOM 節(jié)點(diǎn)及其所有子節(jié)點(diǎn)，將 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 作為分析程序或串行化程序。在從服務(wù)器接收到對(duì) Ajax 請(qǐng)求的響應(yīng)后，該響應(yīng)會(huì)自動(dòng)進(jìn)行分析。可通過 XMLHttpRequest 的 responseText 和 responseXML 屬性分別訪問文本版本和 DOM 樹。此外，在將 DOM 樹傳遞至 send() 方法時(shí)自動(dòng)將其串行化。

發(fā)送請(qǐng)求。在先前的文章中，我介紹了 XMLHttpRequest API 和一個(gè)實(shí)用函數(shù) sendHttpRequest()，您可以在提供下載的示例中的 ajaxUtil.js 文件中找到。該函數(shù)有四個(gè)參數(shù)（HTTP 方法、URL、一個(gè)參數(shù)數(shù)組和一個(gè)回調(diào)），可創(chuàng)建 XMLHttpRequest 對(duì)象，設(shè)置其屬性并調(diào)用 send() 方法。如果提供了回調(diào)參數(shù)，則異步發(fā)送請(qǐng)求，并在收到響應(yīng)后調(diào)用回調(diào)函數(shù)。否則，將同步發(fā)送請(qǐng)求，您可以在 sendHttpRequest() 返回后即刻處理響應(yīng)。

如您所見，在使用 XMLHttpRequest 時(shí)必須進(jìn)行一些重要選擇

• 將要使用的 HTTP 方法（GET 或 POST）
• 用于編碼請(qǐng)求參數(shù)的格式（本文前面已探討了 XML 和 URL 編碼）
• 是進(jìn)行同步（等待響應(yīng)）調(diào)用還是異步（使用回調(diào)）調(diào)用
• 響應(yīng)的格式，如 XML、XHTML、HTML 或 JavaScript Object Notation (JSON)（本文稍后將對(duì)此進(jìn)行探討）。

假設(shè)您希望從數(shù)據(jù)饋送了解一些股價(jià)信息，且無需用戶干預(yù)即可定期刷新信息。在本例中，應(yīng)異步發(fā)送 HTTP 請(qǐng)求，這是為了在檢索信息時(shí)不阻塞用戶界面。請(qǐng)求參數(shù)是一個(gè)符號(hào)數(shù)組，可在 URL 中進(jìn)行編碼。由于服務(wù)器可能超載，因此您不希望在進(jìn)行頻繁請(qǐng)求時(shí)發(fā)送 XML 文檔。由于您只對(duì)最新的股價(jià)感興趣，因此應(yīng)終止任何未完成的先前請(qǐng)求：

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);}

在調(diào)用請(qǐng)求對(duì)象的 abort() 方法之前，abortRequest() 函數(shù)（可在 ajaxUtil.js 文件中找到）會(huì)將 onreadystatechange 屬性設(shè)置為不執(zhí)行任何操作的回調(diào)。此外，刪除該請(qǐng)求對(duì)象以避免內(nèi)存泄漏，這點(diǎn)至關(guān)重要：

function abortRequest(request) {function doNothing() {    }request.onreadystatechange = doNothing;request.abort();delete feedRequest;}

我們來考慮另一種情況：在傳輸要保存在數(shù)據(jù)庫中的整個(gè)用戶數(shù)據(jù)時(shí)，應(yīng)同步發(fā)送請(qǐng)求，因?yàn)槟赡懿幌Ｍ脩粼诒４孢@些數(shù)據(jù)進(jìn)行時(shí)對(duì)其進(jìn)行修改。在這種情況下，首選 XML 格式，這是因?yàn)樵谖臋n中進(jìn)行對(duì)象模型編碼通常要比使用很多字符串參數(shù)更簡(jiǎn)單。此外，保存數(shù)據(jù)的請(qǐng)求并不頻繁，服務(wù)器可以毫無問題地處理負(fù)載?？蓪?XML 文檔編碼為參數(shù)，這樣您就可以使用 EL 語法 (${param.xml}) 在 JSP 頁面中訪問該文檔了。以下就是發(fā)送在 XML 文檔中編碼的模型數(shù)據(jù)的函數(shù)：

function sendSaveRequest(xml) {var params = [ { name:"xml", value:xml } ];var saveRequest = sendHttpRequest("POST", ctrlURL, params);if (saveRequest)delete saveRequest;}

如果需要恢復(fù)對(duì)象模型，則也可同步發(fā)送請(qǐng)求，從服務(wù)器檢索數(shù)據(jù)。在這種情況下，服務(wù)器應(yīng)當(dāng)返回一個(gè) JSON 響應(yīng)，以便您可利用 eval(loadRequest.responseText) 輕松將其轉(zhuǎn)換為 JavaScript 對(duì)象樹：

function sendLoadRequest() {var model = null;var loadRequest = sendHttpRequest("GET", ctrlURL);if (loadRequest) {model = eval(loadRequest.responseText);delete loadRequest;    }return model;}

以下兩部分介紹了通常在服務(wù)器上對(duì) XML 文檔執(zhí)行的操作，以及如何響應(yīng) Ajax 請(qǐng)求。

在服務(wù)器端處理請(qǐng)求

Servlet/JSP 容器分析各個(gè) HTTP 請(qǐng)求并創(chuàng)建一個(gè) ServletRequest 實(shí)例，該實(shí)例使您可以通過 getParameter() / getParameterValues() 獲得請(qǐng)求參數(shù)，或通過 getInputStream() 獲得請(qǐng)求正文。在 JSP 頁面中，也可以使用 EL 語法（${param...} 和 ${paramValues...}）獲得這些參數(shù)。請(qǐng)注意，只有在 Ajax 客戶端使用了類似于 buildQueryString() 之類的實(shí)用函數(shù)，通過 application/x-www-form-urlencoded 格式來編碼數(shù)據(jù)（本文前一部分有述）的情況下，才可通過 getParameter() 或 ${param...} 獲得請(qǐng)求參數(shù)。如果在客戶端上將 XML 文檔或 DOM 樹傳遞至 XMLHttpRequest 的 send() 方法，則必須在服務(wù)器端使用 ServletRequest 的 getInputStream() 方法。

數(shù)據(jù)驗(yàn)證。典型的 Web 應(yīng)用程序會(huì)進(jìn)行許多數(shù)據(jù)驗(yàn)證操作。多數(shù)可能的錯(cuò)誤相當(dāng)簡(jiǎn)單，例如缺少請(qǐng)求參數(shù)、數(shù)字格式錯(cuò)誤等等。這些錯(cuò)誤通常是由于用戶忘記輸入表單元素的值或提供了無效值引起的。Web 框架（如 JSF 和 Oracle ADF Faces）非常善于處理這些用戶錯(cuò)誤。在 Ajax 應(yīng)用程序中，這些錯(cuò)誤可以在客戶端使用 JavaScript 來捕獲和處理。例如，您可使用 isNaN(new Number(value)) 驗(yàn)證數(shù)字值是否無效。

出于安全和可靠性的考慮，應(yīng)當(dāng)在服務(wù)器端對(duì)數(shù)據(jù)進(jìn)行重新驗(yàn)證，而不應(yīng)想當(dāng)然地認(rèn)為 XML 請(qǐng)求格式設(shè)置正確。XML 模式是在服務(wù)器端驗(yàn)證復(fù)雜請(qǐng)求的有用工具。示例代碼下載中包含了一個(gè)名為 XMLUtil 的類，它提供用于加載和使用模式文檔的方法。以下代碼段顯示了如何初始化 SchemaFactory：

import javax.xml.*;import javax.xml.validation.*;...protected static SchemaFactory schemaFactory;static {schemaFactory = SchemaFactory.newInstance(XMLConstants.W3C_XML_SCHEMA_NS_URI);schemaFactory.setErrorHandler(newErrorHandler());}The newErrorHandler() method returns a SAX error handler:import org.xml.sax.*;...public static ErrorHandler newErrorHandler() {return new ErrorHandler() {public void warning(SAXParseException e)throws SAXException {Logger.global.warning(e.getMessage());        }public void error(SAXParseException e)throws SAXException {throw e;        }public void fatalError(SAXParseException e)throws SAXException {throw e;        }    };}

可以使用 getResourceAsStream() 查找并加載某個(gè)目錄中的 XSD 文件或 CLASSPATH 中指定的 JAR：

public static InputStream getResourceAsStream(String name)throws IOException {InputStream in = XMLUtil.class.getResourceAsStream(name);if (in == null)throw new FileNotFoundException(name);return in;}

然后，使用 SchemaFactory 實(shí)例通過 newSchema() 方法獲取 Schema 對(duì)象：

import javax.xml.validation.*;...public static Schema newSchema(String name)throws IOException, SAXException {Schema schema;InputStream in = getResourceAsStream(name);try{schema = schemaFactory.newSchema(new StreamSource(in));}finally{in.close();    }return schema;}

您還可以使用以下方法創(chuàng)建 Oracle XMLSchema 對(duì)象：

import oracle.xml.parser.schema.XMLSchema;import oracle.xml.parser.schema.XSDBuilder;...public static XMLSchema newOracleSchema(String name)throws IOException, SAXException {XMLSchema schema;InputStream in = getResourceAsStream(name);try{XSDBuilder builder = new XSDBuilder();schema = builder.build(new InputSource(in));} catch (Exception e){throw new SAXException(e);}finally{in.close();    }return schema;}

接下來，您需要?jiǎng)?chuàng)建一個(gè) DocumentBuilderFactory。如果在 CLASSPATH 中找到的是 JAXP 1.1 實(shí)現(xiàn)，則由 JAXP 1.2 定義的 setSchema() 方法可能會(huì)拋出 UnsupportedOperationException，此時(shí)需要將 JAXP 1.1 實(shí)現(xiàn)替換為 Java SE 5.0 的 JAXP 1.2 實(shí)現(xiàn)。在這種情況下，您仍可使用 newOracleSchema() 創(chuàng)建模式對(duì)象，并通過 setAttribute()方法對(duì)其進(jìn)行設(shè)置：

import javax.xml.parsers.*;import oracle.xml.jaxp.JXDocumentBuilderFactory;...public static DocumentBuilderFactory newParserFactory(String schemaName) throws IOException, SAXException {DocumentBuilderFactory parserFactory= DocumentBuilderFactory.newInstance();try{parserFactory.setSchema(newSchema(schemaName));} catch (UnsupportedOperationException e) {if (parserFactory instanceof JXDocumentBuilderFactory) {parserFactory.setAttribute(JXDocumentBuilderFactory.SCHEMA_OBJECT,newOracleSchema(schemaName));        }    }return parserFactory;}

然后，創(chuàng)建一個(gè) DocumentBuilder 對(duì)象，并使用該對(duì)象驗(yàn)證和分析 XML 文檔：

import javax.xml.parsers.*;...public static DocumentBuilder newParser(DocumentBuilderFactory parserFactory)throws ParserConfigurationException {DocumentBuilder parser = parserFactory.newDocumentBuilder();parser.setErrorHandler(newErrorHandler());return parser;};

假設(shè)您要根據(jù) portfolio.xsd 模式示例驗(yàn)證 XML 文檔：

<xsd:schema xmlns:xsd="http://www./2001/XMLSchema"><xsd:element name="portfolio" type="portfolioType"<xsd:complexType name="portfolioType"><xsd:sequence><xsd:element name="stock"minOccurs="0" maxOccurs="unbounded"><xsd:complexType><xsd:attribute name="symbol"type="xsd:string" use="required"/><xsd:attribute name="shares"type="xsd:positiveInteger" use="required"/><xsd:attribute name="paidPrice"type="xsd:decimal" use="required"/></xsd:complexType></xsd:element></xsd:sequence></xsd:complexType></xsd:schema>

DataModel 類的 parsePortfolioDoc() 方法使用 XMLUtil 驗(yàn)證和分析 xml 參數(shù)，并返回一個(gè) 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);}

現(xiàn)在，您擁有了一個(gè) DOM 樹，接下來要獲取形成 DOM 節(jié)點(diǎn)所需的數(shù)據(jù)。

提取所需信息。您可以使用 DOM API 或查詢語言（如 XQuery 或 XPath）來瀏覽 DOM 樹。Java 為 XPath 提供了標(biāo)準(zhǔn)的 API，后面會(huì)用到。XMLUtil 類創(chuàng)建一個(gè)具有 newXPath() 方法的 XPathFactory：

import javax.xml.xpath.*;...protected static XPathFactory xpathFactory;static {xpathFactory = XPathFactory.newInstance();}    public static XPath newXPath() {return xpathFactory.newXPath();}

以下方法在給定的上下文中求解 XPath 表達(dá)式，返回結(jié)果值：

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 < nodeList.getLength(); i++) {Node node = nodeList.item(i);StockBean stock = new StockBean();stock.setSymbol(XMLUtil.evalToString("@symbol", node));stock.setShares((int) XMLUtil.evalToNumber("@shares", node));stock.setPaidPrice(XMLUtil.evalToNumber("@paidPrice", node));stockList.add(stock);        }this.stockList = stockList;} catch (Exception e){Logger.global.logp(Level.SEVERE, "DataModel", "setData",e.getMessage(), e);    }}

一旦服務(wù)器端的數(shù)據(jù)模型中具備了數(shù)據(jù)，就可根據(jù)應(yīng)用程序的要求對(duì)其進(jìn)行處理了。然后，您必須響應(yīng) Ajax 請(qǐng)求。

在服務(wù)器端生成響應(yīng)

將 HTML 作為 Ajax 請(qǐng)求的響應(yīng)而返回是一種最簡(jiǎn)單的解決方案，這是因?yàn)槟梢允褂?JSP 語法構(gòu)建標(biāo)記，而 Ajax 客戶端只需使用 <div> 或 <span> 元素的 innerHTML 屬性在頁面某處插入 HTML。但是，向 Ajax 客戶端返回不帶任何表示標(biāo)記的數(shù)據(jù)則更為有效。您可以使用 XML 格式或 JSON。

生成 XML 響應(yīng)。Java EE 提供了很多創(chuàng)建 XML 文檔的選項(xiàng)：可通過 JSP 生成、通過 JAXB 從對(duì)象樹創(chuàng)建、或利用 javax.xml.transform 生成。以下示例中的轉(zhuǎn)換程序?qū)⒋谢粋€(gè) 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 {Transformer serializer = serializerFctory.newTransformer();Properties serializerProps = new Properties();serializerProps.put(OutputKeys.METHOD, "xml");serializer.setOutputProperties(serializerProps);Source source = new DOMSource(node);Result result = new StreamResult(out);serializer.transform(source, result);}

有這么多可在服務(wù)器端生成 XML 的標(biāo)準(zhǔn)選項(xiàng)和開發(fā)源框架，您唯一所要做的就是選擇一個(gè)適合你的選項(xiàng)。但是，在客戶端上，由于只能使用 DOM 來分析 XML，因此情況非常不同。某些瀏覽器還支持 XPath 和 XSLT。

在先前的 Ajax 文章中，您學(xué)習(xí)了如何通過 JSP 生成 XML，然后在客戶端上利用 JavaScript 和 DOM 對(duì)其進(jìn)行分析。另一個(gè)解決方案是使用 JSON 而非 XML 作為響應(yīng) Ajax 請(qǐng)求的數(shù)據(jù)格式。如前所述，JSON 字符串可通過 eval() 函數(shù)轉(zhuǎn)化為 JavaScript 對(duì)象樹。較之利用 JavaScript 從 DOM 樹提取信息而言，這更為簡(jiǎn)單些。您所需的就是一個(gè)在服務(wù)器端生成 JSON 的良好實(shí)用類。

JSON 編碼。JSONEncoder 類提供了編碼文字、對(duì)象和數(shù)組的方法。結(jié)果存儲(chǔ)在 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 '\t':buf.append('\\');buf.append('t');break;case '\r':buf.append('\\');buf.append('r');break;case '\n':buf.append('\\');buf.append('n');break;default:if (ch >= 32 && ch < 128)buf.append(ch);else{buf.append('\\');buf.append('u');for (int j = 12; j >= 0; j-=4) {int k = (((int) ch) >> j) & 0x0f;int c = k < 10 ?'0' + k :'a' + k - 10;buf.append((char) c);                }            }    }}

string() 方法編碼整個(gè)字符串：

public void string(String str) {int length = str.length();for (int i = 0; i < length; i++)character(str.charAt(i));}

literal() 方法編碼 JavaScript 文字：

public void literal(Object value) {if (value instanceof String) {buf.append('"');string((String) value);buf.append('"');} else if (value instanceof Character) {buf.append('\'');character(((Character) value).charValue());buf.append('\'');} elsebuf.append(value.toString());}

comma() 方法附加一個(gè)逗號(hào)字符：

private void comma() {buf.append(',');}

deleteLastComma() 方法將移除緩沖區(qū)末尾最后一個(gè)逗號(hào)字符（如果有的話）：

private void deleteLastComma() {if (buf.length() > 0)if (buf.charAt(buf.length()-1) == ',')buf.deleteCharAt(buf.length()-1);}

startObject() 方法附加一個(gè) { 字符，用于表示一個(gè) JavaScript 對(duì)象的開始：

public void startObject() {buf.append('{');}

property() 方法編碼 JavaScript 屬性：

public void property(String name, Object value) {buf.append(name);buf.append(':');literal(value);comma();}

endObject() 方法附加一個(gè) } 字符，用于表示一個(gè) JavaScript 對(duì)象的結(jié)束：

public void endObject() {deleteLastComma();buf.append('}');comma();}

startArray() 方法附加一個(gè) [ 字符，用于表示一個(gè) JavaScript 數(shù)組的開始：

public void startArray() {buf.append('[');}

element() 方法編碼 JavaScript 數(shù)組的元素：

public void element(Object value) {literal(value);comma();}

endArray() 方法附加一個(gè) ] 字符，用于表示一個(gè) JavaScript 數(shù)組的結(jié)束：

public void endArray() {deleteLastComma();buf.append(']');comma();}

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

public String toString() {deleteLastComma();return buf.toString();}

clear() 方法清空緩沖區(qū)：

public void clear() {buf.setLength(0);}

DataModel 使用 JSONEncoder 類來編碼其維護(hù)的數(shù)據(jù)：

public synchronized String getData() {JSONEncoder json = new JSONEncoder();json.startArray();for (int i = 0; i < stockList.size(); i++) {StockBean stock = stockList.get(i);json.startObject();json.property("symbol", stock.getSymbol());json.property("shares", stock.getShares());json.property("paidPrice", stock.getPaidPrice());json.endObject();    }json.endArray();return json.toString();}

如果提供了 xml 請(qǐng)求參數(shù)，則 ajaxCtrl.jsp 頁面將設(shè)置模型的數(shù)據(jù)。否則，該頁面會(huì)使用 ${dataModel.data} EL 表達(dá)式輸出 getData() 返回的 JSON 字符串：

<%@ taglib prefix="c" uri="http://java./jsp/jstl/core" %>...<jsp:useBean id="dataModel" scope="session"class="ajaxapp.model.DataModel" /><c:choose>    ...<c:when test="${!empty param.xml}"><c:set target="${dataModel}" property="data" value="${param.xml}" /></c:when><c:otherwise>${dataModel.data}</c:otherwise></c:choose>

這個(gè)作業(yè)并未完成，因?yàn)?Ajax 客戶端必須處理 JSON 數(shù)據(jù)。

在客戶端處理響應(yīng)

在典型的 Web 應(yīng)用程序中，您使用 JSP、Web 框架和標(biāo)記庫在服務(wù)器端生成內(nèi)容。Ajax 應(yīng)用程序非常適合這種情況，因?yàn)?Web 框架（如 JavaServer Faces 和 Oracle ADF Faces）在構(gòu)建 Ajax 應(yīng)用程序時(shí)非常有用。然而，Ajax 和非 Ajax 應(yīng)用程序之間仍然存在著明顯不同。使用 Ajax 時(shí)，您必須在客戶端處理數(shù)據(jù)，并用 JavaScript 動(dòng)態(tài)生成內(nèi)容來向用戶提供數(shù)據(jù)。

如果使用 JSON 格式進(jìn)行數(shù)據(jù)轉(zhuǎn)換，則使用 JavaScript 提供的 eval() 函數(shù)將文本轉(zhuǎn)換為對(duì)象樹非常容易。如果喜歡使用 XML，則還需要執(zhí)行許多其他操作，但這種格式也有其自身的優(yōu)勢(shì)。例如，許多類型的客戶端可以使用 XML，而 JSON 只在 JavaScript 環(huán)境中易于分析。此外，在使用 XML 的情況下，可以更快地發(fā)現(xiàn)并修正錯(cuò)誤，從而縮短了調(diào)試時(shí)間。

使用 JavaScript 訪問 DOM 樹。JavaScript 的 DOM API 非常類似于 Java 的 org.w3c.dom 程序包。主要的區(qū)別在于對(duì)屬性的訪問。在 JavaScript 中可直接訪問屬性，而 Java 將屬性視為私有，您需要通過 get 和 set 方法進(jìn)行訪問。例如，您可通過 dom.documentElement 獲得文檔的根元素。

DOM 是一種低級(jí)的 API，利用它可以訪問已分析文檔的結(jié)構(gòu)。例如，在大多數(shù)情況下您都想忽略注釋，并可能不愿意擁有相鄰的文本節(jié)點(diǎn)。來看下面這個(gè)簡(jiǎn)單示例：

var xml = "<element>da<!--comment-->ta&"+ "<![CDATA[cdata</element>";

您可以使用先前介紹的實(shí)用函數(shù)分析上述 XML 字符串：

var dom = parse(xml);

您可以在 ajaxUtil.js 中找到 parse() 函數(shù)的代碼；本例中，該函數(shù)返回一個(gè) DOM 樹，其根元素包含一個(gè)文本節(jié)點(diǎn)，其后是一條注釋、另一個(gè)文本節(jié)點(diǎn)和一個(gè)字符數(shù)據(jù)節(jié)點(diǎn)。如果希望包含的文本不帶注釋，則必須迭代元素的子元素，連接文本和字符數(shù)據(jù)節(jié)點(diǎn)的值（其類型分別為 3 和 4）：

var element = dom.documentElement;var childNodes = element.childNodes;var text = "";for (var i = 0; i < childNodes.length; i++)if (childNodes[i].nodeValue) {var type = childNodes[i].nodeType;if (type == 3 || type == 4)text += childNodes[i].nodeValue;    }

使用 DOM 時(shí)，應(yīng)當(dāng)構(gòu)建一個(gè)小的實(shí)用函數(shù)集，以避免處理上述這些低級(jí)細(xì)節(jié)。

使用 JavaScript 生成動(dòng)態(tài)內(nèi)容。Web 瀏覽器使您可以通過文檔對(duì)象訪問 Web 頁面的 DOM 結(jié)構(gòu)。例如，您可以利用 document.getElementById(...) 非常輕松地找到一個(gè)元素。還可以創(chuàng)建可插入現(xiàn)有文檔的新元素和文本節(jié)點(diǎn)。然而，如下所示，通過連接字符串構(gòu)建 HTML 要更為簡(jiǎn)單：

function updateInfo(request) {var shares = eval(request.responseText);var table = "<table border=1 cellpadding=5>";table += "<tr>";table += "<th>Symbol</th>";table += "<th>Trend</th>";table += "<th>Last Price</th>";table += "</tr>";for (var i = 0; i < shares.length; i++) {var share = shares[i];var symbol = escapeXML(share.symbol)var trend = share.trend > 0 ? "+" : "-";var lastPrice = new Number(share.lastPrice).toFixed(2);table += "<tr>";table += "<td>" + symbol + "</td>";table += "<td>" + trend + "</td>";table += "<td>" + lastPrice + "</td>";table += "</tr>";    }table += "</table>";document.getElementById("table").innerHTML = table;}

通過設(shè)置由 getElementById() 返回的對(duì)象的 innerHTML 屬性，可將生成的 HTML 插入空 <div> 元素中，例如：

<div id="table"></div>

本文的示例將 updateInfo() 函數(shù)用作回調(diào)來處理對(duì) Ajax 請(qǐng)求的響應(yīng)，該請(qǐng)求是通過 ajaxLogic.js 文件中的 sendInfoRequest 發(fā)送到服務(wù)器的。如果希望每 5 秒更新一次信息，可使用 JavaScript 的 setInterval() 函數(shù)：

var symbols = [ ... ];setInterval("sendInfoRequest(symbols, updateInfo)", 5000);

一個(gè)名為 DataFeed 的類模擬服務(wù)器端的饋送。ajaxCtrl.jsp 頁面調(diào)用該饋送的 getData() 方法，將響應(yīng)作為 JSON 字符串返回。在客戶端，updateInfo() 函數(shù)利用 eval(request.responseText) 對(duì)該 JSON 字符串進(jìn)行分析，如上述代碼示例中所示。

結(jié)論

在本文中，首先介紹了如何使用 URL 編碼和 XML 格式從 Ajax 客戶端向服務(wù)器傳輸數(shù)據(jù)。然后，闡釋了如何通過 XML 模式驗(yàn)證數(shù)據(jù)、利用 XPath 提取所需信息以及在服務(wù)器端生成 XML 或 JSON 響應(yīng)。最后，介紹了如何利用 JavaScript 處理 XML 和 JSON 響應(yīng)，以及如何生成用于更新瀏覽器中 Web 頁面的動(dòng)態(tài)內(nèi)容。