ustify>
Clique aqui para ler todos os artigos desta edição
Simplificando o AJAX
Empresas de desenvolvimento de software têm optado cada vez mais pelo desenvolvimento de aplicações web. Entretanto, é importante manter em mente que o desenvolvimento de aplicações web modifica uma serie de conceitos que estamos acostumados a lidar no desenvolvimento de software. A negligência destas diferenças pode levar ao desenvolvimento de aplicações web que sub-otimizam, entre outros, o trafego de dados pela rede e que passam ao usuário a percepção de uma aplicação pouco eficiente e lenta. Um exemplo desta percepção é quando um usuário aguarda uma página inteira ser recarregada e visualiza apenas modificações pontuais, como a atualização de uma caixa de seleção ou de um campo com valores obtidos dinamicamente de um banco de dados. AJAX surge neste contexto, possibilitando a troca apenas das informações necessárias entre o browser e o servidor de aplicações.
Neste artigo apresentaremos uma aplicação web simples que utiliza AJAX para se comunicar de forma mais eficiente com o servidor de aplicações e atualizar seu conteúdo a partir de informações contidas em um banco de dados. Mostraremos ainda como o componente open source AjaxUtil, criado pelos autores, pode facilitar o uso de AJAX.
O artigo está organizado em três partes, a primeira introduz o AJAX e seus conceitos. A segunda explica passo a passo o desenvolvimento da aplicação exemplo utilizando AJAX. A terceira apresenta o componente AjaxUtil e mostra como seu uso pode facilitar o desenvolvimento de aplicações web com AJAX.
Introdução ao AJAX
O que é AJAX?
A sigla AJAX vem de “Asyncronous Javascript And XML”. Uma definição encontrada para AJAX foi: “O uso sistêmico de JavaScript e XML para tornar aplicações web mais interativas, utilizando-se de solicitações assíncronas de informações”.
A principal idéia por trás do AJAX é tornar as aplicações web mais dinâmicas e criativas. Para isto, faz uso não somente de uma tecnologia, mas de um conjunto de tecnologias trabalhando juntas. Basicamente são elas: XHTML, CSS, DOM, XML, XSLT, XMLHttpRequest e JavaScript (esta última desempenhando o papel de unir as demais).
AJAX é suportado por diversos browsers (como Mozilla Firefox, Internet Explorer 5+, Opera, Konqueror ou Safari).
A quantidade de tecnologias assustou? Não se desanime, tudo gira em torno do bom e conhecido JavaScript. Apenas para não deixar maiores dúvidas, seguem breves
descrições das demais tecnologias envolvidas:
• XHTML/CSS: utilizadas para a apresentação da interface com o usuário. XHTML nada mais é do que uma reformulação do HTML 4, baseando-se em XML. Assim, documentos XHTML podem ser manipulados e validados com ferramentas XML padrão.
CSS por sua vez é um mecanismo que pode ser utilizado para adicionar estilo (fontes, cores, espaçamentos, etc) aos documentos XHTML.
• DOM: é um modelo de objetos para acesso e modificações de documentos XML. Assim, ele nada mais é do que uma forma padrão para que aplicações e scripts trabalhem com documentos XML.
• XML/XSLT: representam um formato para documentos e uma linguagem que possibilita a transformação destes documentos. Um documento XSLT pode ser utilizado, por exemplo, para transformar um documento XML com dados em um documento XHTML para que estes dados sejam apresentados.
• XMLHttpRequest: objeto JavaScript utilizado para a recuperação assíncrona dos dados. Maiores detalhes sobre este objeto serão vistos no decorrer do
artigo.
Como utilizar AJAX em uma aplicação web?
O uso do AJAX consiste em, a partir de uma ação na página, chamar uma função JavaScript que cria um objeto XMLHttpRequest, submete este ao servidor via GET ou
POST, o servidor devolve o resultado para o próprio JavaScript que então executa alguma ação com esta resposta.
A reposta do servidor pode ser em texto pleno ou em XML. No primeiro caso, os dados são simplesmente inseridos no conteúdo XHTML (innerHTML) de algum objeto
da página em exibição. No segundo caso é possível trabalhar os dados que estão em XML utilizando JavaScript, como fazendo um parse nos dados utilizando DOM ou
utilizando um documento XSLT para transformá-los.
Um exemplo de funcionalidade que poderia tirar proveito de AJAX é uma lista de títulos de filmes em que, ao clicar em um dos filmes, se deseja mostrar a sinopse do
filme para o usuário. Neste caso, é criada uma tabela com a lista dos filmes, ao clicar em um filme uma função JavaScript é chamada pra pegar a sinopse do filme no servidor utilizando AJAX e mostrá-la em outro campo da página (ver Tabela 1). Este exemplo, que solicita uma página estática (filme1.html, filme2.html, filme3.html ou filme4.html) ao servidor de aplicações está ilustrado abaixo.
Tabela1. Exemplo de aplicação.
...
