Barra de ferramentas »
Ir para o conteúdo
XHTML
CSS 2.0
Imprimir
Get Firefox
Postar este site
Postar esta página
Page Rank Checker

bergbrandt.com

Voltar
Front-End Engineering - 02/01/2007

AJAX e JSON: uma combinação poderosa

Como ganhar mais poder e versatilidade usando AJAX+JSON

Berg Brandt

Muitos desenvolvedores, até os menos antenados, já ouviram falar de AJAX. Só para relembrar, AJAX é a abreviação em língua inglesa de Asynchronous Javascript And XML e consiste numa técnica de programação para atualizar os dados em uma página de forma assíncrona, ou seja, sem recarregar o documento inteiro. Esta técnica é muito poderosa e, quando usada com planejamento e pertinência, pode tornar a interação bastante agradável.

Os dois alicerces principais que tornaram possível o surgimento e consolidação do AJAX como técnica são:

  1. A padronização do DOM(1) pelo W3C(2), que tornou possível a manipulação de nós HTML/XML de forma confiável e compatível (+-) pelos browsers.
  2. O uso do objeto XMLHttpRequest do javascript de forma assíncrona.

Nas aplicações que usam AJAX, a interação acontece, na maioria das vezes, utilizando-se um módulo estático ou dinâmico que retorna um pedaço de HTML/XML baseado numa requisição do objeto XMLHttpRequest. Esse pedaço de HTML/XML é então inserido na página via DOM em um contâiner pré-definido.

Imaginemos então que, além de simplesmente preencher um contâiner com HTML/XML, fosse necessária a execução de um javascript que fosse baseado na resposta do módulo dinâmico. A solução mais simples e imediata talvez fosse: "vamos acrescentar uma tag script, preenchê-la com os parâmetros e funções de que necessitamos e mandar tudo como resposta à requisição AJAX ". Isso poderia até funcionar, mas, dessa forma, estaríamos inserindo tags script no meio do código que, além de ser deselegante, é contra os padrões do W3C. Então, o que fazer? Uma solução bastante interessante nesses casos é criar um módulo dinâmico que, em vez de retornar HTML/XML, envie uma resposta usando JSON.

Para quem ainda não ouviu falar, JSON é o acrônimo de JavaScript Object Notation, em outras palavras, é uma representação textual (string) de um objeto javascript. Para ilustrar, vamos mostrar como se pareceria uma resposta JSON:

{"html":"<span>O dólar para 02/01/2007 - 08:30 está cotado em <strong>R$ 2,16</strong> para compra e <strong>R$ 2,15</strong> para venda.</span>","js":"atualizarGraficoCotacao('2.16','2.15','02/01/2007 - 08:30')"}

Esse exemplo mostra um módulo de cotação financeira que além de retornar HTML/XML com a informação textual ainda retorna um javascript com uma função a ser executada para atualizar um gráfico que existe na página. Vamos detalhar um pouco mais como isso funciona na prática, mostrando o processo de desenvolvimento passo-a-passo:

  1. Crie o seu módulo dinâmico e o configure para responder usando um JSON como o a seguir:

    {"html":"<span>O dólar para 02/01/2007 - 08:30 está cotado em <strong>R$ 2,16</strong> para compra e <strong>R$ 2,15</strong> para venda.</span>","js":"atualizarGraficoCotacao('2.16','2.15','02/01/2007 - 08:30')"}
  2. Use o objeto XMLHttpRequest para obter os dados do módulo.
  3. Converta o string JSON em um objeto usando o comando eval: eval('var objJson='+objAjax.responseText+'')
  4. O HTML/XML estará então disponível através de objJson.html e o javascript estará disponível através de objJson.js. Ou seja, como criamos um objeto javascript podemos acessar os itens contidos no objeto via "sintaxe de ponto".
  5. É possível inserir o seu HTML/XML no contâiner desejado usando: container.innerHTML=objJson.html;
  6. É possível também executar o comando javascript utilizando: eval(objJson.js);
Alguns lembretes:
  1. O JSON que retorna é inicialmente apenas um string, para transformá-lo em objeto javascript, o uso do comando eval (passo 3) é indispensável.
  2. O javascript que é retornado pelo módulo usa a função atualizarGraficoCotacao. Para que tudo funcione corretamente, essa função deve estar declarada na página ou em algum javascript ligado a ela.

Podemos observar, com esse simples exemplo, como a combinação AJAX+JSON pode ser utilizada de forma bastante consistente de modo a expandir as possibilidades do AJAX. Dependendo das necessidades do projeto, o objeto JSON pode ganhar novos elementos e um grau de complexidade ainda maior proporcionando versatilidade através de múltiplas interações não-restritas apenas a um contâiner e a um retorno em simples HTML/XML.

Vale a pena experimentar!!!

(1) W3C - World Wide Web Consortium - órgão que regulamenta os padrões web.

(2) DOM - Document Object Model - determina como se relacionam os elementos (nós) em uma estrutura XML.

Voltar