Ajax para quem s ouviu falar

1. 2. 3. 4. 5. 6. 7. Introduo Objetivos Site comum Obter o contedo Construindo a aplicao Fazendo acontecer Conselhos finais

Introduo
Sempre que um assunto entra em voga, aparece um monte de gente perguntando as mesmas perguntas de sempre. E, quando eu j estudei alguma coisa sobre o assunto, eu sempre tento, inutilmente, verdade, escrever um artigo que elimine as dvidas iniciais e mostre o "camino das pedras" para quem s ouviu falar naquilo e quer saber o que , pra que serve, e ter uma idia de como se faz. Este artigo uma tentativa dessas. O assunto Ajax. Ajax a sigla para "Asynchronous Javascript and XML". Se voc entende ingls, pode ler uma excelente explicao do assunto no artigo de Jesse James Garrett: Ajax: A New Approach to Web Applications. No uma coisa nova, e eu j falei um pouco sobre isso no meu blog. A idia utilizar Javascript para transformar suas pginas em aplicaes, de modo que no precise recarregar a tela cada vez que o usurio clicar em alguma coisa. Voc pode recarregar apenas a rea que precisa ser alterada pela ao realizada. H alguns excelentes exemplos do que estou falando. Voc pode dar uma olhada neles para ter idia do que isso capaz de fazer:

Backbase - Esse serve para impressionar os amigos. E, eu acho, s para isso. Google Suggest - Digite devagar, voc vai ver... Google Maps - Fantstico, fabuloso. Gmail - O melhor webmail que eu j vi. Start.com - Sim, da Microsoft, por qu? Muito bom tambm.

Claro, no quero te ensinar neste artigo a construir um GMail ou coisa parecida. Alis, nem todo mundo tem a oportunidade de trabalhar em projetos de grandes aplicaes client-side. Se voc resolver estudar o assunto mais a fundo, eu posso garantir, vale a pena! bastante divertido trabalhar com isso. Acabo de entregar uma aplicao de tamanho razovel, o novo Prodo, o CMS leve da Atpico, a empresa onde eu orgulhosamente passo os dias me divertindo. Infelizmente, ele no est disponvel para test-drive. Mas h outra aplicao, um pouco menor, mas de tamanho j considervel, que eu fiz h algum tempo e voc pode ver: o editor do blog do Tableless. H uma senha de demonstrao para isso, usurio "ajax", senha "ajax". Pode mexer vontade, o contedo no o real ( uma cpia do contedo real atualizada a cada 30 minutos.)

Objetivos
Nosso objetivo com esse artigo contruir uma aplicao Ajax muito simples, que te faa entender os conceitos bsicos por trs disso tudo. A primeira coisa importante a ser dita aqui a respeito de acessibilidade. possvel, e bastante desejvel, construir aplicaes Ajax que tenham algumas caractersticas:

Funcionar sem Javascript Funcionar sem CSS Ao clicar, mudar a url na barra de endereos e o ttulo da pgina Manter funcionais os botes de avanar, voltar e recarregar Permitam salvar links, adicionar a bookmarks, etc.

O Backbase e o Gmail, por exemplo, tm as trs ltimas caractersticas. O editor do Tableless tem as duas primeiras e, dependendo do seu navegador, a quarta. Cada uma delas envolve mais ou menos trabalho para implementar, dependendo da complexidade de sua aplicao. As cinco caractersticas so desejveis e, claro, a deciso de implement-las sua, considerando o tipo de aplicao que est desenvolvendo. E sempre h a possibilidade de, como o GMail, oferecer uma verso mais simples de sua aplicao para navegadores no suportados. Nosso objetivo neste artigo construir um aplicativo Ajax simples, completamente funcional em navegadores no compatveis. Para isso, trabalhamos o Ajax como ltima camada, a ser aplicada ao final de todo o restante. Nessa abordagem, que eu tenho usado bastante, seu cdigo construdo de acordo com as seguintes camadas: 1. 2. 3. 4. Contedo HTML Programao Server-Side (fazer funcionar) CSS (esta etapa e a anterior podem mudar de ordem) Javascript e Ajax

