Ajax para quem_ouviu_falar

Ajax para quem só ouviu falar
1. Introdução
2. Objetivos
3. Site comum
4. Obter o conteúdo
5. Construindo a aplicação
6. Fazendo acontecer
7. Conselhos finais

Introdução
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 dúvidas
iniciais e mostre o "camino das pedras" para quem só ouviu falar naquilo e quer saber o
que é, pra que serve, e ter uma idéia de como se faz.

Este artigo é uma tentativa dessas. O assunto é Ajax. Ajax é a sigla para "Asynchronous
Javascript and XML". Se você entende inglês, pode ler uma excelente explicação do
assunto no artigo de Jesse James Garrett: Ajax: A New Approach to Web Applications.
Não é uma coisa nova, e eu já falei um pouco sobre isso no meu blog. A idéia é utilizar
Javascript para transformar suas páginas em aplicações, de modo que não precise
recarregar a tela cada vez que o usuário clicar em alguma coisa. Você pode recarregar
apenas a área que precisa ser alterada pela ação realizada.

Há alguns excelentes exemplos do que estou falando. Você pode dar uma olhada neles
para ter idéia 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 - Fantástico, fabuloso.
• Gmail - O melhor webmail que eu já vi.
• Start.com - Sim, é da Microsoft, por quê? Muito bom também.

Claro, não quero te ensinar neste artigo a construir um GMail ou coisa parecida. Aliás,
nem todo mundo tem a oportunidade de trabalhar em projetos de grandes aplicações
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 aplicação de tamanho razoável, o novo Prodo, o CMS leve da
Atípico, a empresa onde eu orgulhosamente passo os dias me divertindo. Infelizmente,
ele não está disponível para test-drive. Mas há outra aplicação, um pouco menor, mas
de tamanho já considerável, que eu fiz há algum tempo e você pode ver: o editor do
blog do Tableless. Há uma senha de demonstração para isso, usuário "ajax", senha
"ajax". Pode mexer à vontade, o conteúdo não é o real (é uma cópia do conteúdo real
atualizada a cada 30 minutos.)

Objetivos
Nosso objetivo com esse artigo é contruir uma aplicação Ajax muito simples, que te faça
entender os conceitos básicos por trás disso tudo. A primeira coisa importante a ser dita
aqui é a respeito de acessibilidade. É possível, e bastante desejável, construir aplicações
Ajax que tenham algumas características:

• Funcionar sem Javascript
• Funcionar sem CSS
• Ao clicar, mudar a url na barra de endereços e o título da página
• Manter funcionais os botões de avançar, voltar e recarregar
• Permitam salvar links, adicionar a bookmarks, etc.

O Backbase e o Gmail, por exemplo, têm as três últimas características. 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 aplicação.

As cinco características são desejáveis e, claro, a decisão de implementá-las é sua,
considerando o tipo de aplicação que está desenvolvendo. E sempre há a possibilidade
de, como o GMail, oferecer uma versão mais simples de sua aplicação para navegadores
não suportados.

Nosso objetivo neste artigo é construir um aplicativo Ajax simples, completamente
funcional em navegadores não compatíveis. 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 código é construído de acordo com as seguintes camadas:

1. Conteúdo HTML
2. Programação Server-Side (fazer funcionar)
3. CSS (esta etapa e a anterior podem mudar de ordem)
4. Javascript e Ajax

Fazendo assim, ao terminar a camada 2, você tem uma aplicação completamente
funcional, em qualquer navegador, até no Lynx. A camada 3 melhora (muito) a
experiência 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 experiência 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 construção de layouts
tableless, você separa seu conteúdo do comportamente, e pode alterar um sem precisar
mexer no outro. E, é claro, você pode escolher não trabalhar assim, e se tiver uma
aplicação realmente fantástica, como o Google Maps, as pessoas vão agradecê-lo.
Depende do que você vai desenvolver, e como isso vai ser usado.

A aplicação que queremos desenvolver é um site simples, de conteúdo comum. É
exatamente este site que você está vendo, desenvolvido com PHP e Ajax.

