Introdução

52 :: tutorial
AJAX Introdução
Parte 1
Elcio Ferreira
Desenvolvedor e instrutor em padrões web
http://elcio.com.br/
Uma das facetas do trabalho com internet que mais
uma área da página fazendo requisições em segundo plano
me apaixona é a quantidade de mudanças com que temos
ao servidor, sem realizar uma navegação completa ou re-
que conviver. Sou um sujeito ávido por novidades, extre-
carregar a página atual.
mamente crédulo no futuro, sempre achando que vamos
O fato de essa conexão ser assíncrona é de grande
encontrar um jeito melhor de fazer as coisas que já faze-
valor. Você pode, por exemplo, solicitar do usuário o CEP,
mos. É por isso que, há alguns anos, quando ouvi falar
e-mail e senha como os primeiros dados. Após ele preen-
de padrões web e tableless pela primeira vez, corri para
cher o CEP, você pode buscar o endereço dele no servidor,
estudar o assunto.
enquanto ele digita seu e-mail e senha. Em seguida, você
É por isso também que AJAX tem me empolgado tan-
pode verificar a disponibilidade daquele e-mail para cadas-
to. Já era tempo de inventarmos uma maneira melhor de
tro, enquanto ele confere seu endereço. Isso tem grande
interagir com os usuários no lado do cliente. HTML e CSS
impacto sobre a experiência do usuário, pois ele não pre-
são excelentes respostas para a publicação de conteúdo,
cisa ficar esperando pela carga dos dados.
mas quando falamos de aplicações web suas capacidades
Quem inventou isso?
são bastante limitadas. Dessa forma, o AJAX dá aos desen-
Talvez seja essa a primeira pergunta que muita gente
volvedores possibilidades que simplesmente não existiam
vai fazer ao conhecer os fatos básicos sobre AJAX. Onde
antes. Hoje, podemos criar aplicações com um novo nível
surgiu? Quem inventou? Na verdade, não podemos apon-
de interação, sem abrir mão da simplicidade de manuten-
tar o nome do criador. Não é uma linguagem de programa-
ção, do código leve e padronizado e da acessibilidade.
ção ou uma tecnologia, é uma maneira nova de se utilizar
Se você ainda acha que esse papo é todo hype, e a
tecnologias e linguagens já existentes. Ao trabalhar com
moda logo vai passar, sugiro que teste, em seqüência, o
AJAX, construímos em cima do HTML e CSS que já temos,
GMail, o Google Maps, o Flickr e o Basecamp. Você vai
usando Javascript, DOM e o objeto XMLHttpRequest.
notar que não estamos falando de uma tecnologia nova
Nada disso é uma invenção nova ou revolucionária.
com nome bonito, mas de algo que muda realmente a ex-
AJAX é uma maneira de se usar essas tecnologias em con-
periência do usuário.
junto. Esse tipo de coisa já vem sendo utilizada há algum
O que é AJAX?
tempo. Minha primeira aplicação com XMLHttp foi cons-
O nome AJAX é uma sigla para “Asynchronous Ja-
truída em 1999 e, naturalmente, só funcionava em Internet
vaScript and XML”. Trata-se de uma maneira de fazer com
Explorer. Onde está então a novidade? Por que agora está
que seu navegador, com Javascript, carregue conteúdo do
todo mundo falando do tal do AJAX?
servidor sem recarregar a página atual. Você pode, por
A forma como usávamos XMLHttp há era um grande
exemplo, verificar os dados digitados em um formulário,
complicador sobre nossas aplicações. Nossos arquivos de
preencher o endereço baseado no CEP, exibir uma mensa-
servidor eram exclusivamente feitos para serem entendidos
gem de ajuda sobre parte de sua tela ou mesmo recarregar
por nossas próprias aplicações, o que eliminava qualquer
tutorial :: 53
possibilidade de mash-ups ou outros usos Web 2.0 deles.
Acessibilidade
Nossos códigos eram complexos, construídos em cima de
A grande preocupação com a acessibilidade também
HTML e CSS muito complexos. Hoje, realmente, as coisas
é uma das boas conseqüências da forma de pensar que
mudaram.
adquirimos com os padrões web. Ouvíamos falar muito
A simplicidade dos padrões web
pouco sobre isso e agora todos nos preocupamos em como
A primeira coisa que mudou de lá para cá foi a grande
nosso site vai estar num leitor de telas ou num browser de
descomplicação do desenvolvimento web, os padrões do
texto. Isso também tem boas conseqüências em relação à
W3C. Hoje, o código cliente de nossas aplicações é todo
indexação de nosso conteúdo pelos robôs de busca.
muito mais simples. Nosso HTML foi reduzido para um ter-
Naquela época, não tínhamos ferramentas para
ço de seu tamanho. Nosso código é padronizado, muito
tornar qualquer trabalho minimamente interessante com
parecido com o código de milhares de outros sites.
Javascript realmente acessível. Hoje é possível, com a expe
Essa simplicidade nos deixou mal acostumados. Não
riência que adquirimos e com a evolução dos navegadores,
queremos mais trabalhar com código complexo. É nesse
escrever verdadeiras aplicações de uma só página que
contexto que surgem as aplicações AJAX. Embora, é claro,
permanecem completamente acessíveis quando usadas
em grandes aplicações, alguma complexidade no código
de um navegador sem suporte a AJAX.
seja algo quase inevitável (imagine o tamanho do código do
É importante que você note que construir aplicações
GMail), nosso código Javascript é hoje muito mais simples
com AJAX não as torna automaticamente acessíveis, da
do que há alguns anos. E isso não é um mérito do Javas-
mesma maneira que não as torna automaticamente apli-
cript, mas da mudança em nossa maneira de pensar.
cações Web 2.0. É uma escolha do desenvolvedor tornar
Javascript, DOM e XMLHttpRequest
sua aplicação acessível, e ele precisa trabalhar para isso.
Outro fato que torna as coisas diferentes atualmente
Mas esse trabalho de acessibilidade é muito mais simples
é a maturidade dos navegadores em relação ao Javascript,
quando trabalhamos com AJAX, principalmente se nosso
DOM e XMLHttpRequest. As coisas eram verdadeiramen-
método de trabalho foi construído pensando também em
te terríveis no tempo do Netscape 4. Hoje, é tarefa trivial
acessibilidade, do que era antigamente com nosso velho
escrever Javascript que funcione bem em qualquer navega-
código complexo.
dor. Graças a um padrão chamado DOM (Document Object
XMLHttpRequest
Model), existe uma maneira comum de se acessar e alterar
A tecnologia central em AJAX é o XMLHttpRequest.
objetos HTML via Javascript. Todos os navegadores moder-
Trata-se de um objeto Javascript que pode ser usado para
nos suportam adequadamente o DOM, e mesmo o Internet
fazer requisições ao servidor web, em segundo plano, sem
Explorer, o que tem o pior suporte, oferece recursos para
congelar o navegador ou recarregar a página atual. O obje-
que possamos trabalhar satisfatoriamente.
to XMLHttpRequest é hoje parte da especificação do DOM,
Convém dizer que o conhecimento de Javascript e
nível 3. Ou seja, qualquer navegador que queira oferecer
DOM é essencial para o bom trabalho com AJAX. Se você
suporte aos padrões precisa implementar o objeto XM-
tiver dificuldades em acompanhar esta série de artigos,
LHttpRequest.
sugiro que leia primeiro um tutorial que escrevi sobre o
assunto em http://elcio.com.br/crossbrowser.
Infelizmente, as coisas não são tão simples assim.
Aqui, novamente, o Internet Explorer se comporta de maneira diferente dos demais, gerando dores de cabeça. Entretanto, não é difícil lidar com isso. Precisaremos primeiro
54 :: tutorial
entender o porquê das diferenças, através da história do
Os outros
objeto XMLHttpRequest.
Nasceu no Internet Explorer
Aqui um fato que vai surpreender a muitos: o primeiro
navegador a oferecer suporte a XMLHttpRequest foi o Internet Explorer 5. De fato, a idéia ganhou o mundo com o
navegador da Microsoft, que criou um objeto ActiveX para
fazer esse trabalho.
O Internet Explorer 5 era um navegador à frente de
seu tempo. Foi o primeiro a suportar CSS 2 e, embora consideremos seu suporte aos padrões sofrível, conseguimos
Todos os navegadores modernos suportam AJAX
fazer sites para ele até hoje. Basta pensar que o maior
concorrente na época era o Netscape 4 e você vai entender
o que quero dizer.
Todos os outros navegadores modernos incluem o
objeto XMLHttpRequest, definido pela especificação do
O verdadeiro problema com o Internet Explorer não
W3C, ao invés do ActiveX da Microsoft. Entre estes nave-
é o fato de ele ser um navegador ruim, apenas o fato de
gadores estão todos os baseados em Mozilla, como Firefox
ele ser um navegador antigo. A versão final do Internet
e Netscape, o Opera, a partir da versão 7, o Konqueror, a
Explorer 6 saiu no final de 2001. É tempo demais. Pois bem,
partir da versão 3.4, e o Safari. Nestes navegadores, para
vejamos como se criava um objeto XMLHttp (o nome que a
criar um objeto XMLHttpRequest, basta:
Microsoft deu ao objeto) no Internet Explorer 5:
var xmlhttp=new XMLHttpRequest()
var xmlhttp=new ActiveXObject(“Microsoft.XMLHttp”)
É interessante notar também que esse objeto tem
Junto com o Internet Explorer 6, a Microsoft distribuiu
muito mais recursos e possibilidades que o ActiveX da
uma nova versão de seu objeto ActiveX, que corrigia alguns
Microsoft. Podemos, por exemplo, obter o resultado
incômodos erros da versão anterior. Assim, no Internet Ex-
c o n f o r m e e l e é c a r re g a d o e n ã o a p e n a s a o f i n a l d a
plorer 6, essa sintaxe mudou um pouco:
requisição. Isso nos permite criar barras de progresso ou
exibir um conteúdo extenso à medida que é carregado.
var xmlhttp=new ActiveXObject(“MSXML2.XMLHttp”)
Infelizmente, nada disso é possível no Internet Explorer.
Na segunda parte deste tutorial (serão cinco no total),
vamos apresentar a construção de um formulário de cadastro, usando AJAX. Até a próxima!