Fazendo assim, ao terminar a camada 2, voc tem uma aplicao completamente funcional, em qualquer navegador, at no Lynx. A camada 3 melhora (muito) a experincia para quem tem navegadores mais atuais. Sim, voc j ouviu esse papo todo, por isso que esse site exite. Agora faremos a mesma coisa, com Ajax. uma camada, acima do CSS, que melhora ainda mais a experincia de quem tem navegadores capazes de v-la. Mas as coisas continuam funcionando normalmente no Lynx. Isso tem vantagens muito semelhantes ao uso de CSS para construo de layouts tableless, voc separa seu contedo do comportamente, e pode alterar um sem precisar mexer no outro. E, claro, voc pode escolher no trabalhar assim, e se tiver uma aplicao realmente fantstica, como o Google Maps, as pessoas vo agradec-lo. Depende do que voc vai desenvolver, e como isso vai ser usado. A aplicao que queremos desenvolver um site simples, de contedo comum. exatamente este site que voc est vendo, desenvolvido com PHP e Ajax.

Apenas um site comum

Para comear, vamos criar as primeiras camadas, do jeito mais simples possvel para no confundir voc com coisas que no importam agora. Vamos trabalhar com PHP porque uma linguagem muito conhecida (embora eu odeie PHP.) O cdigo to simples que eu no me animei em desenvolver verses Python ou ASP dele. Mas, se algum quiser gastar cinco minutos para faz-lo, nos avise que publicaremos aqui o link do seu trabalho para os interssados. H duas pginas php no processo, a index.php, em que voc navega, e a funcoes.php, que contm as funes PHP necessrias e ser tambm a pgina que ser requisitada pelo Ajax. Comecemos pela index.php. H um trecho assim no comeo:
include("funcoes.php");

//L o parmetro i (ndice do contedo) $i=1; if(isset($_GET["i"]))$i=intval($_GET["i"]);

Aqui inclumos o arquivo de funes e lemos o valor i recebido na querystring. Se i no estiver presente, seu valor ser 1. No menu os links so construdos assim:
<li><a <li><a <li><a <li><a <li><a href="?i=1"<?classi(1)?> href="?i=2"<?classi(2)?> href="?i=3"<?classi(3)?> href="?i=4"<?classi(4)?> href="?i=5"<?classi(5)?> title="Parte title="Parte title="Parte title="Parte title="Parte 1">Introduo</a></li> 2">Objetivos</a></li> 3">Site comum</a></li> 4">Parte 4</a></li> 5">Parte 5</a></li>

As chamadas funo classi servem para que o cdigo class="selected" seja inserido no link atual ( isso o que deixa marcado o link atual no menu). O ltimo cdigo de interesse:
<div id="conteudo"> <?=leconteudo($i)?> </div>

Aqui dizemos que, dentro do div conteudo, o PHP vai colocar o contedo (escolhido pelo valor de i na querystring). Agora vamos dar uma olhada no funcoes.php. O trecho que nos interessa agora:
/* L o contedo de ndice n. Aqui estou lendo de arquivos html no disco, para no perdermos tempo com coisas que fogem ao escopo do artigo. No mundo real, geralmente voc vai ler isso aqui do banco de dados, ou usar uma funo pronta disponibilizada por seu CMS. */ function leconteudo($n){ return file_get_contents("$n.html"); } //Insere class="selected" se n=i function classi($n){ global $i; if($n==$i)echo ' class="selected"'; }

As funes so as mesmas que chamamos no index, de modo que acho que apenas os comentrios j elucidam tudo (se voc no entende PHP, contente-se em ler os comentrios, simples.) Com isso j temos um site, funcionando.

Como obter o contedo