Apenas um site comum
Para começar, vamos criar as primeiras camadas, do jeito mais simples possível para
não confundir você com coisas que não importam agora. Vamos trabalhar com PHP
porque é uma linguagem muito conhecida (embora eu odeie PHP.) O código é tão
simples que eu não me animei em desenvolver versões Python ou ASP dele. Mas, se
alguém quiser gastar cinco minutos para fazê-lo, nos avise que publicaremos aqui o link
do seu trabalho para os interssados.

Há duas páginas php no processo, a index.php, em que você navega, e a funcoes.php,
que contém as funções PHP necessárias e será também a página que será requisitada
pelo Ajax. Comecemos pela index.php. Há um trecho assim no começo:

include("funcoes.php");

//Lê o parâmetro i (índice do conteúdo)
$i=1;
if(isset($_GET["i"]))$i=intval($_GET["i"]);

Aqui incluímos o arquivo de funções e lemos o valor i recebido na querystring. Se i não
estiver presente, seu valor será 1. No menu os links são construídos assim:

<li><a href="?i=1"<?classi(1)?> title="Parte 1">Introdução</a></li>
<li><a href="?i=2"<?classi(2)?> title="Parte 2">Objetivos</a></li>
<li><a href="?i=3"<?classi(3)?> title="Parte 3">Site comum</a></li>
<li><a href="?i=4"<?classi(4)?> title="Parte 4">Parte 4</a></li>
<li><a href="?i=5"<?classi(5)?> title="Parte 5">Parte 5</a></li>

As chamadas à função classi servem para que o código class="selected" seja
inserido no link atual (é isso o que deixa marcado o link atual no menu). O último
código de interesse:

<div id="conteudo">
<?=leconteudo($i)?>
</div>

Aqui dizemos que, dentro do div conteudo, o PHP vai colocar o conteúdo (escolhido pelo
valor de i na querystring). Agora vamos dar uma olhada no funcoes.php. O trecho que
nos interessa agora:

