Conhecendo AJAX

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Turbine a Interatividade de suas Aplicações Web. O uso de Ajax pode deixar suas aplicações web mais ágeis e responsivas, e é a base da interface gráfica de software de grande sucesso com o Gmail.

Esse artigo faz parte da revista Java Magazine edição 28. Clique aqui para ler todos os artigos desta edição

Atenção: por essa edição ser muito antiga não há arquivo PDF para download.Os artigos dessa edição estão disponíveis somente através do formato HTML.

Conhecendo AJAX

Turbine a Interatividade de suas Aplicações Web

O uso de Ajax pode deixar suas aplicações web mais ágeis e responsivas, e é a base da interface gráfica de software de grande sucesso com o Gmail

 

Se você está envolvido em desenvolvimento web e tem acompanhado noticias da área nos últimos seis meses, provavelmente já ouviu falar do AJAX, acrônimo de “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” (como definido pelo documento que cunhou o termo), ou simplesmente “Asynchronous JavaScript and XML”, como ficou conhecido na web.

Sem entrar em discussões, no momento, sobre se é uma técnica nova, ou apenas um nome novo para técnicas antigas, o fato é que o AJAX lançou nova luz na utilização de DHTML para criação de sites mais interativos.

 

Afinal, o que é AJAX?

Para entender o AJAX, é interessante recapitular o funcionamento de requisições/respostas e a exibição de paginas web, e soluções para problemas comuns que ocorrem com essas operações. Numa paginas web, quando o usuário clica num link ou submete um formulário,o servidor processa as informações submetidas e devolve como resposta outra página web completa, que então é renderizada pelo browser em substituição à primeira. Um problema é que o atraso da transferência dos dados, somando ao tempo de renderização pelo browser resulta na apresentação de páginas vazias e lentidão na resposta a ações do usuário.

Para minimizar esse efeito, uma abordagem é fazer a submissão de parâmetros e dados por um “canal separado” (através de uma thread própria dentro do browser) utilizando JavaScript. Em seguida o servidor devolve a resposta através do mesmo canal, evitando a necessidade de uma nova renderização da página. Dessa forma, a resposta não terá o conteúdo de uma página inteira, mas apenas os dados que necessitam ser modificados (ex.: o conteúdo de uma combobox). Um trecho de código JavaScript se encarrega de manipular esses dados e atualizar a página – e é dada a impressão para o usuário de uma aplicação mais interativa e responsiva.

Tal idéia existe desde que se começou a usar scripts para manipular elementos de páginas HTML. Inicialmente, a técnica do “canal separado” era implementada por meio de um frame HTML de tamanho mínimo, que realizava a requisição e obtinha como resposta uma pagina contendo, além dos dados, um script que atualizava o frame principal. O problema é que tal abordagem aumenta demais a complexidade de gerenciamento. Construir uma página desse modo exige uma página contendo o frameset (que define o layout dos frames na janela), um frame principal para mostrar os dados, e uma ou mais páginas para implementar a atualização do frame principal (cada atualização normalmente precisa de uma página de resposta específica).

A situação melhorou com a introdução, no Internet Explorer 5, da classe XMLHttpRequest, que permite a requisição assíncrona de páginas web e a manipulação do conteúdo dessas páginas na forma de dados (desde que a página esteja num formato apropriado). Isso simplificou muito a implementação de requisições através de threads próprias dentro do browser, sem a necessidade de utilização de utilização de artifícios como frames escondidos.

Além disso, num esforço por maior compatibilidade entre browser, o grupo Mozilla implementou uma classe equivalente ao XMLHttpRequest, o que foi seguido por outros browsers como Safari, Konqueror, OmniWeb e Opera. Criou-se então uma ambiente propício para atualização da classe XMLHttpRequest (ou equivalentes) por grandes aplicações como GMail, Google Earth, Google Suggest e Yahoo! Flickr, entre outras.

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.

 

Implementação AJAX

 Após esse posicionamento histórico e tecnológico, está na hora de vermos a técnica em ação. Como exemplo, vamos criar uma página simples, onde temos uma combobox com projetos cadastrados num sistema: ao mudar o projeto selecionado, é mostrada logo abaixo da combo uma tabela com as atividades cadastradas naquele projeto.

A Listagem 1 apresenta a página de exemplo. A chamada a Fabrica.getProjetos() simula a obtenção de todos os projetos cadastrados no sistema; sua implementação não é discutida neste artigo, porém os fontes completos podem ser obtidos no site da Java Magazine.

O fragmento JavaScript abaixo cria a 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 && typeof XMLHttpRequest!=’undefined’){

 xmlhttp=new XMLHttpRequest();

}

 

Este script é encontrado como exemplo em vários sites sobre AJAX e tem sido considerado um dos padrões para a criação da instância de XMLHttpRequest de forma independente de browser. Inicialmente, tenta-se obter a instância de Msxml12.XMLHTTP ou Microsoft.XMLHTTP, para o Internet Explorer (o nome da classe depende da versão da biblioteca de XML da Microsoft instalada na máquina cliente). Caso o browser tenha a sua própria implementação do tipo XMLHttpRequest, o script cria uma instância desse tipo no bloco condicional no final do script.

O evento onchange da combobox invoca a função JavaScript alteraProjeto():

 

function alteraProjeto() {

  var theUrl=”obtemAtividadesXML.jsp?projeto=”

     +document.getElementByld(“projeto”).value;

  xmlhttp.open(“GET,theUrl,true);

"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?