Trocar dados em aplicativos Ajax

O único propósito da API principal do Ajax (chamada XMLHttpRequest) é enviar solicitações HTTP para troca de dados entre o navegador da Web e o servidor. O código JavaScript executado em uma página da Web pode usar XMLHttpRequest para enviar os parâmetros de solicitação a um script do lado do servidor, como um Servlet ou uma página JSP. O Servlet/JSP chamador enviará de volta uma resposta que contém dados normalmente usados ​​para atualizar a visualização do usuário sem atualizar a página inteira. Essa abordagem oferece vantagens exclusivas em termos de desempenho e usabilidade porque o tráfego de rede é reduzido e a UI da Web é quase tão utilizável quanto a GUI do desktop.

No entanto, desenvolver tal interface de usuário não é simples, pois é necessário implementar troca, validação e processamento de dados usando JavaScript no lado do cliente e Java (ou linguagem equivalente) no lado do servidor. Porém, em muitos casos, o esforço extra para construir uma interface baseada em Ajax vale a pena, considerando os benefícios que serão obtidos.

Neste artigo, apresentarei um dos principais métodos para transferência de dados entre clientes e servidores Ajax e compararei as diferenças entre o modelo de aplicativo Web tradicional e o modelo Ajax. Além disso, o artigo também explorará técnicas de processamento de dados no lado do servidor e no lado do cliente.

Primeiro, você aprenderá como usar JavaScript para codificar os parâmetros de um objeto de solicitação no lado do cliente. Você pode usar a chamada codificação de URL (a codificação padrão usada pelos navegadores da web) ou pode incluir os parâmetros de solicitação no documento XML. O servidor processará a solicitação e retornará uma resposta cujos dados também deverão ser codificados. Este artigo explora JavaScript Object Notation (JSON) e XML, que são as principais opções de formato de dados de resposta.

A maior parte deste artigo se concentrará em APIs relacionadas a XML comumente usadas em aplicativos Ajax. Do lado do cliente, a API XML é muito limitada, mas suficiente. Na maioria dos casos, todas as operações necessárias podem ser realizadas usando XMLHttpRequest. Além disso, o JavaScript pode ser usado para analisar documentos XML e serializar árvores DOM em um navegador da Web. No lado do servidor, existem muitas APIs e estruturas disponíveis para processamento de documentos XML. Este artigo descreve como executar tarefas básicas usando a API Java padrão para XML, que suporta XML Schema, XPath, DOM e muitos outros padrões.

Através deste artigo, você poderá aprender sobre as melhores técnicas e as APIs mais recentes para troca de dados em aplicações Ajax. O código de amostra envolvido está em três pacotes: util, model e feed. As classes no pacote utilitário fornecem métodos para análise XML, validação baseada em esquema, consulta baseada em XPath, serialização DOM e codificação JSON. O pacote de modelo contém modelos de dados de amostra que podem ser inicializados a partir de documentos XML e depois convertidos para o formato JSON. Há também um exemplo de esquema no diretório do modelo que pode ser usado para validação XML. As classes do pacote feed podem ser usadas para simular um feed de dados, que recupera informações via Ajax a cada 5 segundos para atualizar a página da Web. Este artigo explica como evitar vazamentos de memória em seu navegador da Web encerrando solicitações Ajax pendentes e excluindo o objeto XMLHttpRequest quando terminar de usá-lo.

Amostras JSP e JavaScript estão incluídas no diretório da web. ajaxUtil.js contém funções utilitárias para enviar solicitações Ajax, encerrar solicitações e tratar erros HTTP. Este arquivo também fornece utilitários JavaScript para codificação XML e URL, análise XML e serialização DOM. O arquivo ajaxCtrl.jsp atua como um controlador Ajax, recebendo cada solicitação Ajax, encaminhando parâmetros para o modelo de dados ou fornecendo processamento e, em seguida, retornando uma resposta Ajax. O restante dos arquivos da Web são exemplos que demonstram como usar esse método prático.

de construir uma solicitação no lado do cliente

