Consistindo em HTML, tecnologia JavaScript™, DHTML e DOM, o Ajax é uma maneira brilhante de transformar interfaces Web complicadas em aplicativos Ajax interativos. Este artigo, escrito por um especialista em Ajax, demonstra como essas tecnologias funcionam juntas — desde uma visão geral até uma discussão detalhada — para tornar o desenvolvimento Web eficiente uma realidade. Ele também desmistifica os principais conceitos do Ajax, incluindo o objeto XMLHttpRequest.
Cinco anos atrás, se você não conhecesse XML, você era um patinho feio que ninguém levava a sério. Dezoito meses atrás, Ruby se tornou o centro das atenções, e os programadores que não conheciam Ruby só podiam ficar sentados no banco. Hoje, se você quiser acompanhar as últimas tendências tecnológicas, seu destino é o Ajax.
Mas Ajax é mais do que apenas uma moda passageira, é uma maneira poderosa de construir sites que não é tão difícil quanto aprender um idioma totalmente novo.
Mas antes de entrarmos em detalhes sobre o que é o Ajax, vamos dedicar alguns minutos para entender o que o Ajax faz. Atualmente, existem duas opções básicas ao escrever aplicativos:
· Aplicativos de desktop · Aplicativos da Web
Os dois são semelhantes, os aplicativos de desktop geralmente vêm em CD (às vezes podem ser baixados de um site) e são totalmente instalados no seu computador superior. Os aplicativos de desktop podem usar a Internet para baixar atualizações, mas o código que executa esses aplicativos está no computador desktop. Os aplicativos da Web são executados em um servidor da Web em algum lugar – não é de surpreender que esses aplicativos sejam acessados por meio de um navegador da Web.
No entanto, mais importante do que onde o código que executa esses aplicativos é colocado é como os aplicativos funcionam e interagem com eles. Os aplicativos de desktop são geralmente rápidos (executados diretamente no computador sem esperar por uma conexão com a Internet), possuem uma interface de usuário bonita (geralmente dependente do sistema operacional) e são notavelmente dinâmicos. Você pode clicar, selecionar, digitar, abrir menus e submenus, navegar e basicamente nunca esperar.
Os aplicativos Web, por outro lado, são a última tendência, fornecendo serviços que não são possíveis no desktop (como Amazon.com e eBay). Porém, com o poder da Web vem a necessidade de esperar, esperar a resposta do servidor, esperar a atualização da tela, esperar o retorno da solicitação e gerar uma nova página.
Obviamente isto é uma simplificação excessiva, mas o conceito básico é este. Como você deve ter adivinhado, o Ajax tenta unir a funcionalidade e a interatividade dos aplicativos de desktop com os aplicativos da Web em constante evolução. Você pode usar interfaces de usuário dinâmicas e controles bonitos como aqueles encontrados em aplicativos de desktop, mas em um aplicativo Web.
O que você está esperando? Vamos dar uma olhada em como o Ajax pode transformar interfaces Web desajeitadas em aplicativos Ajax responsivos.
Tecnologia antiga, truques novos
Quando se trata de Ajax, na verdade ele envolve uma variedade de tecnologias, e usá-lo de forma flexível requer um conhecimento profundo dessas diferentes tecnologias (os primeiros artigos desta série discutirão cada uma dessas tecnologias separadamente). A boa notícia é que você provavelmente já está familiarizado com a maioria dessas tecnologias, e melhor ainda é que elas são fáceis de aprender e não tão difíceis quanto uma linguagem de programação completa como Java ou Ruby.
A seguir estão as tecnologias básicas utilizadas em aplicações Ajax:
·HTML é utilizado para construir formulários Web e determinar os campos utilizados por outras partes da aplicação.
· O código JavaScript é o código principal que executa aplicativos Ajax e ajuda a melhorar a comunicação com aplicativos de servidor.
·DHTML ou HTML dinâmico para atualização dinâmica de formulários. Usaremos divs, spans e outros elementos HTML dinâmicos para marcar HTML.
·O Document Object Model DOM é usado para processar (via código JavaScript) a estrutura do HTML e (em alguns casos) o XML retornado pelo servidor.
Definição de Ajax
A propósito, Ajax é a abreviatura de Asynchronous JavaScript and XML (e DHTML, etc.). Esta frase foi cunhada por Jesse James Garrett da Adaptive Path (consulte Recursos) e, como Jesse explica, não é um acrônimo.
Vamos analisar melhor as responsabilidades dessas tecnologias. Discutirei essas tecnologias em profundidade em artigos futuros, mas por enquanto apenas se familiarize com os componentes e tecnologias. Quanto mais familiarizado você estiver com esses códigos, mais fácil será passar de uma compreensão dispersa dessas tecnologias para uma verdadeira compreensão dessas tecnologias (o que também abre verdadeiramente a porta para o desenvolvimento de aplicações Web).
Objeto XMLHttpRequest
O único objeto a ser entendido também pode ser o menos familiar para você, o XMLHttpRequest. Este é um objeto JavaScript e criá-lo é simples, conforme mostrado na Listagem 1.
Listagem 1. Criando um novo objeto XMLHttpRequest
<script language="javascript" type="text/javascript">
var xmlHttp = novo XMLHttpRequest();
</script>
Discutiremos esse objeto mais detalhadamente no próximo artigo, mas por enquanto saiba que esse é o objeto que trata de toda a comunicação do servidor. Antes de continuar lendo, pare e pense no seguinte: a tecnologia JavaScript é aquela que se comunica com o servidor através do objeto XMLHttpRequest. Este não é um fluxo de aplicativo comum e é daí que vem o poder do Ajax.
Em uma aplicação Web típica, o usuário preenche os campos do formulário e clica no botão Enviar. O formulário inteiro é então enviado ao servidor, que o encaminha para um script que manipula o formulário (geralmente PHP ou Java, talvez um processo CGI ou algo semelhante) e, em seguida, envia de volta uma página totalmente nova quando o script é concluído. A página pode ser HTML com um novo formulário já preenchido com alguns dados, pode ser uma página de confirmação ou pode ser uma página com algumas opções selecionadas com base nos dados inseridos no formulário original. Obviamente, o usuário deve aguardar enquanto o script ou programa no servidor é processado e retorna o novo formulário. A tela fica em branco e aguarda até que os dados sejam retornados do servidor antes de redesenhar. É por isso que a interatividade é fraca, o usuário não recebe feedback imediato, por isso parece diferente de um aplicativo de desktop.
O Ajax basicamente coloca a tecnologia JavaScript e o objeto XMLHttpRequest entre o formulário da Web e o servidor. Quando o usuário preenche o formulário, os dados são enviados para algum código JavaScript em vez de diretamente para o servidor. Em vez disso, o código JavaScript captura os dados do formulário e envia uma solicitação ao servidor. Ao mesmo tempo, o formulário na tela do usuário não piscará, desaparecerá ou atrasará. Em outras palavras, o código JavaScript envia a solicitação nos bastidores, sem que o usuário sequer saiba que a solicitação está sendo feita. Melhor ainda, a solicitação é enviada de forma assíncrona, o que significa que o código JavaScript (e o usuário) não precisam esperar por uma resposta do servidor. Assim, o usuário pode continuar inserindo dados, rolando e usando o aplicativo.
O servidor então retorna os dados para o código JavaScript (ainda no formato Web), que decide o que fazer com os dados. Ele atualiza os dados do formulário rapidamente, dando a impressão de que a inscrição é concluída instantaneamente, sem que o formulário seja enviado ou atualizado e o usuário obtenha novos dados. O código JavaScript pode até realizar alguns cálculos nos dados recebidos e enviar outra solicitação, tudo sem intervenção do usuário! Este é o poder do XMLHttpRequest. Ele pode interagir com o servidor por conta própria conforme necessário, e o usuário pode até mesmo ficar completamente inconsciente do que está acontecendo nos bastidores. O resultado é uma experiência dinâmica, responsiva e altamente interativa, semelhante a um aplicativo de desktop, mas com todo o poder da Internet por trás dela.
Depois deadicionar um pouco de JavaScript
para obter o identificador de XMLHttpRequest, o outro código JavaScript é muito simples. Na verdade, usaremos o código JavaScript para realizar tarefas muito básicas:
· Obter dados do formulário: o código JavaScript pode facilmente extrair dados de um formulário HTML e enviá-los ao servidor.
·Modificar dados no formulário: A atualização do formulário também é fácil, desde a configuração dos valores dos campos até a substituição rápida das imagens.
·Analisar HTML e XML: Use código JavaScript para manipular o DOM (veja a próxima seção) e processar a estrutura dos dados XML retornados pelo servidor de formulário HTML.
Para os dois primeiros pontos, você precisa estar bem familiarizado com o método getElementById(), conforme mostrado na Listagem 2.
Listagem 2. Capturando e configurando valores de campo com código JavaScript
// Pega o valor do campo "telefone" e coloca-o em uma variável chamada telefone
var phone = document.getElementById("phone").value;
// Define alguns valores em um formulário usando um array chamado resposta
document.getElementById("pedido").valor = resposta[0];
document.getElementById("address").value = response[1]
; Você deve perceber que não há nada terrivelmente complicado aqui. Depois de dominar o XMLHttpRequest, o resto do seu aplicativo Ajax é um código JavaScript simples, como mostrado na Listagem 2, misturado com uma pequena quantidade de HTML. Ao mesmo tempo, também precisamos usar um pouco de DOM, então vamos dar uma olhada.
Terminando com DOM
Finalmente existe o DOM, o Document Object Model. O DOM pode ser um pouco intimidante para alguns leitores. Os designers de HTML raramente o utilizam, e mesmo os programadores de JavaScript raramente o utilizam, a menos que queiram concluir uma tarefa de programação de ponta. Programas complexos Java e C/C++ fazem uso intenso do DOM, e pode ser por isso que o DOM é considerado difícil de aprender.
Felizmente, trabalhar com o DOM na tecnologia JavaScript é fácil e muito intuitivo. Agora, convencionalmente, você provavelmente deveria explicar como usar o DOM, ou pelo menos dar algum exemplo de código, mas fazer isso também pode enganá-lo. Mesmo se você ignorar o DOM, ainda poderá se aprofundar no Ajax, e essa é a abordagem que adotarei. Revisitaremos o DOM em um artigo futuro, mas por enquanto basta saber que você pode precisar dele. Iremos nos aprofundar no DOM quando precisarmos passar XML entre o código JavaScript e o servidor e alterar os formulários HTML. Você pode fazer trabalhos interessantes sem ele, então deixe o DOM de lado por enquanto.
Obtendo o objeto Request
Com o conhecimento básico acima, vamos dar uma olhada em alguns exemplos específicos. XMLHttpRequest está no centro dos aplicativos Ajax e pode ser desconhecido para muitos leitores, então vamos começar por aí. Como você pode ver na Listagem 1, criar e utilizar esse objeto é muito simples, não é mesmo? Espere.
Lembra daquelas terríveis guerras de navegadores de alguns anos atrás? Nada dá os mesmos resultados em navegadores diferentes. Acredite ou não, estas guerras continuam, embora em menor escala. Mas, estranhamente, XMLHttpRequest se tornou uma das vítimas desta guerra. Portanto, a obtenção do objeto XMLHttpRequest pode exigir uma abordagem diferente. Explicarei em detalhes abaixo.
Usando o navegador Microsoft
O navegador Microsoft Internet Explorer usa um analisador MSXML para processar XML (você pode aprender mais sobre MSXML em Recursos). Portanto, se você escrever um aplicativo Ajax que interaja com o Internet Explorer, deverá criar objetos de uma maneira especial.
Mas não é tão simples. Na verdade, existem duas versões diferentes de MSXML, dependendo da versão da tecnologia JavaScript instalada no Internet Explorer, portanto, você deve escrever um código separado para cada caso. Consulte a Listagem 3, que contém o código que cria um XMLHttpRequest em um navegador Microsoft.
Listagem 3. Crie o objeto XMLHttpRequest no navegador Microsoft
var xmlHttp = false;
tentar {
xmlHttp = novo ActiveXObject("Msxml2.XMLHTTP");
} pegar (e) {
tentar {
xmlHttp = novo ActiveXObject("Microsoft.XMLHTTP");
} pegar (e2) {
xmlHttp = falso;
}
}
Talvez você ainda não entenda completamente o código, mas tudo bem. Ao final desta série de artigos, você terá uma compreensão mais profunda de programação JavaScript, tratamento de erros, compilação condicional e muito mais. Agora lembre-se das duas linhas de código:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
e
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.
Essas duas linhas de código basicamente tentam criar um objeto usando uma versão do MSXML e, se isso falhar, crie o objeto usando outra versão. Nada mal, certo? Se nenhum dos dois for bem-sucedido, a variável xmlHttp será definida como falsa, informando ao seu código que há um problema. Se isso ocorrer, pode ser porque está instalado um navegador que não é da Microsoft e que requer código diferente.
Manipulando navegadores Mozilla e que não são da Microsoft
Se você escolher um navegador diferente do Internet Explorer ou se escrever código para um navegador que não seja da Microsoft, precisará usar um código diferente. Na verdade, é uma simples linha de código mostrada na Listagem 1:
var xmlHttp = new XMLHttpRequest object;.
Esta linha de código muito mais simples cria um objeto XMLHttpRequest no Mozilla, Firefox, Safari, Opera e basicamente em qualquer navegador que não seja da Microsoft que suporte Ajax de qualquer forma ou estilo.
A chavepara combinar isso
é oferecer suporte a todos os navegadores. Quem quer escrever um aplicativo que funcione apenas com navegadores Internet Explorer ou que não sejam da Microsoft? Ou pior, escrever um pedido duas vezes? Claro que não! Portanto, o código precisa oferecer suporte a navegadores Internet Explorer e que não sejam da Microsoft. A Listagem 4 mostra esse código.
Listagem 4. Criando um objeto XMLHttpRequest de uma forma que suporte vários navegadores
/* Cria um novo objeto XMLHttpRequest para se comunicar com o servidor Web */
var xmlHttp = falso;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
tentar {
xmlHttp = novo ActiveXObject("Msxml2.XMLHTTP");
} pegar (e) {
tentar {
xmlHttp = novo ActiveXObject("Microsoft.XMLHTTP");
} pegar (e2) {
xmlHttp = falso;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'indefinido') {
xmlHttp = novo XMLHttpRequest();
}
Por enquanto, ignore os símbolos estranhos comentados, como @cc_on, que são comandos especiais do compilador JavaScript que serão discutidos em detalhes no próximo artigo sobre XMLHttpRequest. O núcleo deste código é dividido em três etapas:
1. Crie uma variável xmlHttp para referenciar o objeto XMLHttpRequest a ser criado.
2. Tente criar o objeto no navegador Microsoft:
1) Tente criá-lo usando o objeto Msxml2.XMLHTTP.
2) Se falhar, tente o objeto Microsoft.XMLHTTP novamente.
2. Se o xmlHttp ainda não tiver sido criado, crie o objeto de uma forma que não seja da Microsoft.
Finalmente, xmlHttp deve fazer referência a um objeto XMLHttpRequest válido, não importa qual navegador ele esteja executando.
Uma pequena nota sobre segurança
. Os navegadores agora permitem que os usuários aumentem seu nível de segurança, desliguem a tecnologia JavaScript e desabilitem qualquer opção do navegador. Neste caso, o código não funcionará de qualquer maneira. Neste ponto é necessário tratar o problema de forma adequada, o que requer um artigo separado para posterior (esta série é bastante longa, certo? Não se preocupe, você pode obtê-lo antes de terminar de ler). Agora vamos escrever um código que seja robusto, mas não perfeito, o que é bom para dominar o Ajax. Discutiremos isso com mais detalhes posteriormente.
Solicitação/Resposta no mundo Ajax
Agora que apresentamos o Ajax, temos uma compreensão básica do objeto XMLHttpRequest e de como criá-lo. Se você leu com atenção, provavelmente já sabe que é a tecnologia JavaScript que lida com aplicativos Web no servidor, em vez de formulários HTML enviados diretamente para esse aplicativo.
O que está faltando? Exatamente como usar XMLHttpRequest. Como esse código é tão importante que todo aplicativo Ajax que você escrever irá usá-lo de alguma forma, vamos começar observando como é o modelo básico de solicitação/resposta do Ajax.
Fazendo a solicitação
Agora que você tem um novo objeto XMLHttpRequest, vamos deixá-lo trabalhar um pouco. Primeiro, você precisa de um método JavaScript que a página da Web possa chamar (por exemplo, quando o usuário digita um texto ou seleciona um item em um menu). A seguir está o processo que é basicamente o mesmo em todos os aplicativos Ajax:
1. Obtenha os dados necessários do formulário da Web.
2. Crie a URL a ser conectada.
3. Abra uma conexão com o servidor.
4. Defina a função a ser executada pelo servidor após a conclusão.
5. Envie uma solicitação.
Os métodos Ajax de amostra na Listagem 5 são organizados nesta ordem:
Listagem 5. Fazendo uma solicitação Ajax
function callServer() {
// Obtém a cidade e o estado no formulário web
var cidade = document.getElementById("cidade").valor;
var estado = document.getElementById("estado").valor;
//Só continua se houver valores para ambos os campos
if ((cidade == nulo) || (cidade == "")) return;
if ((state == null) || (state == "")) return;
// Construa a URL para conectar-se;
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state)
;
xmlHttp.open("GET", url, true);
// Configure uma função para o servidor executar quando terminar
xmlHttp.onreadystatechange = updatePage;
// Envia a solicitação
xmlHttp.send(nulo);
}
O significado da maioria dos códigos é muito claro. O código inicial usa código JavaScript básico para obter os valores de vários campos do formulário. Em seguida, defina um script PHP como destino do link. Observe a forma como o URL do script é especificado, a cidade e o estado (do formulário) são anexados ao URL usando parâmetros GET simples.
Em seguida, uma conexão é aberta, sendo a primeira vez que você vê XMLHttpRequest sendo usado. O método de conexão (GET) e a URL para conexão são especificados. O último parâmetro, se definido como verdadeiro, solicitará uma conexão assíncrona (esta é a origem do Ajax). Se for usado false, o código aguardará uma resposta do servidor após fazer a solicitação. Se definido como verdadeiro, os usuários ainda poderão usar o formulário (e até mesmo chamar outros métodos JavaScript) enquanto o servidor lida com solicitações em segundo plano.
O atributo onreadystatechange de xmlHttp (lembre-se, esta é uma instância do objeto XMLHttpRequest) informa ao servidor o que fazer após a conclusão da execução (o que pode levar cinco minutos ou cinco horas). Como o código não está aguardando o servidor, ele deve informar ao servidor o que fazer para que você possa responder. Neste exemplo, se o servidor terminar de processar a solicitação, um método especial chamado updatePage() será acionado.
Finalmente, send() é chamado com o valor nulo. Como os dados a serem enviados ao servidor (cidade e estado) foram adicionados à URL da solicitação, nenhum dado precisa ser enviado na solicitação. Desta forma a solicitação é feita e o servidor funciona conforme sua solicitação.
Se você não encontrar nada de novo, você deve perceber como isso é simples e direto! Além de ter em mente a natureza assíncrona do Ajax, tudo isso é muito simples. Seja grato porque o Ajax permite que você se concentre em escrever belos aplicativos e interfaces em vez de se preocupar com códigos complexos de solicitação/resposta HTTP.
O código na Listagem 5 ilustra a facilidade de uso do Ajax. Os dados são texto simples e podem ser usados como parte do URL de solicitação. Envie solicitações com GET em vez do POST mais complexo. Não há XML nem cabeçalhos de conteúdo para adicionar, nem dados para enviar no corpo da solicitação, em outras palavras, esta é a utopia do Ajax;
Não se preocupe, as coisas ficarão mais complicadas à medida que esta série de artigos se desenrolar. Você verá como enviar uma solicitação POST, como definir os cabeçalhos e o tipo de conteúdo da solicitação, como codificar XML na mensagem, como aumentar a segurança da solicitação e muito mais que você pode fazer! Não se preocupe com essas dificuldades por enquanto, apenas domine o básico e em breve construiremos um conjunto completo de bibliotecas de ferramentas Ajax.
Lidando com a resposta
Agora vem a resposta do servidor. Por enquanto, apenas duas coisas a saber:
· Não faça nada até que o valor da propriedade xmlHttp.readyState seja igual a 4.
·O servidor preencherá a propriedade xmlHttp.responseText com a resposta.
O primeiro deles, o estado pronto, será discutido em detalhes no próximo artigo, e você aprenderá mais sobre os estágios de uma solicitação HTTP do que provavelmente imaginava. Por enquanto basta verificar um valor específico (4) (haverá mais valores para abordar no próximo artigo). Segundo ponto, utilize a propriedade xmlHttp.responseText para obter a resposta do servidor, é muito simples. O método de exemplo da Listagem 6 pode ser chamado pelo servidor com base nos dados enviados na Listagem 5.
Listagem 6. Manipulando
a função de resposta do servidor updatePage() {
if (xmlHttp.readyState == 4) {
var resposta = xmlHttp.responseText;
document.getElementById("zipCode").value = resposta;
}
}
Os códigos também não são difíceis nem complexos. Ele aguarda a chamada do servidor e, se estiver pronto, define o valor de outro campo do formulário usando o valor retornado pelo servidor (aqui o CEP da cidade e estado informado pelo usuário). Então, de repente, o campo zipCode contendo o CEP aparece sem que o usuário pressione nenhum botão! Isso é o que mencionei anteriormente como um aplicativo de desktop. Resposta rápida, sensação dinâmica, etc., tudo por causa de um pequeno pedaço de código Ajax.
Leitores atentos podem notar que zipCode é um campo de texto comum. Depois que o servidor retorna a codificação ZIP, o método updatePage() define o valor desse campo com a codificação ZIP da cidade/estado, que o usuário pode substituir. Isto é feito por dois motivos: para manter o exemplo simples e para ilustrar que às vezes você pode querer que o usuário seja capaz de modificar os dados retornados pelo servidor. Tenha essas duas coisas em mente: elas são importantes para um bom design da interface do usuário.
O que mais há
para conectar-se a um formulário da web
?Na verdade, não resta muito. Um método JavaScript captura as informações que o usuário insere no formulário e as envia ao servidor, e o outro método JavaScript escuta e processa a resposta e define o valor do campo quando a resposta retorna. Na verdade, tudo isso depende da chamada do primeiro método JavaScript, que inicia todo o processo. A solução mais óbvia é adicionar um botão ao formulário HTML, mas isso é 2001, não acha? Vamos usar a tecnologia JavaScript como a Listagem 7.
Listagem 7. Iniciando um processo Ajax
<form>
<p>Cidade: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>Estado: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Código postal: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
Se isso parece um código bastante comum, você está certo, é mesmo! Quando o usuário insere um novo valor no campo cidade ou estado, o método callServer() é acionado e o Ajax começa a ser executado. Você entende um pouco o que está acontecendo? Bem, é isso!
Conclusão
Agora você provavelmente está pronto para começar a escrever seu primeiro aplicativo Ajax e pelo menos deseja ler os artigos nos recursos com atenção, certo? Mas você pode começar com uma ideia básica de como esses aplicativos funcionam e um entendimento básico do objeto XMLHttpRequest. Na próxima parte, você dominará esse objeto e aprenderá como lidar com a comunicação entre JavaScript e o servidor, como usar formulários HTML e como obter um identificador DOM.
Agora reserve um momento para considerar o quão poderosas as aplicações Ajax podem ser. Imagine um formulário da Web que responda instantaneamente quando você clica em um botão, entra em um campo, seleciona uma opção em uma caixa de combinação ou arrasta o mouse pela tela. Pense no que realmente significa assíncrono, pense no código JavaScript em execução e não esperando que o servidor responda à sua solicitação. Que tipo de problemas você encontrará? Em que tipo de campo ele entrará? Dada esta nova abordagem, como devemos mudar o design do formulário durante a programação?
Se você dedicar um pouco de tempo a essas questões, ganhará mais do que simplesmente recortar/colar algum código em um aplicativo que você não entende. Na próxima parte colocaremos esses conceitos em prática, detalhando o código necessário para fazer a aplicação funcionar desta forma. Então, por enquanto, aproveite as possibilidades que o Ajax tem a oferecer.