Обмен данными в приложениях Ajax

Единственная цель основного API Ajax (так называемого XMLHttpRequest) — отправлять HTTP-запросы для обмена данными между веб-браузером и сервером. Код JavaScript, выполняемый на веб-странице, может использовать XMLHttpRequest для отправки параметров запроса серверному сценарию, например сервлету или странице JSP. Вызывающий сервлет/JSP отправит обратно ответ, содержащий данные, которые обычно используются для обновления представления пользователя без обновления всей страницы. Этот подход предлагает уникальные преимущества с точки зрения производительности и удобства использования, поскольку сетевой трафик снижается, а веб-интерфейс почти так же удобен, как графический интерфейс настольного компьютера.

Однако разработать такой пользовательский интерфейс непросто, поскольку необходимо реализовать обмен, проверку и обработку данных с использованием JavaScript на стороне клиента и Java (или эквивалентного языка) на стороне сервера. Однако во многих случаях дополнительные усилия по созданию интерфейса на основе Ajax того стоят, учитывая те преимущества, которые будут получены.

В этой статье я представлю один из основных методов передачи данных между клиентами и серверами Ajax и сравню различия между традиционной моделью веб-приложений и моделью Ajax. Кроме того, в статье также будут рассмотрены методы обработки данных на стороне сервера и клиента.

Сначала вы научитесь использовать JavaScript для кодирования параметров объекта запроса на стороне клиента. Вы можете использовать так называемую кодировку URL (кодировка по умолчанию, используемая веб-браузерами) или включить параметры запроса в XML-документ. Сервер обработает запрос и вернет ответ, данные которого также необходимо закодировать. В этой статье рассматриваются нотация объектов JavaScript (JSON) и XML, которые являются основными вариантами формата данных ответа.

Большая часть этой статьи будет посвящена API-интерфейсам, связанным с XML, обычно используемым в приложениях Ajax. На стороне клиента XML API очень ограничен, но достаточен. В большинстве случаев все необходимые операции можно выполнить с помощью XMLHttpRequest. Кроме того, JavaScript можно использовать для анализа XML-документов и сериализации деревьев DOM в веб-браузере. На стороне сервера имеется множество API и платформ для обработки XML-документов. В этой статье описывается, как выполнять базовые задачи с помощью стандартного Java API для XML, который поддерживает XML-схему, XPath, DOM и многие другие стандарты.

Из этой статьи вы сможете узнать о лучших методах и новейших API-интерфейсах для обмена данными в приложениях Ajax. Используемый пример кода находится в трех пакетах: util, model и Feed. Классы в пакете util предоставляют методы для анализа XML, проверки на основе схемы, запросов на основе XPath, сериализации DOM и кодирования JSON. Пакет моделей содержит примеры моделей данных, которые можно инициализировать из документов XML, а затем преобразовать в формат JSON. В каталоге модели также есть пример схемы, который можно использовать для проверки XML. Классы в пакете каналов можно использовать для имитации потока данных, который каждые 5 секунд получает информацию через Ajax для обновления веб-страницы. В этой статье объясняется, как избежать утечек памяти в веб-браузере, прекратив ожидающие запросы Ajax и удалив объект XMLHttpRequest, когда вы закончите его использовать.

Примеры JSP и JavaScript включены в веб-каталог. ajaxUtil.js содержит служебные функции для отправки запросов Ajax, завершения запросов и обработки ошибок HTTP. Этот файл также содержит утилиты JavaScript для кодирования XML и URL-адресов, анализа XML и сериализации DOM. Файл ajaxCtrl.jsp действует как контроллер Ajax, получая каждый запрос Ajax, пересылая параметры в модель данных или обеспечивая обработку, а затем возвращая ответ Ajax. Остальные веб-файлы представляют собой примеры, демонстрирующие использование этого практического метода.

создать запрос на стороне клиента