H duas maneiras de um navegador requisitar informaes do servidor sem descarregar a pgina atual. A primeira a arqueolgica tcnica de esconder um frame (hoje em dia prefiro trabalhar com um iframe, claro) e fazer suas requisies nele. Assim, digamos que quisssemos obter uma lista de cidades do servidor, e passar essa lista para a funo javascript fazAlgumaCoisaComAsCidades. Poderamos requisitar uma pgina num iframe, cujo cdigo seria:
<script type="text/javascript"> parent.fazAlgumaCoisaComAsCidades([ "Belo Horizonte", "Rio de Janeiro",

"Porto Alegre", "Curitiba" ]) </script>

Essa soluo era usada h muito tempo, desde o sculo passado. Esconde-se o iframe com CSS e tudo resolvido. Apesar disso, um jeito um tanto deselegante de resolver o problema, principalmente porque vai fazer aquele sonzinho de "clic" ao navegar no Internet Explorer, mas tambm porque vai interferir no boto de voltar e entrar no histrico do sujeito. Uma abordagem mais atual para o problema o uso do objeto XMLHttpRequest, que faz parte do padro ECMA e est presente em todas as boas verses do Javascript. Os navegadores que suportam XMLHttpRequest hoje incluem:

Opera 8 Mozilla e Firefox Konqueror Safari

Alm disso o Internet Explorer, desde a verso 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest bom o suficiente para que possamos us-lo (e no mais que isso.) Assim, nosso primeiro desafio criar o objeto XMLHttpRequest ou XMLHTTP, dependendo do navegador. Isso no to complicado:
try{ xmlhttp = new XMLHttpRequest(); }catch(ee){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } } }

No final desse cdigo, teremos em xmlhttp o objeto apropriado para nossa conexo ou, no caso de um navegador sem suporte a nenhum dos objetos acima, teremos false, que podemos usar para no mexer no contedo em navegadores onde o Ajax vai funcionar. Vejamos um exemplo de como usar esse objeto:
xmlhttp.open("GET", "http://www.tableless.com.br/ajax/",true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4){ alert(xmlhttp.responseText) } } xmlhttp.send(null)

O objeto xmlhttp executado de maneira assncrona, numa outra thread. Por isso no lemos o retorno depois de chamar o mtodo send, mas criamos uma funo onreadystatechange, que ser executada pelo objeto quando ele terminar sua navegao.

Contruindo a aplicao

Vamos agora construir a pgina PHP que ser solicitada pelo objeto XMLHttpRequest, em seguida faremos as funo Javascript em que o navegador usar est pgina. Vamos usar a prpria funcoes.php, inserindo ao final:
/* Essa aqui a parte necessria para o Ajax. Se este arquivo for chamado sozinho, recebendo um parmetro n, ele retorna o texto de ndice n. Passa pela funo urlencode por causa dos bugs do MSXML com acentos (valeu mais uma vez, Bill!) */ if(isset($_GET["n"])){ $t=leconteudo(intval($_GET["n"])); echo(urlencode($t)); }