para enviar dados a um servidor Web é codificar a solicitação como uma string de consulta, que pode ser anexada à URL ou incluída no corpo da solicitação, dependendo do método HTTP usado. Se você precisar enviar estruturas de dados complexas, a melhor solução é codificar as informações em um documento XML. Abordarei os dois métodos nesta seção.

Codificar parâmetros de solicitação. Ao desenvolver aplicativos Web tradicionais, você não precisa se preocupar com a codificação dos dados do formulário porque o navegador Web faz isso automaticamente quando o usuário envia os dados. Entretanto, em um aplicativo Ajax, você mesmo deve codificar os parâmetros da solicitação. JavaScript fornece uma função muito útil escape(), que substitui quaisquer caracteres que não possam fazer parte da URL por %HH (onde HH é o código hexadecimal). Por exemplo, quaisquer caracteres de espaço em branco são substituídos por %20.

O download do código de amostra fornece uma função utilitária, buildQueryString(), que concatena parâmetros recuperados de um array, separando o nome e o valor de cada parâmetro por = e colocando o caractere & entre cada par nome-valor:

function buildQueryString(params) {
var consulta = "";
for (var i = 0; i < params.length; i++) {
consulta += (i > 0? "&": "")
+ escape(params[i].nome) + "="
+ escape(params[i].valor);
}
consulta de retorno;
}

Suponha que você queira codificar os seguintes parâmetros:

var someParams = [
{nome: "nome", valor: "John Smith" },
{nome: "e-mail", valor: " [email protected] " },
{nome:"telefone", valor: "(123) 456 7890" }
];

Uma chamada para buildQueryString(someParams) produzirá resultados contendo:

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

Se desejar usar o método GET, você deve anexar a consulta ao URL após o caractere ? Ao usar POST, o cabeçalho Content-Type deve ser definido como application/x-www-form-urlencoded via setRequestHeader(), e a string de consulta deve ser passada para o método send() de XMLHttpRequest, que enviará a solicitação HTTP para servidor.

Crie um documento XML. Usar strings para construir elementos a partir de seus atributos e dados é a maneira mais simples de criar documentos XML com JavaScript. Se você adotar esta solução, precisará de um método utilitário para escapar dos caracteres &, <, >, "e:

