Desmistificando o AJAX – Parte I

Desmistificando o AJAX – Parte I

Raphael Paiva

raphael@sena.com.br

 

O que é AJAX

Antes de explicar o que é AJAX, deve-se explicar o que ele não é; AJAX não é um framework, uma API nem uma tecnologia em si, é uma funcionalidade implementada por um conjunto de objetos de JavaScript, sendo o mais importante chamado XMLHttpRequest.

 

Este objeto, que trata uma requisição ou resposta de servidor com um documento XML DOM, contém uma série de métodos que possibilita que o browser possa realizar requisições e receber respostas do servidor sem que este tenha que atualizar(refresh) a tela.

 

A finalidade do AJAX

O principal problema resolvido com AJAX é a substituição da conhecida tela escondida ou “hidden frame”, que era implementado como única solução para a realização de uma requisição sem refresh da página principal.

 

Com hidden frame tínhamos vários problemas:

 

Problemas com Hidden Frame:

·Páginas com vários quadros

·Quando ocorriam erros na página escondida, estes não eram rastreados com facilidade.

·Dificuldade de manutenção.

·O desenvolvedor, ao ver uma já implementada, tinha bastante receio em adicionar ou modificar alguma funcionalidade dela, pois poderiam ocorrer erros em outros locais.

·Normalmente deveria ser implementado um novo jsp para cada método, assim, caso fosse necessário a utilização de várias funcionalidades, eram necessários mais páginas escondidas na mesma página.

·Não se tinha um local que centralizasse e controlasse todas as requisições.

 

AJAX resolve este problema, possibilitando, através de um único método, realizar request e receber responses com ilimitadas respostas, ou seja, a comunicação cliente-servidor fica transparente, fazendo com que sem nenhuma dificuldade o desenvolvedor possa acessar métodos do servidor quase como se fosse um método JavaScript.

 

A Aplicabilidade do AJAX

Alguns usos mais comuns do AJAX podem ser listados:

1.Validação em tempo real: Validações que não possam ser feitas do lado do cliente, como, por exemplo, verificar se usuário já está cadastrado ou se a data informada é anterior à data atual.

2.Auto Completion: Possibilita que o ao mesmo tempo em que o usuário for digitando, possa aparecer uma lista de possíveis respostas.

-Um bom exemplo é o Google Suggest (http://www.google.com/webhp?complete=1&hl=en)

3.Visualização de detalhes de um item: Ao invés de carregar todos os dados na tela ou então necessitar de popups, pode-se montar a lista de “itens-pai” e dependendo da escolha, montar os detalhes do item.

-Para melhor exemplificação, um bom exemplo é a seção de notícias e de empregos do portal JavaFree(www.javafree.org).

4.Controles de interface de usuário sofisticados: Controles dinâmicos como arvore de diretórios, menus, barras de progresso e interface ricas como aplicações RIA ou até mesmo jogos podem ser implementados sem necessidade de refresh.

-Um exemplo de interface rica pode ser visualizada no site Flickr(http://flickr.com/), onde o usuário pode organizar uma coleção de fotos com diversos recursos, como por exemplo com utilização de drag n´ drop.

-Um exemplo do famoso jogo Lemmings desenvolvido utilizando AJAX pode ser visto em (http://193.151.73.87/games/lemmings/)

5.Atualização de dados na página: Atualização de informações na página em tempo real sem a necessidade de refresh possibilita, por exemplo, o desenvolvimento de chats, acompanhamento de ações de bolsa, notícias ou aplicações semelhantes.

-Um exemplo de chat existe no site QWAD(http://www.qwadchat.com).

-Um exemplo de atualização de notícias segundo a segundo está em (http://digg.com/spy)