Note que estamos usando a leconteudo, funo que j tnhamos. DRY. Esse um bom conselho. Se for preciso, quebre as funes que voc j tem em pedaos menores, para que voc possa usar para gerar o cdigo para Ajax as mesmas funes que usa para o cdigo normal. Isso vai salvar sua vida, principalmente na manuteno. Usamos urlencode porque o componente da Microsoft tem um grave problema com acentos. No consegui at hoje fazer o Internet Explorer 5 requisitar corretamente pginas com acentos de jeito nenhum. Ento usamos urlencode no servidor e depois, no navegador, usaremos seu inverso em javascript: unescape. Agora a mgica:
atual=0 function carrega(n){ //Exibe o texto carregando no div contedo var conteudo=document.getElementById("conteudo") conteudo.innerHTML='<div class="carregando">carregando...</div>' //Guarda a pgina escolhida na varivel atual atual=n //Abre a url xmlhttp.open("GET", "funcoes.php?n="+n,true); //Executada quando o navegador obtiver o cdigo xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4){ //L o texto var texto=xmlhttp.responseText //Desfaz o urlencode texto=texto.replace(/\+/g," ") texto=unescape(texto) //Exibe o texto no div contedo var conteudo=document.getElementById("conteudo") conteudo.innerHTML=texto //Obtm os links do menu var menu=document.getElementById("menu") var links=menu.getElementsByTagName("a") //Limpa as classes do menu for(var i=0;i<links.length;i++) links[i].className="" //Marca o selecionado links[atual-1].className="selected" } } xmlhttp.send(null)

Essa funo carrega o texto selecionado por n e o coloca no div conteudo, alm de marcar o link selecionado no menu com a classe selected. Se voc tiver dificuldades com ele, sugiro uma lida no meu tutorial de DHTML Crossbrowser, principalmente nas sees "Maquiagem" e "Contedo".

Fazendo acontecer
O truque agora o seguinte: precisamos fazer com que chamadas funo carrega sejam atribudas aos cliques nos links do menu. O jeito pr-histrico de se fazer isso inserir onclick="carrega(1);return false" em cada um dos links. Mas isso vai gerar uma srie de dores de cabea. O primeiro problema que assim acoplamos o HTML ao Javascript, de modo que se um dia removermos ou mudarmos o javascript vamos ter que mexer de novo no HTML. Para voc acostumado com tableless, isso o equivalente a usar align="center" bgcolor="red", por exemplo. O segundo problema que em navegadores sem suporte a XMLHttpRequest a funo vai ser chamada assim mesmo, gerando erros de javascript. Ento o ideal que usemos event listeners, de modo a no ter que inserir mais nada em nosso HTML. Isso ficaria assim:
function menuclick(e){ //Correo para eventos quebrados da Microsoft if(typeof(e)=='undefined')var e=window.event source=e.target?e.target:e.srcElement //Correo para o bug do Konqueror/Safari if(source.nodeType==3)source=source.parentNode //Obtm o nmero quebrando a url n=source.getAttribute("href").replace(/.*=/g,"") //Chama o carrega carrega(parseInt(n)) //Cancela o click (evita a navegao) return false } function init(){ //Obtm os links do menu var menu=document.getElementById("menu") var links=menu.getElementsByTagName("a") //Atribui o evento for(var i=0;i<links.length;i++) links[i].onclick=menuclick } if(xmlhttp)window.onload=init

Aqui tambm o cdigo bastante simples, e voc deve entender apenas lendo os comentrios. Os pontos que podem gerar discusso so as correes para IE e Konqueror no comeo da menuclick e a expresso regular que quebra a url. As correes para navegadores foram ensinadas no tutorial de DHTML Crossbrowser, na seo "Comportamento", e a expresso regular bastante simples, ela apenas elimina do endereo do link tudo o que vem antes do sinal de igual (Para saber mais sobre a fantstica ferramenta que o uso de expresses regulares recomendo o guia do Aurlio.)

O passo seguinte colocar todo o contedo em um arquivo javascript, que eu chamei de ajax.js, e inserir uma chamada para esse arquivo no cabealho do index.php. E est pronta nossa aplicao.

Conselhos finais
Espero que voc tenha entendido basicamente do que se trata o tal Ajax. Espero tambm seu feedback. Se voc encontrar algo errado, por favor avise. Se tem mais idias e quer extender o cdigo aqui, sinta-se vontade. Se quer se aprofundar mais no assunto e aprender, por exemplo, como fazer mudar o endereo na barra de endereos e habilitar os botes de voltar, avanar e recarregar, h uma excelente referncia aqui. Este site foi testado em Internet Explorer 5.0 e 6.0, Firefox 1.0.4, Opera 8.01 e Konqueror 3.4.1 e, surpreendentemente, funcionou. Obviamente, completamente acessvel em navegadores em que o Javascript falhar (testei no Lynx.) Fique ligado, depois de muito tempo em que o Javascript era mal visto pela nata dos padres web, o movimento em direo a um uso inteligente e acessvel est apenas comeando. Sinto bons ventos. Elcio Ferreira * Tableless.com.br