function escapeXML(content) {
if (conteúdo == indefinido)
retornar "";
if (!content.length || !content.charAt)
conteúdo = new String(conteúdo);
var resultado = "";
var comprimento = conteúdo.comprimento;
for (var i = 0; i < comprimento; i++) {
var ch = content.charAt(i);
mudar (ch) {
caso &:
resultado += "&";
quebrar;
caso <:
resultado += "<";
quebrar;
caso >:
resultado += ">";
quebrar;
caso ":
resultado += """;
quebrar;
caso \:
resultado += "'";
quebrar;
padrão:
resultado += ch;
}
}
resultado de retorno;
}

Para tornar a tarefa mais simples, alguns métodos utilitários adicionais são necessários, como:

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

O exemplo a seguir cria um documento XML a partir de uma matriz de objetos com três propriedades: símbolo, ações e pagoPrice:

function buildPortfolioDoc(stocks) {
var xml = "";
for (var i = 0; i < stocks.length; i++) {
var estoque = ações[i];
xml += " xml += atributo("símbolo", estoque.symbol);
xml += atributo("ações", stock.shares);
xml += atributo("preçopago", estoque.preçopago);
xml+= "";
}
xml += "< /portfólio>";
retornar xml;
}

Se preferir trabalhar com DOM, você pode usar a API do seu navegador para analisar XML e serializar a árvore DOM. Com o IE, você pode criar um documento vazio com um novo ActiveXObject("Microsoft.XMLDOM"). O XML pode então ser analisado a partir de uma string ou URL usando os métodos loadXML() ou load() respectivamente. No caso do IE, cada nó possui um atributo chamado xml que permite obter uma representação XML do nó e de todos os seus nós filhos. Portanto, você pode analisar uma string XML, modificar a árvore DOM e serializar o DOM de volta para XML.

Os navegadores Firefox e Netscape permitem criar um documento vazio usando document.implementation.createDocument(...). Os nós DOM podem então ser criados usando createElement(), createTextNode(), createCDATASection(), etc. O navegador Mozilla também fornece duas APIs chamadas DOMParser e XMLSerializer. A API DOMParser contém os métodos parseFromStream() e parseFromString(). A classe XMLSerializer possui métodos correspondentes para serializar a árvore DOM: serializeToStream() e serializeToString().

A função a seguir analisa uma string XML e retorna um documento DOM:

function parse(xml) {
var dom;
tentar{
dom = novo ActiveXObject("Microsoft.XMLDOM");
dom.async = falso;
dom.loadXML(xml);
} pegar (erro) {
tentar{
var analisador = new DOMParser();
dom = analisador.parseFromString(xml, "texto/xml");
excluir analisador;
} pegar (erro2) {
se(depurar)
alert("A análise XML não é suportada.");
}
}
retornar dom;
}

A segunda função serializa um nó DOM e todos os seus nós filhos, retornando o XML como uma string:

function serialize(dom) {
varxml=dom.xml;
if (xml == indefinido) {
tentar{
var serializador = novo XMLSerializer();
xml = serializer.serializeToString(dom);
excluir serializador;
} pegar (erro) {
se(depurar)
alert("Serialização DOM não suportada.");
}
}
retornar xml;
}

Você também pode usar XMLHttpRequest como analisador ou serializador. Depois que uma resposta a uma solicitação Ajax é recebida do servidor, a resposta é analisada automaticamente. A versão de texto e a árvore DOM podem ser acessadas por meio das propriedades responseText e responseXML de XMLHttpRequest respectivamente. Além disso, a árvore DOM é serializada automaticamente quando passada para o método send().

Envie uma solicitação. Em um artigo anterior, apresentei a API XMLHttpRequest e uma função utilitária, sendHttpRequest(), que você pode encontrar no arquivo ajaxUtil.js no exemplo fornecido para download. Esta função usa quatro parâmetros (método HTTP, URL, uma matriz de parâmetros e um retorno de chamada), cria um objeto XMLHttpRequest, define suas propriedades e chama o método send(). Se um parâmetro de retorno de chamada for fornecido, a solicitação será enviada de forma assíncrona e a função de retorno de chamada será chamada após o recebimento da resposta. Caso contrário, a solicitação será enviada de forma síncrona e você poderá tratar a resposta assim que sendHttpRequest() retornar.

Como você pode ver, você precisa fazer algumas escolhas importantes ao usar XMLHttpRequest

. Qual método HTTP deve ser usado (GET ou POST)?
O formato usado para codificar parâmetros de solicitação (a codificação XML e URL foi discutida anteriormente neste artigo)
Se deve fazer a chamada de forma síncrona (aguardando uma resposta) ou assíncrona (usando um retorno de chamada). O formato da resposta, como XML, XHTML, HTML ou JavaScript Object Notation (JSON) (discutido posteriormente neste artigo). Digamos que você queira obter algumas informações sobre preços de ações de um feed de dados e atualizar as informações periodicamente sem intervenção do usuário. Neste caso, a solicitação HTTP deve ser enviada de forma assíncrona para que a interface do usuário não seja bloqueada enquanto as informações são recuperadas. O parâmetro de solicitação é uma matriz de símbolos que podem ser codificados na URL. Como o servidor pode estar sobrecarregado, você não deseja enviar documentos XML quando forem feitas solicitações frequentes. Como você está interessado apenas no preço mais recente das ações, quaisquer solicitações anteriores pendentes devem ser encerradas:

var ctrlURL = "ajaxCtrl.jsp";
var feedRequest = null;

function sendInfoRequest(símbolos, retorno de chamada) {
if(feedRequest)
abortarRequest(feedRequest);
var params = new Array();
for (var i = 0; i < símbolos.comprimento; i++)
parâmetros[i] = {
nome:"símbolo",
valor:símbolos[i]
};
feedRequest = sendHttpRequest(
"GET", ctrlURL, parâmetros, retorno de chamada);
}

Antes de chamar o método abort() do objeto de solicitação, a função abortRequest() (encontrada no arquivo ajaxUtil.js) define a propriedade onreadystatechange como um retorno de chamada que não faz nada. Além disso, é fundamental excluir o objeto de solicitação para evitar vazamentos de memória:

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

Vamos considerar outro caso: ao transferir todos os dados do usuário para serem salvos no banco de dados, a solicitação deve ser enviada de forma síncrona, pois provavelmente você não deseja que o usuário a modifique enquanto o salvamento desses dados estiver em andamento. Neste caso, o formato XML é preferido porque muitas vezes é mais simples codificar o modelo de objeto no documento do que usar muitos parâmetros de string. Além disso, as solicitações para salvar dados são pouco frequentes e o servidor lida com a carga sem problemas. Um documento XML pode ser codificado como um parâmetro para que você possa acessá-lo em uma página JSP usando a sintaxe EL (${param.xml}). Aqui está a função que envia dados do modelo codificados em um documento XML:

function sendSaveRequest(xml) {
var params = [ {nome:"xml", valor:xml } ];
var saveRequest = sendHttpRequest("POST", ctrlURL, params);
if(salvarPedido)
excluir saveRequest;
}

Se precisar restaurar o modelo de objeto, você também pode enviar uma solicitação de forma síncrona para recuperar dados do servidor. Nesse caso, o servidor deve retornar uma resposta JSON para que você possa convertê-la facilmente em uma árvore de objetos JavaScript usando eval(loadRequest.responseText):

function sendLoadRequest() {
var modelo = nulo;
var loadRequest = sendHttpRequest("GET", ctrlURL);
if (carregarRequest) {
modelo = eval(loadRequest.responseText);
excluir loadRequest;
}
modelo de retorno;
}

As duas seções a seguir descrevem as operações normalmente executadas em documentos XML no servidor e como responder às solicitações Ajax.

Tratamento de solicitações no lado do servidor

O contêiner Servlet/JSP analisa cada solicitação HTTP e cria uma instância ServletRequest, que permite obter os parâmetros da solicitação por meio de getParameter() / getParameterValues() ou o corpo da solicitação por meio de getInputStream(). Em páginas JSP, esses parâmetros também podem ser obtidos usando a sintaxe EL (${param...} e ${paramValues...}). Observe que passar getParameter só é possível se o cliente Ajax usar uma função utilitária como buildQueryString() para codificar os dados no formato application/x-www-form-urlencoded (descrito na seção anterior deste artigo () ou $). {param...} para obter parâmetros de solicitação. Se você passar um documento XML ou árvore DOM para o método send() de XMLHttpRequest no lado do cliente, deverá usar o método getInputStream() de ServletRequest no lado do servidor.

Validação de dados. Um aplicativo web típico executa muitas operações de validação de dados. A maioria dos erros possíveis são bastante simples, como parâmetros de solicitação ausentes, formatos de números incorretos e assim por diante. Esses erros geralmente são causados ​​pelo usuário que se esquece de inserir um valor para um elemento do formulário ou fornece um valor inválido. Frameworks Web como JSF e Oracle ADF Faces são muito bons para lidar com esses erros do usuário. Em aplicativos Ajax, esses erros podem ser detectados e tratados no lado do cliente usando JavaScript. Por exemplo, você pode usar isNaN(new Number(value)) para verificar se um valor numérico não é válido.

Por razões de segurança e confiabilidade, os dados devem ser revalidados no lado do servidor e as solicitações XML não devem ser consideradas bem formatadas. Os esquemas XML são uma ferramenta útil para validar solicitações complexas no lado do servidor. O download do código de amostra inclui uma classe chamada XMLUtil que fornece métodos para carregar e usar documentos de esquema. O trecho de código a seguir mostra como inicializar o SchemaFactory:

import javax.xml.*;
importar javax.xml.validation.*;
...
SchemaFactory estático protegido esquemaFactory;
estático {
esquemaFactory = SchemaFactory.newInstance(
XMLConstants.W3C_XML_SCHEMA_NS_URI);
esquemaFactory.setErrorHandler(newErrorHandler());
}

O método newErrorHandler() retorna um manipulador de erros SAX:

import org.xml.sax.*;
...
public static ErrorHandler newErrorHandler() {
retornar novo ErrorHandler() {
aviso de vazio público (SAXParseException e)
lança SAXException {
Logger.global.warning(e.getMessage());
}

erro de void público (SAXParseException e)
lança SAXException {
jogue e;
}

public void fatalError(SAXParseException e)
lança SAXException {
jogue e;
}
};
}

Você pode usar getResourceAsStream() para localizar e carregar um arquivo XSD em um diretório ou JAR especificado no CLASSPATH:

public static InputStream getResourceAsStream(String name)
lança IOException {
InputStream in = XMLUtil.class.getResourceAsStream(nome);
se (em == nulo)
lança nova FileNotFoundException(nome);
retornar;
}

Em seguida, use a instância SchemaFactory para obter o objeto Schema por meio do método newSchema():

import javax.xml.validation.*;
...
Esquema estático público newSchema (nome da string)
lança IOException, SAXException {
Esquema de esquema;
InputStream in = getResourceAsStream(nome);
tentar{
esquema = esquemaFactory.newSchema(novo StreamSource(in));
}finalmente{
in.close();
}
esquema de retorno;
}

Você também pode criar um objeto Oracle XMLSchema usando:

import oracle.xml.parser.schema.XMLSchema;
importar oracle.xml.parser.schema.XSDBuilder;
...
XMLSchema estático público newOracleSchema (nome da string)
lança IOException, SAXException {
Esquema XMLSchema;
InputStream in = getResourceAsStream(nome);
tentar{
Construtor XSDBuilder = novo XSDBuilder();
esquema = construtor.build(new InputSource(in));
} catch (Exceção e){
lançar nova SAXException(e);
}finalmente{
in.close();
}
esquema de retorno;
}

Em seguida, você precisa criar um DocumentBuilderFactory. Se uma implementação JAXP 1.1 for encontrada no CLASSPATH, o método setSchema() definido por JAXP 1.2 poderá lançar uma UnsupportedOperationException, caso em que a implementação JAXP 1.1 precisará ser substituída pela implementação JAXP 1.2 do Java SE 5.0. Neste caso, você ainda pode criar um objeto de esquema usando newOracleSchema() e configurá-lo através do método setAttribute():

import javax.xml.parsers.*;
importar oracle.xml.jaxp.JXDocumentBuilderFactory;
...
public static DocumentBuilderFactory newParserFactory(
String esquemaName) lança IOException, SAXException {
Analisador DocumentBuilderFactoryFactory
= DocumentBuilderFactory.newInstance();
tentar{
parserFactory.setSchema(newSchema(schemaName));
} catch (UnsupportedOperationException e) {
if (parserFactory instância de JXDocumentBuilderFactory) {
parserFactory.setAttribute(
JXDocumentBuilderFactory.SCHEMA_OBJECT,
newOracleSchema(nomedoesquema));
}
}
retornar analisadorFactory;
}

Em seguida, crie um objeto DocumentBuilder e utilize-o para validar e analisar o documento XML:

import javax.xml.parsers.*;
...
public static DocumentBuilder newParser(
analisador DocumentBuilderFactoryFactory)
lança ParserConfigurationException {
Analisador DocumentBuilder = parserFactory.newDocumentBuilder();
parser.setErrorHandler(newErrorHandler());
analisador de retorno;
};

Suponha que você queira validar um documento XML em relação ao exemplo de esquema portfólio.xsd:

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

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

< xsd:complexType name="portfolioType">

minOccurs="0" maxOccurs="ilimitado">

< xsd:nome do atributo="símbolo"
type="xsd:string" use="required"/>
< xsd:attribute name="compartilhamentos"
type="xsd:positivoInteger" use="required"/>
< xsd:attribute name="paidPrice"
type="xsd:decimal" use="required"/>
< /xsd:complexType>
< /xsd:elemento>
< /xsd:sequência>

O método parsePortfolioDoc() da classe DataModel usa XMLUtil para validar e analisar os parâmetros xml e retornar um documento DOM:

private static final String SCHEMA_NAME
= "/ajaxapp/model/portfolio.xsd";
private static DocumentBuilderFactory parserFactory;

Documento estático privado parsePortfolioDoc (String xml)
lança IOException, SAXException,
ParserConfigurationException {
sincronizado (DataModel.class) {
if (parserFactory == nulo)
parserFactory = XMLUtil.newParserFactory(SCHEMA_NAME);
}
Analisador DocumentBuilder = XMLUtil.newParser(parserFactory);
InputSource in = new InputSource(new StringReader(xml));
retornar analisador.parse(in);
}

Agora que você tem uma árvore DOM, precisa obter os dados necessários para formar os nós DOM.

Extraia as informações necessárias. Você pode usar a API DOM ou uma linguagem de consulta (como XQuery ou XPath) para navegar na árvore DOM. Java fornece uma API padrão para XPath, que será usada posteriormente. A classe XMLUtil cria um XPathFactory com um método newXPath():

import javax.xml.xpath.*;
...
XPathFactory estático protegido xpathFactory;
estático {
xpathFactory = XPathFactory.newInstance();
}

public static XPath newXPath() {
retornar xpathFactory.newXPath();
}

Os métodos a seguir avaliam uma expressão XPath em um determinado contexto e retornam o valor resultante:

import javax.xml.xpath.*;
importar org.w3c.dom.*;
...
string estática pública evalToString (expressão de string,
Contexto do objeto) lança XPathExpressionException {
return (String) newXPath().evaluate(expressão, contexto,
XPathConstants.STRING);
}

public static boolean evalToBoolean (expressão de string,
Contexto do objeto) lança XPathExpressionException {
return ((Boolean) newXPath().evaluate(expressão, contexto,
XPathConstants.BOOLEAN)).booleanValue();
}

public static double evalToNumber (expressão de string,
Contexto do objeto) lança XPathExpressionException {
return ((Double) newXPath().evaluate(expressão, contexto,
XPathConstants.NUMBER)).doubleValue();
}

Nó estático público evalToNode (expressão de string,
Contexto do objeto) lança XPathExpressionException {
return (Nó) newXPath().evaluate(expressão, contexto,
XPathConstants.NODE);
}

public static NodeList evalToNodeList (expressão de string,
Contexto do objeto) lança XPathExpressionException {
return (NodeList) newXPath().evaluate(expressão, contexto,
XPathConstants.NODESET);
}

O método setData() do DataModel usa o método solucionador XPath para extrair informações do documento XML combinado:

public sincronizado void setData(String xml)
lança IOException, SAXException,
ParserConfigurationException,
XPathExpressionException{
tentar{
ArrayList stockList
= newArrayList();
Documento doc = parsePortfolioDoc(xml);
NodeList nodeList = XMLUtil.evalToNodeList(
"/portfólio/estoque", doc);
for (int i = 0; i Nó nó = nodeList.item(i);
Estoque StockBean = new StockBean();
estoque.setSymbol(
XMLUtil.evalToString("@symbol", nó));
estoque.setShares(
(int) XMLUtil.evalToNumber("@shares", node));
estoque.setPaidPrice(
XMLUtil.evalToNumber("@paidPrice", node));
stockList.add(estoque);
}
this.stockList = stockList;
} catch (Exceção e){
Logger.global.logp(Level.SEVERE, "DataModel", "setData",
e.getMessage(), e);
}
}

Assim que os dados estiverem disponíveis no modelo de dados do lado do servidor, eles poderão ser processados ​​de acordo com os requisitos da aplicação. Então, você deve responder à solicitação do Ajax.

Gerando a resposta no lado do servidor

Retornar HTML como resposta a uma solicitação Ajax é a solução mais simples porque você pode construir a marcação usando a sintaxe JSP e o cliente Ajax simplesmente usa o elemento