/*
Lê o conteúdo de índice n. Aqui estou lendo de arquivos
html no disco, para não 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 função
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 funções são as mesmas que chamamos no index, de modo que acho que apenas os
comentários já elucidam tudo (se você não entende PHP, contente-se em ler os
comentários, é simples.)

Com isso já temos um site, funcionando.

Como obter o conteúdo
Há duas maneiras de um navegador requisitar informações do servidor sem descarregar
a página atual. A primeira é a arqueológica técnica de esconder um frame (hoje em dia
prefiro trabalhar com um iframe, claro) e fazer suas requisições nele. Assim, digamos
que quiséssemos obter uma lista de cidades do servidor, e passar essa lista para a
função javascript fazAlgumaCoisaComAsCidades. Poderíamos requisitar uma página
num iframe, cujo código seria:

<script type="text/javascript">
parent.fazAlgumaCoisaComAsCidades([
"Belo Horizonte",
"Rio de Janeiro",

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

Essa solução era usada há muito tempo, desde o século 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 também porque vai interferir no botão de voltar e entrar no
histórico do sujeito.

Uma abordagem mais atual para o problema é o uso do objeto XMLHttpRequest, que faz
parte do padrão ECMA e está presente em todas as boas versões do Javascript. Os
navegadores que suportam XMLHttpRequest hoje incluem:

• Opera 8
• Mozilla e Firefox
• Konqueror
• Safari

Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um
substituto para o XMLHttpRequest bom o suficiente para que possamos usá-lo (e não
mais que isso.)

Assim, nosso primeiro desafio é criar o objeto XMLHttpRequest ou XMLHTTP,
dependendo do navegador. Isso não é tão 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 código, teremos em xmlhttp o objeto apropriado para nossa conexão ou,
no caso de um navegador sem suporte a nenhum dos objetos acima, teremos false, que
podemos usar para não mexer no conteúdo 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 assíncrona, numa outra thread. Por isso não
lemos o retorno depois de chamar o método send, mas criamos uma função
onreadystatechange, que será executada pelo objeto quando ele terminar sua
navegação.

Contruindo a aplicação

Vamos agora construir a página PHP que será solicitada pelo objeto XMLHttpRequest,
em seguida faremos as função Javascript em que o navegador usará está página.
Vamos usar a própria funcoes.php, inserindo ao final:

/*
Essa aqui é a parte necessária para o Ajax. Se este
arquivo for chamado sozinho, recebendo um parâmetro
n, ele retorna o texto de índice n. Passa pela
função 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, função que já tínhamos. DRY. Esse é um bom
conselho. Se for preciso, quebre as funções que você já tem em pedaços menores, para
que você possa usar para gerar o código para Ajax as mesmas funções que usa para o
código normal. Isso vai salvar sua vida, principalmente na manutenção.

Usamos urlencode porque o componente da Microsoft tem um grave problema com
acentos. Não consegui até hoje fazer o Internet Explorer 5 requisitar corretamente
páginas com acentos de jeito nenhum. Então usamos urlencode no servidor e depois, no
navegador, usaremos seu inverso em javascript: unescape. Agora a mágica:

atual=0
function carrega(n){

//Exibe o texto carregando no div conteúdo
var conteudo=document.getElementById("conteudo")
conteudo.innerHTML='<div class="carregando">carregando...</div>'

//Guarda a página escolhida na variável atual
atual=n

//Abre a url
xmlhttp.open("GET", "funcoes.php?n="+n,true);

//Executada quando o navegador obtiver o código
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 conteúdo
var conteudo=document.getElementById("conteudo")
conteudo.innerHTML=texto

//Obtém 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 função carrega o texto selecionado por n e o coloca no div conteudo, além 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
seções "Maquiagem" e "Conteúdo".

Fazendo acontecer
O truque agora é o seguinte: precisamos fazer com que chamadas à função carrega
sejam atribuídas aos cliques nos links do menu. O jeito pré-histórico de se fazer isso é
inserir onclick="carrega(1);return false" em cada um dos links. Mas isso vai
gerar uma série de dores de cabeça. 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 função vai ser
chamada assim mesmo, gerando erros de javascript. Então o ideal é que usemos event
listeners, de modo a não ter que inserir mais nada em nosso HTML. Isso ficaria assim:

function menuclick(e){

//Correção para eventos quebrados da Microsoft
if(typeof(e)=='undefined')var e=window.event
source=e.target?e.target:e.srcElement
//Correção para o bug do Konqueror/Safari
if(source.nodeType==3)source=source.parentNode

//Obtém o número quebrando a url
n=source.getAttribute("href").replace(/.*=/g,"")

//Chama o carrega
carrega(parseInt(n))

//Cancela o click (evita a navegação)
return false
}

function init(){

//Obtém 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 também o código é bastante simples, e você deve entender apenas lendo os
comentários. Os pontos que podem gerar discussão são as correções para IE e
Konqueror no começo da menuclick e a expressão regular que quebra a url.

As correções para navegadores foram ensinadas no tutorial de DHTML Crossbrowser, na
seção "Comportamento", e a expressão regular é bastante simples, ela apenas elimina
do endereço do link tudo o que vem antes do sinal de igual (Para saber mais sobre a
fantástica ferramenta que é o uso de expressões regulares recomendo o guia do
Aurélio.)

O passo seguinte é colocar todo o conteúdo em um arquivo javascript, que eu chamei
de ajax.js, e inserir uma chamada para esse arquivo no cabeçalho do index.php. E está
pronta nossa aplicação.

Conselhos finais
Espero que você tenha entendido basicamente do que se trata o tal Ajax. Espero
também seu feedback. Se você encontrar algo errado, por favor avise. Se tem mais
idéias e quer extender o código aqui, sinta-se à vontade.

Se quer se aprofundar mais no assunto e aprender, por exemplo, como fazer mudar o
endereço na barra de endereços e habilitar os botões de voltar, avançar e recarregar,
há uma excelente referência 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
acessível 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
padrões web, o movimento em direção a um uso inteligente e acessível está apenas
começando. Sinto bons ventos.

Elcio Ferreira * Tableless.com.br

Ajax para quem_ouviu_falar

Mais conteúdo relacionado

Mais procurados (20)

Destaque (8)

Semelhante a Ajax para quem_ouviu_falar (20)

Último (16)

Ajax para quem_ouviu_falar