для отправки данных на веб-сервер — закодировать запрос в виде строки запроса, которую можно либо добавить к URL-адресу, либо включить в тело запроса, в зависимости от используемого метода HTTP. Если вам нужно отправить сложные структуры данных, лучшим решением будет закодировать информацию в XML-документе. В этом разделе я расскажу об обоих методах.

Кодировать параметры запроса. При разработке традиционных веб-приложений вам не нужно беспокоиться о кодировании данных формы, поскольку веб-браузер делает это автоматически, когда пользователь отправляет данные. Однако в Ajax-приложении параметры запроса необходимо кодировать самостоятельно. JavaScript предоставляет очень полезную функцию escape(), которая заменяет любые символы, которые не могут быть частью URL-адреса, на %HH ​​(где HH — шестнадцатеричный код). Например, любые пробельные символы заменяются на %20.

Загруженный пример кода предоставляет служебную функцию buildQueryString(), которая объединяет параметры, полученные из массива, разделяя имя и значение каждого параметра знаком = и помещая символ & между каждой парой имя-значение:

function buildQueryString(params) {
вар запрос = "";
for (var я = 0; я запрос += (i > 0 ? "&" : "")
+ escape(params[i].name) + "="
+ escape(params[i].value);
}
обратный запрос;
}

Предположим, вы хотите закодировать следующие параметры:

var someParams = [
{ name: "name", value: "Джон Смит" },
{имя: "электронная почта", значение: " [email protected] " },
{ name:"phone", value: "(123) 456 7890" }
];

Вызов buildQueryString(someParams) приведет к получению результатов, содержащих:

name=John%[email protected]&phone=%28123%29%20456%207890;

Если вы хотите использовать метод GET, вам необходимо добавить запрос к URL-адресу после символа? При использовании POST заголовку Content-Type должно быть присвоено значение application/x-www-form-urlencoded с помощью setRequestHeader(), а строка запроса должна быть передана в метод send() XMLHttpRequest, который отправит HTTP-запрос на сервер.

Создайте XML-документ. Использование строк для создания элементов из их атрибутов и данных — это самый простой способ создания XML-документов с помощью JavaScript. Если вы примете это решение, вам понадобится служебный метод для экранирования символов &, <, >, " и:

