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)