As aplicações web tendem a lidar com dados assincronamente, devido ao grande número de acessos e também à natureza de seu funcionamento. Assim, precisamos de um meio para lidar com essa assincronia, e o AJAX desponta como uma das melhores e mais utilizadas alternativas. As aplicações que utilizam AJAX vão desde chats até transmissão de esportes no formato “minuto a minuto”, muito comum atualmente.

Por natureza, aplicações assíncronas são mais complexas e difíceis de entender. Logo, precisamos de padrões de projeto para garantir que o código não se torne completamente impossível de ser entendido. Ao longo desse artigo, veremos alguns dos principais design patterns para utilização do AJAX. O primeiro deles é o Periodic Refresh, que é utilizado para controlar a atualização periódica dos dados da página. O padrão Timeout é utilizado em conjunto com o primeiro para garantir que as chamadas periódicas não fiquem sendo executadas indefinidamente. Outro padrão que veremos é o Unique URL, para garantir que nossas páginas, mesmo assíncronas, tenham URLs diferentes baseadas em estados da aplicação. Por fim, veremos o Predictive Fetch, que permite que façamos o fetch dos dados que serão provavelmente mais buscados pelo usuário, acelerando assim o processo.

Os padrões que veremos são extremamente úteis e compõem o que é conhecida como a Camada de Experiência do Usuário. Essa camada transcende o que vemos na Camada de Apresentação para garantir uma experiência ao usuário com ações e respostas eficiente, não se limitando àquilo que ele está visualizando na página.

Ao longo desse artigo vamos lidar com várias bibliotecas que vão além do JavaScript comum. Existem várias bibliotecas desse tipo que podem ser utilizadas para facilitar o desenvolvimento das aplicações AJAX. A Microsoft possui uma biblioteca específica para utilização do AJAX juntamente com o AJAX Control Kit, embora também suporte a jQuery. Esta última é uma das mais utilizadas bibliotecas JavaScript do mercado, bastante simples e que costuma facilitar bastante a vida dos desenvolvedores web sem prejudicar o desempenho de forma significativa.

O que é o AJAX?

AJAX é um acrônimo e significa Asynchronous JavaScript and XML. Embora muitos desenvolvedores e pessoas comuns acreditam que se trate de um recurso, biblioteca ou tecnologia, o AJAX é mais do que isso. É um modo de programação que surge para nos ensinar a lidar com chamadas assíncronas utilizando tecnologias que conhecemos bem e são suportadas em todos os navegadores do mercado: JavaScript e XML. Ele permite que o cliente da aplicação faça call-backs assincronamente do navegador para o servidor.

O funcionamento do AJAX é relativamente simples: os dados retornados pelo servidor estão serializados em XML. Logo, é preciso algum tipo de manipulação para lidarmos com esses dados. Atualmente, é mais interessante utilizarmos JSON (BOX 1) ao invés de XML, devido ao JSON ser mais leve e, portanto, mais rápido em termos de desempenho.

A tecnologia utilizada por baixo do AJAX é um objeto: XMLHttpRequest. Esse objeto permite que o código do cliente, em JavaScript, envie requisições HTTP e lide com as respostas. A habilidade de requerer dados de forma assíncrona é apenas metade da funcionalidade do AJAX, visto que é necessário atualizar a página com os novos dados que foram recuperados. É aí que entra o DOM (Document Object Model). Ele permite que a página seja atualizada com os novos dados recuperados pelo objeto XMLHttpRequest. Esses ...