function escapeXML(content) {
если (содержимое == не определено)
возвращаться "";
if (!content.length || !content.charAt)
содержимое = новая строка (содержимое);
вар результат = "";
длина вар = content.length;
для (вар я = 0; я <длина; я++) {
вар ch = content.charAt(i);
переключатель (ч) {
случай &:
результат += "&";
перерыв;
случай < :
результат += "< ";
перерыв;
случай >:
результат += ">";
перерыв;
случай ":
результат += """;
перерыв;
случай \:
результат += "'";
перерыв;
по умолчанию:
результат += ч;
}
}
вернуть результат;
}

Чтобы упростить задачу, потребуются некоторые дополнительные служебные методы, такие как:

function атрибут(имя, значение) {
return " " + имя + "="" + escapeXML(значение) + """;
}

В следующем примере XML-документ создается из массива объектов с тремя свойствами: символом, акциями и платной ценой:

function buildPortfolioDoc(stocks) {
var xml = "<портфолио>";
for (var i = 0; i вар акции = акции [я];
xml += "< акции ";
xml += атрибут("символ", stock.symbol);
xml += атрибут("акции", stock.shares);
xml += атрибут("paidPrice", stock.paidPrice);
xml += "";
}
xml += "";
вернуть XML;
}

Если вы предпочитаете работать с DOM, вы можете использовать API вашего веб-браузера для анализа XML и сериализации дерева DOM. В IE вы можете создать пустой документ с новым ActiveXObject("Microsoft.XMLDOM"). Затем XML можно проанализировать из строки или URL-адреса с помощью методов loadXML() или load() соответственно. В случае IE каждый узел имеет атрибут xml, который позволяет получить XML-представление узла и всех его дочерних узлов. Таким образом, вы можете проанализировать строку XML, изменить дерево DOM, а затем сериализовать DOM обратно в XML.

Браузеры Firefox и Netscape позволяют создавать пустой документ с помощью document.implementation.createDocument(...). Затем узлы DOM можно создавать с помощью createElement(), createTextNode(), createCDATASection() и т. д. Браузер Mozilla также предоставляет два API: DOMParser и XMLSerializer. API DOMParser содержит методы parseFromStream() и parseFromString(). Класс XMLSerializer имеет соответствующие методы для сериализации дерева DOM: SerializeToStream() и SerializeToString().

Следующая функция анализирует строку XML и возвращает документ DOM:

function parse(xml) {
вар дом;
пытаться{
dom = новый ActiveXObject("Microsoft.XMLDOM");
dom.async = ложь;
dom.loadXML(xml);
} поймать (ошибка) {
пытаться{
вар синтаксический анализатор = новый DOMParser();
dom = parser.parseFromString(xml, "text/xml");
удалить парсер;
} поймать (ошибка2) {
если (отладка)
alert("Разбор XML не поддерживается.");
}
}
вернуть дом;
}

Вторая функция сериализует узел DOM и все его дочерние узлы, возвращая XML в виде строки:

functionserialize(dom) {
вар xml = dom.xml;
если (xml == не определено) {
пытаться{
вар сериализатор = новый XMLSerializer();
xml = сериализатор.serializeToString(dom);
удалить сериализатор;
} поймать (ошибка) {
если (отладка)
alert("Сериализация DOM не поддерживается.");
}
}
вернуть XML;
}

Вы также можете использовать XMLHttpRequest в качестве анализатора или сериализатора. После получения ответа на Ajax-запрос от сервера ответ автоматически анализируется. Доступ к текстовой версии и дереву DOM можно получить через свойства responseText и responseXML XMLHttpRequest соответственно. Кроме того, дерево DOM автоматически сериализуется при передаче методу send().

Отправить запрос. В предыдущей статье я представил API XMLHttpRequest и служебную функцию sendHttpRequest(), которую вы можете найти в файле ajaxUtil.js в образце, предоставленном для загрузки. Эта функция принимает четыре параметра (метод HTTP, URL-адрес, массив параметров и обратный вызов), создает объект XMLHttpRequest, устанавливает его свойства и вызывает метод send(). Если указан параметр обратного вызова, запрос отправляется асинхронно, а функция обратного вызова вызывается после получения ответа. В противном случае запрос отправляется синхронно, и вы можете обработать ответ, как только sendHttpRequest() вернется.

Как видите, при использовании XMLHttpRequest необходимо сделать несколько важных выборов

. Какой метод HTTP следует использовать (GET или POST)?
Формат, используемый для кодирования параметров запроса (кодирование XML и URL-адресов обсуждалось ранее в этой статье).
Следует ли выполнять вызов синхронно (ожидая ответа) или асинхронно (с использованием обратного вызова). Формат ответа, например XML, XHTML, HTML или нотация объектов JavaScript (JSON) (обсуждается далее в этой статье). Допустим, вы хотите получить некоторую информацию о ценах на акции из канала данных и периодически обновлять эту информацию без вмешательства пользователя. В этом случае HTTP-запрос должен отправляться асинхронно, чтобы пользовательский интерфейс не блокировался во время получения информации. Параметр запроса представляет собой массив символов, которые могут быть закодированы в URL-адресе. Поскольку сервер может быть перегружен, не следует отправлять XML-документы при частых запросах. Поскольку вас интересуют только последние цены на акции, все невыполненные предыдущие запросы должны быть прекращены:

var ctrlURL = "ajaxCtrl.jsp";
вар FeedRequest = NULL

функция sendInfoRequest (символы, обратный вызов) {
если (фидреквест)
abortRequest (feedRequest);
вар параметры = новый массив ();
for (var я = 0; я < символы.длина; я++)
параметры [я] = {
имя: «символ»,
значение:символы[я]
};
FeedRequest = sendHttpRequest(
«GET», ctrlURL, параметры, обратный вызов);
}

Перед вызовом метода abort() объекта запроса функция abortRequest() (находится в файле ajaxUtil.js) устанавливает для свойства onreadystatechange обратный вызов, который ничего не делает. Кроме того, очень важно удалить объект запроса, чтобы избежать утечек памяти:

function abortRequest(request) {
функция делатьНичего() {
}
request.onreadystatechange = ничего не делать;
запрос.прервать();
удалить запрос подачи;
}

Давайте рассмотрим другой случай: при передаче всех пользовательских данных для сохранения в базе данных запрос должен отправляться синхронно, поскольку вы, вероятно, не хотите, чтобы пользователь модифицировал его во время сохранения этих данных. В этом случае предпочтительным является формат XML, поскольку зачастую проще закодировать объектную модель в документе, чем использовать множество строковых параметров. Кроме того, запросы на сохранение данных происходят нечасто и сервер без проблем справляется с нагрузкой. XML-документ можно закодировать как параметр, чтобы вы могли получить к нему доступ на странице JSP, используя синтаксис EL (${param.xml}). Вот функция, которая отправляет данные модели, закодированные в XML-документе:

function sendSaveRequest(xml) {
var params = [ { name:"xml", value:xml } ];
var saveRequest = sendHttpRequest("POST", ctrlURL, params);
если (сохранить запрос)
удалить saveRequest;
}

Если вам нужно восстановить объектную модель, вы также можете синхронно отправить запрос на получение данных с сервера. В этом случае сервер должен вернуть ответ JSON, чтобы вы могли легко преобразовать его в дерево объектов JavaScript с помощью eval(loadRequest.responseText):

function sendLoadRequest() {
вар модель = ноль;
var loadRequest = sendHttpRequest("GET", ctrlURL);
если (loadRequest) {
модель = eval(loadRequest.responseText);
удалить запрос загрузки;
}
возвратная модель;
}

В следующих двух разделах описаны операции, которые обычно выполняются с XML-документами на сервере, и способы ответа на запросы Ajax.

Обработка запросов на стороне сервера.

Контейнер Servlet/JSP анализирует каждый HTTP-запрос и создает экземпляр ServletRequest, который позволяет получить параметры запроса через getParameter()/getParameterValues() или тело запроса через getInputStream(). На страницах JSP эти параметры также можно получить с помощью синтаксиса EL (${param...} и ${paramValues...}). Обратите внимание, что передача getParameter возможна только в том случае, если Ajax-клиент использует служебную функцию вроде buildQueryString() для кодирования данных в формате application/x-www-form-urlencoded (описанном в предыдущем разделе этой статьи () или $). {param...} для получения параметров запроса. Если вы передаете XML-документ или дерево DOM методу send() XMLHttpRequest на стороне клиента, вы должны использовать метод getInputStream() ServletRequest на стороне сервера.

Проверка данных. Типичное веб-приложение выполняет множество операций проверки данных. Большинство возможных ошибок довольно простые, например, отсутствие параметров запроса, неправильный формат чисел и т. д. Эти ошибки обычно возникают из-за того, что пользователь забывает ввести значение для элемента формы или указывает недопустимое значение. Веб-фреймворки, такие как JSF и Oracle ADF Faces, очень хорошо справляются с такими ошибками пользователей. В приложениях Ajax эти ошибки можно обнаружить и обработать на стороне клиента с помощью JavaScript. Например, вы можете использовать isNaN(new Number(value)) для проверки недопустимости числового значения.

По соображениям безопасности и надежности данные должны быть повторно проверены на стороне сервера, а XML-запросы не следует считать правильно отформатированными. XML-схемы — полезный инструмент для проверки сложных запросов на стороне сервера. Загруженный пример кода включает класс XMLUtil, который предоставляет методы для загрузки и использования документов схемы. В следующем фрагменте кода показано, как инициализировать SchemaFactory:

import javax.xml.*;
импортировать javax.xml.validation.*;
...
защищенная статическая SchemaFactory SchemaFactory;
статический {
SchemaFactory = SchemaFactory.newInstance(
XMLConstants.W3C_XML_SCHEMA_NS_URI);
SchemaFactory.setErrorHandler(newErrorHandler());
}

Метод newErrorHandler() возвращает обработчик ошибок SAX:

import org.xml.sax.*;
...
общественный статический ErrorHandler newErrorHandler() {
вернуть новый ErrorHandler() {
публичное предупреждение о недействительности (SAXParseException e)
выдает SAXException {
Logger.global.warning(e.getMessage());
}

Ошибка публичной недействительности (SAXParseException e)
выдает SAXException {
бросить е;
}

Public void FatalError (SAXParseException e)
выдает SAXException {
бросить е;
}
};
}

Вы можете использовать getResourceAsStream() для поиска и загрузки файла XSD в каталоге или JAR, указанном в CLASSPATH:

public static InputStream getResourceAsStream(String name)
выдает IOException {
InputStream in = XMLUtil.class.getResourceAsStream(name);
если (в == ноль)
выбросить новое FileNotFoundException (имя);
вернуться;
}

Затем используйте экземпляр SchemaFactory для получения объекта Schema с помощью метода newSchema():

import javax.xml.validation.*;
...
общедоступная статическая схема newSchema (имя строки)
выдает IOException, SAXException {
Схема схемы;
InputStream in = getResourceAsStream (имя);
пытаться{
схема = SchemaFactory.newSchema(новый StreamSource(in));
}окончательно{
в.закрыть();
}
схема возврата;
}

Вы также можете создать объект Oracle XMLSchema, используя:

import oracle.xml.parser.schema.XMLSchema;
импортировать oracle.xml.parser.schema.XSDBuilder;
...
общедоступная статическая XMLSchema newOracleSchema (имя строки)
выдает IOException, SAXException {
схема XMLSchema;
InputStream in = getResourceAsStream (имя);
пытаться{
Конструктор XSDBuilder = новый XSDBuilder();
схема = builder.build(новый InputSource(in));
} catch (Исключение e){
выдать новое исключение SAXException(e);
}окончательно{
в.закрыть();
}
схема возврата;
}

Далее вам нужно создать DocumentBuilderFactory. Если в CLASSPATH обнаружена реализация JAXP 1.1, метод setSchema(), определенный в JAXP 1.2, может вызвать исключение UnsupportedOperationException, и в этом случае реализацию JAXP 1.1 необходимо заменить реализацией JAXP 1.2 Java SE 5.0. В этом случае вы все равно можете создать объект схемы с помощью newOracleSchema() и установить его с помощью метода setAttribute():

import javax.xml.parsers.*;
импортировать oracle.xml.jaxp.JXDocumentBuilderFactory;
...
public static DocumentBuilderFactory newParserFactory(
Строка имя_схемы) выдает IOException, SAXException {
DocumentBuilderFactory parserFactory
= DocumentBuilderFactory.newInstance();
пытаться{
parserFactory.setSchema(newSchema(schemaName));
} catch (UnsupportedOperationException e) {
если (parserFactory экземпляр JXDocumentBuilderFactory) {
parserFactory.setAttribute(
JXDocumentBuilderFactory.SCHEMA_OBJECT,
newOracleSchema(имясхемы));
}
}
вернуть parserFactory;
}

Затем создайте объект DocumentBuilder и используйте его для проверки и анализа XML-документа:

import javax.xml.parsers.*;
...
публичный статический DocumentBuilder newParser(
DocumentBuilderFactory parserFactory)
выдает ParserConfigurationException {
Парсер DocumentBuilder = parserFactory.newDocumentBuilder();
parser.setErrorHandler(newErrorHandler());
возвратный парсер;
};

Предположим, вы хотите проверить XML-документ на соответствие примеру схемы портфолио.xsd:

< xsd:schema xmlns:xsd=" http://www.w3.org/2001/XMLSchema ">

< xsd:element name="portfolio" type ="portfolioType "

< xsd:complexType name="portfolioType">

< xsd:element name="stock"
minOccurs="0" maxOccurs="неограниченный">

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

Метод parsePortfolioDoc() класса DataModel использует XMLUtil для проверки и анализа параметров xml и возврата документа DOM:

частная статическая конечная строка SCHEMA_NAME
= "/ajaxapp/model/portfolio.xsd";
частный статический DocumentBuilderFactory parserFactory;

частный статический документ parsePortfolioDoc (String xml)
выдает IOException, SAXException,
ParserConfigurationException {
синхронизировано (DataModel.class) {
если (parserFactory == ноль)
parserFactory = XMLUtil.newParserFactory(SCHEMA_NAME);
}
Анализатор DocumentBuilder = XMLUtil.newParser(parserFactory);
InputSource in = новый InputSource (новый StringReader (xml));
вернуть parser.parse(in);
}

Теперь, когда у вас есть дерево DOM, вам нужно получить данные, необходимые для формирования узлов DOM.

Извлеките необходимую информацию. Для просмотра дерева DOM можно использовать API DOM или язык запросов (например, XQuery или XPath). Java предоставляет стандартный API для XPath, который будет использоваться позже. Класс XMLUtil создает XPathFactory с помощью метода newXPath():

import javax.xml.xpath.*;
...
защищенная статическая XPathFactory xpathFactory;
статический {
xpathFactory = XPathFactory.newInstance();
}

общественный статический XPath newXPath() {
вернуть xpathFactory.newXPath();
}

Следующие методы оценивают выражение XPath в заданном контексте и возвращают результирующее значение:

import javax.xml.xpath.*;
импортировать org.w3c.dom.*;
...
public static String evalToString (строковое выражение,
Контекст объекта) выдает XPathExpressionException {
return (String) newXPath().evaluate(выражение, контекст,
XPathConstants.STRING);
}

public static boolean evalToBoolean (строковое выражение,
Контекст объекта) выдает XPathExpressionException {
return ((Boolean) newXPath().evaluate(выражение, контекст,
XPathConstants.BOOLEAN)).booleanValue();
}

public static double evalToNumber (строковое выражение,
Контекст объекта) выдает XPathExpressionException {
return ((Double) newXPath().evaluate(выражение, контекст,
XPathConstants.NUMBER)).doubleValue();
}

общедоступный статический узел evalToNode (строковое выражение,
Контекст объекта) выдает XPathExpressionException {
return (Node) newXPath().evaluate(выражение, контекст,
XPathConstants.NODE);
}

public static NodeList evalToNodeList (строковое выражение,
Контекст объекта) выдает исключение XPathExpressionException {
return (NodeList) newXPath().evaluate(выражение, контекст,
XPathConstants.NODESET);
}

Метод setData() DataModel использует метод решателя XPath для извлечения информации из объединенного XML-документа:

publicsynced void setData(String xml)
выдает IOException, SAXException,
Исключение ParserConfigurationException,
XPathExpressionException {
пытаться{
МассивСписок акцийСписок
= новый ArrayList();
Документ документа = parsePortfolioDoc(xml);
NodeList nodeList = XMLUtil.evalToNodeList(
"/портфолио/акции", документ);
for (int i = 0; i < nodeList.getLength(); i++) {
Узел node = nodeList.item(i);
StockBean запас = новый StockBean();
шток.setSymbol(
XMLUtil.evalToString("@symbol", node));
stock.setShares(
(int) XMLUtil.evalToNumber("@shares", node));
stock.setPaidPrice(
XMLUtil.evalToNumber("@paidPrice", node));
StockList.add(акции);
}
this.stockList = StockList;
} catch (Исключение e){
Logger.global.logp(Level.SEVERE, "DataModel", "setData",
е.getMessage(), е);
}
}

Как только данные станут доступны в модели данных на стороне сервера, их можно будет обрабатывать в соответствии с требованиями приложения. Затем вы должны ответить на запрос Ajax.

Генерация ответа на стороне сервера.

Возврат HTML в качестве ответа на запрос Ajax — самое простое решение, поскольку вы можете создать разметку с использованием синтаксиса JSP, а клиент Ajax просто использует элемент