Desmistificando o AJAX – Parte I
Raphael Paiva
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.
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)