Conhecendo Ajax : Turbine a Interatividade de suas

Conhecendo Ajax : Turbine a Interatividade de suas Aplicacoes Web
Se você tem acompanhado as ultimas noticias relacionadas com desenvolvimento web,
provavelmente já ouviu falar do termo Ájax, acrômino para Assynchronous JavaScript +
CSS + DOM + XMLHttpRequest, ou simplesmente Assynchronous JavaScript and XML
como ficou conhecido na web.
Para entender o que é Ájax, é interessante recapitular o modo como funcionam
requisições/respostas e a exibição de páginas na web. Em uma página quando o usuário
clica em um link ou submete um formulário, o servidor processa as informações e retorna
uma página completa, que é então renderizada pelo navegador em substituição a primeira, o
problema é a demora do servidor somada ao tempo de renderização da página pelo
navegador, resultando em uma página em branco e lentidão em resposta as ações do
usuário.
Para minimizar este efeito, uma abordagem era a submissão destes dados através de um
canal separado utilizando JavaScript. Em seguida o servidor devolve somente os dados que
precisam ser modificados como resposta, através do mesmo canal, não necessitando uma
nova renderização da página. Um trecho de código javaScript se encarrega de manipular
estes dados e atualizar a página, deixando a página mais interativa e responsiva perante o
usuário.
Inicialmente esta técnica começou a ser utilizada através da construção de um frame de
tamanho mínimo que realizava a requisição e obtinha como resposta uma página contendo
os dados e um script que atualizava o frame principal. O problema é que esta abordagem
aumentava demais a complexibilidade da aplicação.
A situação melhorou com a introdução no Internet Explorer 5, da classe XMLHttpRequest,
que permite a requisição de forma assíncrona e a manipulação do conteúdo destas páginas
na forma de dados. Isto simplificou muito a utilização do canal separado e sem a
necessidade de se utilizar frames escondidos.
Num esforço por maior compatibilidade entre os navegadores, o grupo Mozilla criou uma
classe equivalente ao XMLHttpRequest que foi seguida por outros navegadores como
Safári, konqueror, OmniWeb e Opera.
A técnica de criar uma página atualizada dinamicamente e parcialmente através de
requisições ao servidor utilizando o objeto XMLHttpRequest ficou conhecida como Ajax.
Implementando Ajax
O fragmento de código abaixo cria uma referência para o objeto XMlHttpRequest.
var xmlhttp = false;
try {
Xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
xmlhttp = false;
}
}
if (!xmlhttp && typeofXMLHttpRequest != “undefined”) {
xmlhttp = new XMLHttpRequest();
}
Este script tem sido considerado um dos padrões para criação da instancia de
XMLHttpRequest de forma independente de navegador. Inicialmente o script tenta obter
uma instancia para o Internet Explorer e caso o navegador tenha a sua própria
implementação do tipo XMLHttpRequest, o script tenta criar uma instancia deste tipo no
bloco condicional no final do código.
Como exemplo de utilização, um campo combo-box do formulário através do atributo
onChange pode chamar a função alteraProjeto().
alteraProjeto() {
var url = “testeXML.jsp?projeto=” + document.getElementById(“projeto”).value;
xmlhttp.open(“GET”, url, true);
xmlhttp.onreadstatechange = function() {
if (xmlhttp.readyState == 4) {
criaTabela(xmlhttp.responseXML);
}
}
xmlhttp.send(null);
};
Esta função requisita a página testeXML.jsp, passando como parâmetro o identificador do
projeto selecionado.
A execução de uma requisição Ajax segue os seguintes passos:
1. É invocado o método open() do objeto XMLHttpRequest, passando o método HTTP
desejado, geralmente GET ou POST, alem da URL a ser requisitada e uma flag
indicando se a requisição é assíncrona ou não.
2. Omo a chamada é assíncrona, é definido um gerenciador para notificar quando a
resposta do servidor estiver completa, readyState igual a 4. Será chamado o método
criaTabela passando-se o conteúdo XMl obtido como resposta do servidor.
3. O método send() realiza o envio da requisição, passando como parâmetro o corpo da
mensagem a ser enviada, no caso de uma requisição POST.
A página testeXML.jsp é responsável por gerar um documento XML com os dados de
atividades do projeto selecionado passado como parâmetro. Este documento XML irá
possuir o seguinte formato:
<?xml version=”1.0” encoding=”UTF-8”?>
<dados>
<atividade>
<descricao>Criar projeto Teste</descricao>
<dataInicial>01/01/2006</dataInicial>
<dataFinal>02/02/2006</dataFinal>
</atividade>
</dados>
A manipulação dos dados de resposta no formato XML dentro do JavaScript deve respeitar
duas condições:
1. O content-type da pagina de resposta deve ser definido como test/xml;
2. Os dados de resposta devem ser obtidos através da propriedade responseXML do
objeto XMLHttpRequest]
Dentro da função criaTabela(), toda a manipulação dos dados no XML á feita através do
método getElementsByTagName() do objeto XMLDocument passando como parâmetro o
nome da tag e retornando uma lista de elementos XML referentes a tag passada. Cada
elemento XML será representado pela sua estrutura DOM.
function criaTabela(ajaxResponse) {
var data = ajaxResponse.getElementsByTagName("atividade");
var htmlText = "<table border='1' >"+
" <tr>"+
" <th>Descrição</th>"+
"
<th>Data Inicial</th>"+
"
<th>Data Final</th>"+
" </tr>"
for(i=0;i<data.length;i++)
{
var desc = data[i].getElementsByTagName("descricao").item(0);
var dataInicial = data[i].getElementsByTagName("dataInicial").item(0);
var dataFinal = data[i].getElementsByTagName("dataFinal").item(0);
htmlText=htmlText+"<tr><td>"+
desc.firstChild.data+"</td><td>"+
dataInicial.firstChild.data+"</td><td>"+
dataFinal.firstChild.data+"</td><td></tr>";
}
htmlText=htmlText+"</table>";
document.getElementById("tabela").innerHTML=htmlText;
};
Em resumo, nova ou não, a técnica Ájax apresenta uma visão diferente para o
desenvolvimento de aplicações web mais intuitivas, sem a necessidade de Applets ou
plugins. Desenvolver com Ájax “no braço” já não é mais uma tarefa complicada, e com os
novos frameworks e taglibs que estão surgindo, a tarefa irá ficar mais simples ainda. É hora
de começar a olhar a arquitetura de sistema web de uma maneira mais interativa.
Java Magazine – Edição 28 – Ano IV
Alexandre Denes dos Santos