Web Interativa com

Ajax e PHP
Juliano Niederauer

Novatec
 1 O que é Ajax?
         O
        L
        U
        T
          Í
         P
        A
         C

A palavra Ajax vem da expressão Asynchrono

 Asynchronous
us JavaSc ript and XML. É o uso sistemático
JavaScript si stemático
de JavaScript e XML (entre outras tecnologias) para tornar o navegador mais interativo
com o usuário, utilizando-se solicitações assíncronas de inormações. Isso quer dizer
que podemos utilizar o Ajax para azer uma solicitação ao servidor web sem que seja
necessário recarregar a página que estamos acessando. Veremos a seguir as principais
dierenças entre as páginas que utilizam esse recurso e as páginas que azem uso do
modelo tradicional de comunicação com o servidor.
servidor.

1.1 Modelo “clica e espera” versus modelo interativo

Desde o surgimento da internet, o modelo de interação entre usuário e servidor via
HTTP é baseado em um sistema simples de hipertexto. Ou seja, você clica em um link
para requisitar um documento e então espera... o servidor responde, processando sua
requisição e devolvendo-lhe o documento. Depois de usuruir desse documento, você
clica em mais um link e espera... e assim por diante (veja a Figura 1.1).

NAVEGADOR CLIENTE
Solicitação SERVIDOR
HTTP

Interface do usuário Servidor web

Dados HTML

Banco de dados e
processos do servidor 

Figura 1.1 – Modelo clássico de aplicação web.

17
18 Web Interativa com Ajax e PHP

Esse sistema ainda está em uso, porém os designers e desenvolvedores sempre questio-
naram se esse inconveniente chama-responde teria m. Por diversos atores, geralmente
eles recebiam um não como resposta.
Mesmo com a evolução dos navegadores (browsers), ainda havia muitas restrições,
como, por exemplo, as incompatibilidades com o sistema operacional e com o nave-
gador do usuário, alta de plug-ins instalados na máquina-cliente e baixa qualidade
das conexões utilizadas pelos usuários. Diante dessas restrições, os desenvolvedores
trabalharam no sentido de melhorar o modelo de interação da web, mesmo dentro do
sistema chama-responde. Assim, oram criando novas técnicas para tornar as aplicações
mais interessantes e azer com que elas se tornassem tão úteis quanto suas aplicações
equivalentes para desktop.
Podemos dizer que uma dessas técnicas, denominada Ajax, apesar de existir há bas-
tante tempo, só ganhou notoriedade quando aquelas antigas restrições começaram a ser
superadas. Assim como ocorreu na época em que os navegadores passaram a suportar
tecnologias como CSS e XHTML, a possibilidade de utilizar o Ajax nos principais na-
vegadores oi comemorada pelos desenvolvedores, de modo que o principal beneciado
com a adoção dessa erramenta será o usuário nal, pois a fexibilidade do Ajax irá
conerir uma grande agilidade à atualização das inormações na web.
O modelo de uma aplicação que utiliza Ajax está representado na Figura 1.2.
NAVEGADOR CLIENTE

Interface do usuário

Chamada Dados Solicitação SERVIDOR

Javascript HTML HTTP

Ferramenta Ajax Servidor Web / XML

Dados XML

Banco de dados e
processos do servidor 

Figura 1.2 – Modelo de aplicação com Ajax.

Veja que, nesse modelo, a interação entre o navegador e o servidor web não ocorre
de orma totalmente direta, mas por meio da erramenta Ajax. E como o Ajax é ativado
por uma chamada JavaScript, o usuário pode permanecer visualizando a página nor-
malmente enquanto ocorre a comunicação com o servidor web.
O servidor processa a solicitação do Ajax (por exemplo, realizando alguma pesquisa
ou simplesmente atualizando alguma inormação no banco de dados) e envia uma
resposta. Caso o servidor retorne dados, o Ajax poderá utilizar esses dados para azer
a atualização de apenas uma parte da página que o usuário está visualizando, sem
Capítulo 1 • O que é Ajax? 19

que seja necessário recarregá-la totalmente. Caso contrário, o usuário também poderá
continuar usuruindo normalmente da página, mas ela não sorerá qualquer alteração
visual. Ou seja, é como se a página pudesse “ouvir” e “alar” simultaneamente.
Portanto, é notável que essa orma de interação entre cliente e servidor possibilitará
não apenas a agilidade na atualização de inormações na web, mas evitará também a
retransmissão desnecessária de inormações estáticas (códigos, textos, imagens etc.),
melhorando o tráego da rede e a usabilidade das páginas, que carão muito mais
parecidas com aplicações do que com simples páginas da internet.
Conorme oi comentado no início do livro, o Ajax já existe há bastante tempo, mas
sua diusão dependia do momento da web e das nossas habilidades em lidar com as
tecnologias envolvidas nesse processo. Finalmente percebemos que a web está passan-
do por esse processo de mudança e já estamos muito mais aptos a trabalhar com as
tecnologias disponíveis nessa área. Veremos a seguir, como exemplo, algumas situações
onde seria interessante o uso do Ajax.

1.2 Exemplos de uso prático

Existem diversos tipos de situações nas quais o uso do Ajax seria extremamente útil,
dentre as quais podemos citar a validação de ormulários, atualização de enquetes e
de carrinhos de compras (e-commerce), conversação on-line (chats), entre outras que
priorizam a atualização de inormações em tempo real.
Outro exemplo bastante comum são os sites de relacionamento, os quais vêm uti-
lizando essa técnica para acilitar a classicação de seus usuários. Um dos sites mais
conhecidos, a rede social Orkut, pertencente ao Google, utiliza bastante esse recurso. Os
desenvolvedores do Orkut criaram uma legenda que permite a cada usuário classicar
seus amigos, conorme mostrado na Figura 1.3:

Figura 1.3 – Legenda utilizada.

20 Web Interativa com Ajax e PHP

Assim, cada amigo relacionado a esse usuário poderá ser classicado por ele de
acordo com essa legenda, como mostra a Figura 1.4.

Figura 1.4 – Marcando itens sem mudar de página.

Por exemplo, se você considera um amigo “superconável”, pode preencher as três

“carinhas”, clicando sobre a terceira delas. Se você é ã de um amigo, pode clicar sobre a
estrela e marcá-la. A pergunta nesse caso é a seguinte: “Como azer para atualizar o banco
de dados no ser vidor a cada vez que o usuário clicar sobre um desses símbolos?”.
Aí é que entra o Ajax. Se estivéssemos utilizando o modelo clássico de aplicação
web, ao clicar sobre um desses símbolos seria enviada uma solicitação ao servidor web
e toda a página deveria ser recarregada. Com o Ajax, ao clicar sobre um dos símbolos,
o navegador se comunica com o servidor por meio de uma chamada JavaScript, permi-
tindo que o usuário continue navegando e visualizando a página como se nada tivesse
acontecido. Mais adiante veremos como implementar um sistema semelhante a esse.
Outra aplicação do Ajax é no comércio eletrônico, mais especicamente na parte
que envolve o carrinho de compras, ou seja, os produtos que o cliente já selecionou
para comprar. Normalmente o rete a ser pago é calculado de acordo com o CEP do
cliente (Figura 1.5).

Figura 1.5 – Calculando o frete do produto.

Capítulo 1 • O que é Ajax? 21

Portanto, o cliente deverá digitar seu CEP, clicar no botão Ok e aguardar até que a
página seja recarregada com o valor do rete calculado pelo sistema. Se osse utilizado
o Ajax, no momento em que o cliente clicasse no botão Ok, haveria uma comunicação
via JavaScript com o servidor para obter o valor do rete, que seria mostrado na tela por
meio do Ajax, enquanto o resto da página permaneceria inalterado.
O mesmo procedimento poderia ser utilizado no caso de uma enquete, Figura 1.6.
No momento em que o usuário respondesse a pergunta, marcando uma das opções,
seria atualizada apenas a parte da página que contém essa enquete. Assim, estaríamos
evitando o recarregamento desnecessário de muito conteúdo, principalmente se or um
grande portal.

Figura 1.6 – Respondendo uma enquete.

Outro exemplo seria a validação de ormulários de cadastro em tempo real. É claro

que se pode azer uma validação do lado cliente por meio de uma unção JavaScript,
porém existem inormações que precisam ser validadas no lado servidor, como, por
exemplo, o nome de usuário (username).
A Figura 1.7 mostra um ormulário de cadastro cuja validação é eita do modo
tradicional, ou seja, o servidor web retorna uma página de resposta inormando que o
username escolhido já existe somente após o usuário submeter o ormulário inteiro à
validação. Se utilizássemos Ajax, poderíamos incluir um botão Testar ao lado do campo
do username. Assim, ao digitar um nome de usuário, um clique no botão Testar ativaria
a erramenta Ajax, que vericaria em tempo real no servidor se o username digitado
é válido.
Um script de bate-papo (chat) poderia ser mais acilmente criado com o uso do Ajax
(Figura 1.8). Assim, o desenvolvedor evitaria o uso de tecnologias mais complexas, como,
por exemplo, a comunicação por sockets.
22 Web Interativa com Ajax e PHP

Figura 1.7 – Validação de formulário em tempo real.

Figura 1.8 – Chat.

Além das aplicações citadas, são inúmeras as situações onde poderíamos utilizar
o recurso do Ajax. Por exemplo, mais adiante veremos como criar uma tabela on-line
editável e um sistema de sugestões para erramentas de busca.
Capítulo 1 • O que é Ajax? 23

Portanto, Ajax não é somente um novo modelo, mas também uma iniciativa na
construção de aplicações web mais dinâmicas e criativas. O Ajax permite que várias
tecnologias trabalhem juntas, cada uma azendo sua parte, conerindo ao desenvolvedor
meios poderosos para a criação de websites.

1.3 Características do Ajax

Pelos exemplos apresentados até o momento, você já pôde perceber que o principal
objetivo do Ajax é melhorar a interatividade entre o usuário e o servidor. Isso signica
que as páginas devem ser programadas de orma a evitar que os usuários esperem em
vão. Não há porque interromper a interação com o usuário a cada vez que a aplicação
necessitar de algo do servidor.
Para atingir esse objetivo, o Ajax utiliza algumas tecnologias bastante conhecidas,
entre outras que são novidades para muitos desenvolvedores. A Figura 1.9 mostra as
tecnologias envolvidas nesse processo, assim como a utilidade de cada uma delas:

 Apresentação Interação dinâmica

XHTML e CSS DOM

Javascript

Troca de dados Chamadas assíncronas

XML XMLHttpRequest

Figura 1.9 – Tecnologias utilizadas pelo Ajax.

Perceba que todo o processo gira em torno da linguagem JavaScript, pois toda a
comunicação entre o usuário e o servidor ocorrerá por meio dessa linguagem, a par-
tir da qual o Ajax será ativado. Talvez a maior novidade apresentada na gura seja o
XMLHttpRequest, que é justamente a tecnologia que viabiliza o processo inteiro. Trata-se
de um objeto JavaScript que torna possível a comunicação assíncrona com o servidor,
sem a necessidade de recarregar a página por completo.
Algumas pessoas acham que XMLHttpRequest, objeto integrante da especicação do
modelo DOM (Document Object Model), é apenas um outro nome para o Ajax, porém,
como você pode ver na Figura 1.9, é apenas uma parte desse processo, que consiste em
agregar diversas tecnologias para conerir interatividade à aplicação web.
24 Web Interativa com Ajax e PHP

O modelo DOM consiste em um conjunto de rotinas que permite o acesso e modi-

cação de documentos XML. Portanto, entra no processo do Ajax na parte de interação
dinâmica, sendo utilizado no tratamento dos dados retornados pelo servidor, ou seja, é
a tecnologia que irá conerir dinamismo, apereiçoando a manipulação das inormações
em questão. Essas inormações, por sua vez, poderão ser retornadas pelo servidor no
conhecido ormato XML (eXtensible Markup Language), um dos mais utilizados para
troca de dados.
Por m, a apresentação desse conteúdo será eita pelas populares linguagens de
marcação HTML ou XHTML (eXtensible Hypertext Markup Language) e pelas olhas
de estilo CSS (Cascading Style Sheets). No Capítulo 2, será eita uma revisão dos prin-
cipais conceitos relativos a cada uma dessas tecnologias, para posteriormente criarmos
nossa primeira aplicação com o uso do Ajax.
Agora, para complementar a explicação sobre o modelo proposto pelo Ajax, acom-
panhe a seguir os princípios dessa erramenta que resumem tudo o que oi explicado
até o momento.

1.3.1 O navegador hospeda uma aplicação, não conteúdo

Analisando o uncionamento do modelo “clica e espera”, comentado neste capítulo,
percebemos que, em uma aplicação web clássica, o navegador executa o papel de um
“terminal bobo”. Ele não sabe nada sobre as ações que o usuário executou até o mo-
mento. Todas essas inormações são armazenadas em uma sessão do usuário, localizada
no servidor web.
Quando o usuário entra no site ou inicia uma sessão, vários objetos são criados no
lado servidor. Por exemplo, um site de comércio eletrônico, o carrinho de compras é
armazenado nessa sessão. Posteriormente, o servidor web envia ao navegador do usuá-
rio a página inicial, que inclui não só códigos HTML, mas também dados do usuário,
conteúdos do site e instruções de ormatação.
Toda vez que o usuário interage com o site, o navegador envia uma requisição ao
servidor, que retorna um outro documento, contendo a mesma mistura de cabeçalhos
e dados. Assim, por ser um “terminal bobo”, o que o navegador az é simplesmente
retirar o documento anterior e exibir o novo, mesmo que os dois documentos sejam
muito semelhantes. Quando o usuário eetua a saída ou echa o navegador, a aplicação
é nalizada e a sessão é destruída. Esse processo é ilustrado pela Figura 1.10.
A gura mostra o navegador azendo quatro requisições em seqüência para o ser-
vidor web, de modo que, em cada uma delas, o servidor retorna uma página inteira
para ser exibida ao usuário. Isso ocorre porque toda a lógica da aplicação está no lado
do servidor.
Capítulo 1 • O que é Ajax? 25

NAVEGADOR SERVIDOR
ENTRADA

Página Sessão do
inicial usuário

Página
web

Página Dados do
web usuário
SAÍDA
Página de
saída Banco de
dados

Figura 1.10 – Fluxo clássico da web.

No caso de uma aplicação Ajax, parte da lógica da aplicação é movida para o nave-
gador (por meio da linguagem JavaScript). Nesse novo cenário, quando o usuário entra
no site ou inicia uma sessão, o servidor envia ao navegador um documento mais com-
plexo, ormado em grande parte por código JavaScript. A idéia é que esse documento se
torne a aplicação do cliente, permanecendo com ele por toda a sessão, mesmo que seja
necessário alterar consideravelmente sua aparência em determinados momentos.
Essa aplicação terá a capacidade de tratar as inormações ornecidas pelo usuário,
decidindo se elas devem ser manipuladas no lado cliente ou no lado servidor, ou ainda
se ará uma combinação dessas duas alternativas. Por exemplo, se houver necessidade de
acessar um banco de dados, a aplicação envia uma requisição ao servidor, caso contrário
ela mesma realiza o tratamento das inormações.
Isso signica que nesse novo modelo o navegador pode armazenar dados sobre o
estado da aplicação, visto que o mesmo documento persiste sobre toda a sessão do
usuário. No caso de um web site de comércio eletrônico, por exemplo, o conteúdo de
um carrinho de compras poderia ser armazenado no próprio navegador em vez de ser
armazenado na sessão do servidor. A Figura 1.11 ilustra como ocorre o fuxo de inor-
mações na web por meio do uso do Ajax.
Perceba que, quando o cliente entra no site, o servidor retorna um documento mais
complexo, que será a aplicação do cliente. Ao contrário do modelo clássico, a aplicação
do cliente é ormada por apenas uma página, que envia reqüentes requisições ao ser-
vidor. Essas requisições, que são eitas de orma assíncrona pelo objeto XMLHttpRequest,
podem ser utilizadas para executar diversas operações, como, por exemplo, consultas e
atualizações nos bancos de dados localizados no servidor.
26 Web Interativa com Ajax e PHP

NAVEGADOR SERVIDOR
ENTRADA

Página Sessão do
Retorna a
(aplicação) usuário
aplicação
do cliente

Requisições
 Alguns freqüentes
dados do
usuário Dados do
usuário
SAÍDA
Página de
saída Banco de
dados

Figura 1.11 – Fluxo da aplicação utilizando Ajax.

Veja também que nesse modelo existe um repositório de dados no próprio navegador,
no qual serão armazenadas inormações relativas às ações que o usuário executou. Assim,
o desenvolvedor pode decidir se acha mais conveniente armazenar uma inormação no
lado cliente ou na sessão do usuário localizada no servidor.

1.3.2 O servidor ornece dados, não conteúdo

Como pudemos observar no modelo clássico, a cada requisição que o navegador az, o
servidor retorna uma página inteira, ou seja, uma mistura de dados do usuário, conteú-
dos do site e instruções de ormatação. Entretanto, no novo modelo, precisamos de uma
resposta imediata que contenha apenas as inormações que são de nosso interesse.
Devemos evitar que sejam reenviados todos os conteúdos e códigos que não soreram
qualquer alteração. Por exemplo, quando um cliente digita seu CEP em um carrinho de
compras, tudo que precisamos é responder com o valor do rete para o CEP digitado
ou inormar se ocorreu algum erro, ou seja, muitas vezes precisaremos atualizar apenas
uma pequena parte de todo o documento que está sendo visualizado pelo usuário.
Por isso dizemos que, no modelo de aplicação que utiliza Ajax, o servidor deve re-
tornar dados em vez de conteúdos. O gráco apresentado na Figura 1.12 ilustra o tráego
de inormações em uma aplicação web clássica. Cada coluna representa uma página
acessada pelo usuário.
Veja que, a cada página acessada, é transerida uma determinada quantidade de
inormações, envolvendo dados, conteúdos e tags de ormatação. No modelo proposto
pelo Ajax, a idéia é priorizar a transerência dos dados e reduzir ao máximo a transe-
rência das inormações relacionadas à apresentação da página.
Capítulo 1 • O que é Ajax? 27

Figura 1.12 – Tráfego de informações em uma aplicação web clássica.

Para isso, quando o usuário entrar no site, seu navegador receberá uma página com
uma grande camada de lógica (JavaScript), como mostra a Figura 1.13:

Figura 1.13 – Tráfego de informações em uma aplicação web com Ajax.

Assim, ao longo da navegação do usuário pela aplicação, o que irá traegar entre o
navegador e o servidor são basicamente dados, além de uma quantidade mínima de
instruções de apresentação. Ao comparar os dois grácos apresentados, podemos per-
ceber que o primeiro modelo transere muito mais inormações que o segundo. Essa
dierença é ilustrada pela Figura 1.14.
Perceba que em uma aplicação web clássica aumenta consideravelmente a quantidade
de inormações transeridas ao longo da navegação do usuário. Já a aplicação Ajax não
transere inormações desnecessárias, resultando em muito menos tráego acumulado
ao longo da navegação.
28 Web Interativa com Ajax e PHP

Figura 1.14 – Dados transferidos ao longo do tempo.

Isso ocorre porque, em uma aplicação Ajax, o tráego tem sua maior intensidade no
início, com um documento complexo sendo entregue quando o usuário entra no site.
As comunicações subseqüentes com o servidor são muito mais ecientes. Ou seja, à
medida que o tempo de interação aumentar, o custo da largura de banda será menor
na aplicação Ajax do que na sua aplicação clássica equivalente.
Portanto, para melhorar a interatividade com o usuário, é undamental que o servidor
retorne apenas as inormações relevantes à aplicação no momento. Esse retorno pode
ser eito de diversas ormas, como, por exemplo, pela utilização de um arquivo XML.
Mais adiante veremos detalhes sobre as ormas de retorno e em quais situações é inte-
ressante o uso de cada um delas. De qualquer orma, podemos dizer que qualquer um
dos ormatos escolhidos será mais eciente do que a mistura de inormações retornadas
por uma aplicação web clássica.

1.3.3 Interação exível entre usuário e aplicação

A estrutura de uma aplicação web clássica não nos permite chegar sequer próximo do nível
de interação de uma aplicação para desktop, por exemplo. Ao utilizar JavaScript e olhas
de estilo CSS, até conseguimos reproduzir alguns eeitos de interação em um ambiente
web, mas mesmo assim a solução ainda pode ser considerada muito rudimentar.
Devemos ter em mente que um navegador web só conhece duas maneiras de enviar
entradas de dados para outro computador: hiperlinks e ormulários HTML. Quem
conhece o ambiente de programação web sabe que esses dois métodos são chamados
de GET e POST, respectivamente.
No caso dos hiperlinks, para oerecer uma melhoria na interace, eles podem estar
vinculados a imagens e olhas de estilo (CSS), como, por exemplo, para denir eeitos
a serem aplicados quando o mouse estiver sobre eles. Em relação aos ormulários
HTML, eles nos oerecem um subconjunto básico de componentes de interace com o
Capítulo 1 • O que é Ajax? 29

usuário, como caixas de texto, listas de seleção, botões de rádio e caixas de checagem
(checkboxes). Entretanto, esses componentes não são sucientes para garantir uma boa
interatividade com o usuário. Não existem, por exemplo, tabelas para edição (grids),
caixas de combinação ou controles de seleção em árvores como existem nas aplicações
para desktop.
Outra possibilidade que os hiperlinks e ormulários nos oerecem é de apontá-los
para uma unção JavaScript. Essa é uma técnica bastante comum em páginas web para
realizar validações de ormulários no próprio navegador do usuário, as quais, apesar de
incluírem a vericação de campos vazios, valores ora de intervalo e assim por diante,
para posteriormente os dados serem submetidos ao servidor, são insucientes, pois o
código JavaScript só roda no navegador, ou seja, antes da página ser enviada. Portanto,
depois que a página or enviada, o usuário terá de aguardar uma validação extra no
lado servidor, a m de vericar se não houve uma tentativa de burlar a segurança da
aplicação.
No caso do Ajax, a interação com o usuário tende a ser fexível, contínua e a fuir de
orma mais amigável. Não será mais necessário aguardar ao clicar em um hiperlink ou
submeter um ormulário. Conceitos mais sosticados, como, por exemplo, o “arrastar
e soltar”, tornam-se praticáveis, azendo com que a interace se assemelhe à interace
de uma aplicação para desktop. Dessa orma, torna-se possível combinar a interação
do usuário e as solicitações ao servidor de maneira mais completa. Portanto, o modelo
proposto pelo Ajax habilita o servidor a trabalhar de orma conjunta com o usuário,
proporcionando a este uma experiência muito mais agradável.

1.3.4 Disciplina na codifcação

 Já vimos que uma aplicação Ajax é um código JavaScript complexo que se comunica
com o servidor enquanto o usuário continua trabalhando. Embora seja um modelo
que descende das aplicações web clássicas, é pequena a similaridade entre essas duas
ormas de programar. Devemos ter sempre em mente essas dierenças para criar apli-
cações ecientes.
Codicar utilizando Ajax é bastante dierente de codicar uma aplicação clássica para
a web. Com Ajax, o código ornecido no início da aplicação deve ser executado até que
ela seja encerrada, sem interrupções. Para atingirmos esse objetivo, devemos escrever
códigos de alto desempenho e de ácil manutenção. Normalmente esses códigos serão
muito maiores do que outros escritos em aplicações web clássicas. Portanto, é necessária
muita disciplina para desenvolver uma aplicação Ajax.
A maioria dos desenvolvedores web costuma utilizar JavaScript apenas em certas
ocasiões, devido à limitação que o modelo clássico apresenta. Esse modelo é baseado
30 Web Interativa com Ajax e PHP

em páginas e não possibilita que os scripts permaneçam ao longo do tempo. Assim, a

linguagem JavaScript perdeu importância, e muitos desenvolvedores a menosprezam.
Nas aplicações Ajax, o JavaScript ganha muita importância, pois é o centro do pro-
cesso. E como a base de código dessa linguagem passa a ser maior, tornam-se necessárias
boas práticas na construção desse código. É recomendável que o desenvolvedor crie
um código organizado e que possa ser entendido acilmente por outros prossionais,
principalmente quando houver uma equipe envolvida no projeto. Nesse caso, é impor-
tante que a equipe siga padrões de codicação, a m de tornar a aplicação bastante
manutenível.

1.4 O contexto do Ajax na web

Muito se ala sobre o Ajax, mas grande parte dos usuários e desenvolvedores web ainda
tem diversas dúvidas sobre o real beneício que esse novo modelo de programação lhes
trará.
Os questionamentos envolvem os mais variados aspectos, como, por exemplo, as
mudanças na orma de programar, as limitações de acessibilidade por parte do usuário,
a comparação com outras tecnologias, a necessidade ou não de utilizar determinados
mecanismos, a integração com algumas linguagens de programação e as situações nas
quais o uso do Ajax não é recomendado. Começaremos a esclarecer essas questões.

1.4.1 O Ajax não tem dono

Primeiramente, é importante destacar que o Ajax não é propriedade de empresa alguma.
Não é algo que você possa baixar da internet. Trata-se apenas de uma abordagem, isto
é, uma nova maneira de se pensar a arquitetura de aplicações web que utilizam certas
tecnologias.
Algumas pessoas acreditavam que o Ajax oi inventado pela Google, proprietária do
site de buscas mais utilizado no mundo. Na verdade, esse comentário surgiu porque a
Google oi uma das primeiras empresas a utilizar essa técnica em suas aplicações, como,
por exemplo, no Google Maps (Figura 1.15), Gmail, Google News, Orkut, entre outras.
O surgimento do Ajax não está relacionado ao site Google. Várias outras empresas
também já utilizam com sucesso esse novo modelo, como, por exemplo, a Amazon.com, a
maior livraria virtual do mundo. Mais adiante, veremos o que é necessário tecnicamente
para que os usuários e os desenvolvedores possam usuruir do Ajax.
Capítulo 1 • O que é Ajax? 31

Figura 1.15 – Google Maps utiliza Ajax: alto nível de interação.

1.4.2 Programação, acessibilidade e compatibilidade

Por ser uma nova abordagem de programação, alguns desenvolvedores podem pensar que
as aplicações Ajax são mais áceis de desenvolver do que as aplicações web tradicionais.
Na realidade, isso nem sempre ocorre. As aplicações Ajax podem conter códigos JavaScript
complexos no lado cliente, o que aumenta a possibilidade de erros (bugs).
Devemos ainda levar em consideração as peculiaridades dos dierentes tipos de
navegadores existentes no mercado, como Internet Explorer, Mozilla Fireox, Opera,
Saari, entre outros. Nossa aplicação precisa estar preparada para lidar com todos eles.
Por exemplo, para começar a usar o objeto XMLHttpRequest, devemos vericar o tipo de
navegador que o cliente está utilizando:
function IniciaAjax() {
var req;
try {
req = new ActiveXObject(“Microsoft.XMLHTTP"); // Internet Explorer
} catch(e) {
try {
req = new ActiveXObject(“Msxml2.XMLHTTP");
} catch(ex) {
32 Web Interativa com Ajax e PHP

try {
req = new XMLHttpRequest(); // Mozilla, Safari,...
} catch(exc) {
alert(“Este browser não tem recursos para uso do Ajax!");
req = null;
}
}
}
return req;
}

Não se preocupe em entender esse programa agora. Esse é um pequeno script uti-
lizado para eetuar uma requisição com o Ajax. Apenas note que são eitas tentativas
de criação do objeto para dierentes navegadores (uma para o Internet Explorer, outra
para o Mozilla e assim por diante).
Detalhes como esse aumentam a complexidade de programação, e por isso torna-se
necessário o uso de plataormas mais adequadas e de boas erramentas de desenvolvi-
mento, visando a diminuição no índice de erros.
Outro aspecto a ser analisado é a questão da acessibilidade de uma aplicação que
utiliza Ajax. Os desenvolvedores se mostram preocupados ao lidar com questões que
possam limitar o uncionamento da aplicação. Por exemplo, “será que o botão Voltar
do navegador deixará de uncionar? E será que a aplicação irá uncionar para usuários
que desabilitaram o JavaScript de seus navegadores? Além disso, que tipo de cuidados
devemos tomar para garantir a segurança de uma aplicação Ajax?”.
É claro que ainda há muito trabalho a ser eito para determinar as limitações do
Ajax, porém, à medida que esse novo modelo or ganhando popularidade, os desenvol-
vedores irão cada vez mais trabalhar em meios de lidar com eventuais diculdades de
uso dessa erramenta, ou seja, assim como ocorre com qualquer novidade no mundo
da programação, o crescimento da comunidade de desenvolvedores desvendará muitas
dessas questões, tornando a erramenta mais eciente ao longo do tempo.

1.4.3 Comparando Ajax com o Flash

Quando o Ajax começou a ganhar espaço na mídia, muitas pessoas questionaram:
“Será que o Ajax irá acabar com o Flash?”. Logicamente a resposta é não. Inclusive essas
duas erramentas podem ser mescladas, como ocorre no site de compartilhamento de
imagens fickr (Figura 1.16).
Nesse site, os desenvolvedores utilizaram em conjunto essas duas tecnologias para
azer um photostream, isto é, uma interace que possibilita ao usuário navegar em um
determinado conjunto de otos sem que ele precise trocar de página.
Capítulo 1 • O que é Ajax? 33

Figura 1.16 – Site flickr mistura as tecnologias Ajax e Flash.

Na verdade, os propósitos do Ajax e do Flash são distintos, embora algumas vezes

eles possam ser utilizados para executar tareas semelhantes. Nesses casos, podemos
decidir se a melhor solução para um determinado problema é o Ajax ou se o mais in-
dicado é o Flash, o qual, costuma ser utilizado para criação de animações e exibição de
inormações ao usuário de uma orma mais atraente em termos visuais. O Ajax, por sua
vez, tem como principal objetivo a interação assíncrona com o servidor, possibilitando
a alteração de apenas um trecho da página web, sem recarregá-la.

1.4.4 Onde entra o PHP nessa história?

Por ter adquirido este livro, você já deve ter ao menos um conhecimento básico da lin-
guagem PHP, cuja primeira versão surgiu em 1995, quando Rasmus Lerdor criou para
uso pessoal uma erramenta chamada PHP/FI (Personal Home Page/Forms Interpreter).
Ele não imaginava, mas estava criando uma das mais poderosas linguagens para o de-
senvolvimento de aplicações na web. O PHP (sigla que é um acrônimo recursivo para
PHP: Hypertext Preprocessor) conquistou muito espaço nos últimos anos.
Você pode estar se perguntando: “Se o Ajax é baseado em tecnologias como Ja-
vaScript e XML, então qual é a importância do PHP nesse processo?” Com certeza a
importância é grande. Na verdade az muito mais sentido utilizar o Ajax em conjunto
com uma linguagem de programação do lado servidor do que utilizá-lo isoladamente.
Essa linguagem pode ser PHP, ASP ou qualquer outra utilizada para criação de páginas
dinâmicas na web. Neste livro, utilizaremos a linguagem PHP, uma das mais populares
entre os desenvolvedores.
34 Web Interativa com Ajax e PHP

Como o objetivo do Ajax é poder realizar chamadas assíncronas ao servidor web

enquanto o usuário usurui da aplicação, utilizaremos programas PHP para receber
essas chamadas e realizar o processamento das mesmas, retornando as inormações
necessárias à aplicação do cliente. Por exemplo, se uma aplicação de comércio eletrônico
necessitar do preço de algum produto, ela ará uma chamada (por meio do Ajax) para
um programa PHP, que será responsável por executar uma consulta no banco de dados,
obter esse preço e retorná-lo ao navegador do usuário.
Portanto, em praticamente todos nossos exemplos teremos uma linguagem de pro-
gramação no lado cliente (JavaScript) e outra no lado servidor (PHP).

1.4.5 Usar XML é interessante, mas não obrigatório

O termo “Ajax”, introduzido por Jesse James Garrett, da Adaptive Path, vem da expressão
Asynchronous JavaScript and XML. Apesar do nome, ao tomar conhecimento dessa
nova abordagem de programação, você poderá se questionar se realmente é necessário
utilizar a tecnologia XML em uma aplicação Ajax.
A verdade é que não somos obrigados a utilizar XML. Observando o diagrama das
tecnologias envolvidas no Ajax, apresentado neste capítulo (Figura 1.9), percebemos que
o XML entra na parte de “Troca de dados”, ou seja, é a linguagem que o servidor web
utiliza para retornar os dados solicitados pela aplicação do usuário. No entanto, esse
retorno não precisa ser necessariamente em ormato XML; pode inclusive ser um fuxo
de texto simples, como usaremos várias vezes no decorrer deste livro.
Então por que o XML é utilizado? Isso ocorre porque a tecnologia XML evolui a
passos largos e vem se tornando um padrão para troca de dados, não apenas na web
mas também entre aplicações desktop que rodam em dierentes plataormas.
Essa preerência se deve principalmente à acilidade na manipulação dos dados de
um arquivo XML, pois é um ormato que nos disponibiliza dados estruturados. Dessa
orma, podemos utilizar as unções DOM para acessar e manipular esses dados da orma
que acharmos conveniente. O mesmo não ocorreria se o retorno osse eito como um
fuxo de texto simples, no qual não há qualquer estruturação dos dados.
Portanto, para troca de inormações entre a aplicação e o servidor, sempre que
possível, procure azer uso de marcações XML, pois elas ajudarão na manipulação dos
dados e, conseqüentemente, sua aplicação cará mais organizada, com um código-onte
mais ácil de ser mantido.

1.4.6 Quando não vale a pena usar Ajax

É importante destacar que as aplicações Ajax nem sempre proporcionam uma experiên-
cia melhor ao usuário do que as aplicações tradicionais. Na realidade, o Ajax nos ornece
Capítulo 1 • O que é Ajax? 35

um determinado poder, que consiste na fexibilidade para a criação de interação na web.

Contudo, assim como ocorre em nossa vida, quanto mais poder tivermos, maior deve
ser nossa precaução em exercê-lo. Por isso, torna-se necessária uma dose de cautela no
sentido de não desagradar a experiência do usuário, mas aprimorá-la.
Sendo assim, em que situações o uso do Ajax não é recomendado? Na realidade,
devemos utilizar o Ajax sempre que possível. Como já oi dito, não devemos deixar o
usuário esperando em vão devido ao recarregamento desnecessário de inormações.
No entanto, se você or desenvolver uma aplicação onde para cada passo do usuário
seja necessário mostrar uma página totalmente dierente da anterior, talvez seja melhor
criar uma aplicação no modelo clássico da web.
É importante lembrar que a utilização de Ajax aumenta bastante o tempo de plane-
 jamento de um site, já que todo o processo de interação com o usuário deverá ser exaus-
tivamente discutido antes de o desenvolvedor começar a implementação. Isso signica
que o uso dessa nova abordagem pode aumentar bastante os custos do projeto.

1.5 Ajax e a Web 2.0

Se você costuma ler com certa reqüência publicações da área de tecnologia, provavel-
mente já deve ter lido a respeito da Web 2.0. Conorme oi comentado no início deste
livro, a idéia da Web 2.0 é azer com que o usuário utilize a web para acessar aplicações,
e não simples páginas estáticas com pouca interatividade. Surge então a pergunta: “Qual
é o papel do Ajax nesse processo?”.
O Ajax surgiu como um protagonista da Web 2.0, pois ele modica o modo como os
navegadores interagem com as inormações disponíveis na internet. Portanto, podemos
dizer que o Ajax é um dos primeiros passos dessa nova geração da internet.
Vamos imaginar a seguinte situação: você baixa um arquivo CDR (CorelDraw) da
internet e tenta abri-lo em seu computador. Se você não tiver o programa necessário para
abri-lo, no caso o CorelDraw, o Windows exibirá uma janela para escolha do programa
a ser usado, semelhante à janela mostrada na Figura 1.17.
Nessa situação, o usuário estará impossibilitado de abrir o arquivo, pois ele não
possui o aplicativo instalado em sua máquina. Então, ele deve obter o CD de instalação
do programa e instalá-lo em seu computador, para então nalmente poder usuruir
do arquivo.
Na nova geração da internet a situação muda. Não será necessário passar por todo
esse processo, pois a Web 2.0 tem como característica executar os sotwares diretamente
pela internet. Ninguém precisará ter o programa instalado em seu computador. Basta
estar on-line. Veja na Tabela 1.1 os dois lados da Web 2.0.
36 Web Interativa com Ajax e PHP

Figura 1.17 – Lista exibida pelo sistema ao não encontrar o aplicativo.

Tabela 1.1 – Benefícios e desvantagens da Web 2.0

Benefícios Desvantagens
•Utilizarsoftwareson-linerequerumaconexãodealta
•Ousodesoftwareson-lineeliminanãosóoscustosde
velocidade.Asconexõesdebandalargavêmcrescendo
licençaparainstalaçãonasmáquinas,mastambémo
rapidamentenomundotodo,masgrandepartedos
tempoperdidonesseprocessodeinstalação.Ousuário
usuáriosdeinternetaindautilizaconexõesdiscadas.
poderápagarapenasdeacordocomseutempode
utilização. • Se a conexão cair, o usuário terá seu trabalho
interrompidoepossivelmenteperderádadosnão
•Asatualizaçõesdossoftwaressãofacilitadas,pois
salvos.
ocorremon-line.
•Comoosdadossãoarmazenadosnoservidor,surge
•Osdadospodemsersalvosnoservidoreacessados
aquestãodaprivacidade.Porexemplo,aempresa
dequalquercomputadorcomconexãoàinternet.Além
responsávelpeloservidorteráacessoainformações
disso, eles cam protegidos em relação a falhas no HD
que podem ser condenciais para o usuário. Além disso,
dousuário.
existeoriscodeinvasãodoservidoreroubodedados.

É notório que o modelo clássico (baseado em páginas) não nos permite reproduzir
com eciência os aplicativos do desktop na web. Por exemplo, é diícil imaginar um
sotware com todos os recursos do CorelDraw rodando no próprio navegador do
usuário.
Surgem então os questionamentos: “Será que demorará para a web atingir esse
nível e reproduzir elmente as aplicações desktop? E será que não cará pesado para
o navegador carregar essas aplicações?”. São perguntas diíceis de serem respondidas,
mas sabemos que o Ajax já está acelerando esse processo. Quanto ao carregamento da
aplicação, a idéia é carregar no navegador apenas os recursos necessários para as ações
Capítulo 1 • O que é Ajax? 37

que o usuário está executando. Os demais recursos seriam carregados posteriormente

por meio das chamadas assíncronas do Ajax ao servidor.
Conhecendo o conceito de Web 2.0, ca clara a importância do Ajax nesse processo,
pois ele diminui muito a distância entre as aplicações para desktop e as aplicações
para a web., para a qual muitos aplicativos que oram consagrados no desktop já estão
migrando com muito sucesso. Já surgiram inclusive boatos de que algumas empresas
estariam desenvolvendo um conjunto de aplicativos on-line (editores de texto, planilhas
eletrônicas etc.) para concorrer com o Oce da Microsot.
Na realidade, desde que o Google lançou uma aplicação chamada Gmail, a comuni-
dade web percebeu que era possível azer o navegador se comportar como uma aplicação
“de verdade”. O GMail chegou e conquistou seu espaço, mesmo em um mercado saturado
como o de e-mails na web (webmail). A partir daí, o usuário começou a se ver livre não
só do sistema operacional, mas também do conceito de “meu computador”.
Previsões à parte, é muito diícil dizer se realmente o Ajax dominará a Internet do
uturo ou se surgirá um modelo inovador para substituí-lo, porém a idéia da Web 2.0
começa a tomar orma a partir do Ajax, e os desenvolvedores devem estar preparados
para criar aplicações condizentes com a nova geração da web.

1.6 Requisitos e instalações de sotwares

A grande vantagem das aplicações Ajax é que elas rodam no próprio navegador web.
Isso signica que, para usuruir dessas aplicações, basta que o usuário possua uma
versão mais recente (após 2001) de um dos principais navegadores utilizados no mer-
cado, como por exemplo:
• Mozilla Fireox: http://www.mozilla.com/refox/
• Internet Explorer 5+: http://www.microsoft.com/ie/
• Opera: http://www.opera.com/
• Konqueror: http://www.konqueror.org/
• Saari: http://www.apple.com/safari/
Para testarmos os exemplos apresentados neste livro, serão utilizados os seguintes
sotwares:
• No lado cliente: Internet Explorer (navegador).
• No lado servidor: PHP (linguagem de programação), Apache (servidor web), MySQL
(banco de dados).
38 Web Interativa com Ajax e PHP

Se você não tiver à disposição um servidor contendo os sotwares necessários, pode

instalar o pacote PHP + Apache + MySQL em sua máquina, azendo-a executar o papel
de servidor e possibilitando a você testar os exemplos do livro.
No Windows, uma boa opção para instalar esses três sotwares é obter o pacote
EasyPHP, disponível para download em http://www.easyphp.org/ . Com esse pacote, podem ser
instalados o PHP, o Apache e o MySQL, a partir de um único arquivo de instalação.
No entanto, se você or um usuário um pouco mais experiente, é recomendável
instalar individualmente cada um desses sotwares, visto que nem sempre o EasyPHP
contém as versões mais atuais de cada um deles. Em nosso caso, aremos manualmente
a instalação das seguintes versões:
• PHP 5, disponível em http://www.php.net.
• Apache 2.0, disponível em http://httpd.apache.or g.
• MySQL 5, disponível em http://www.mysql.com.
Se você resolver também azer a instalação e a conguração manual dos sotwares,
o procedimento para o Windows é o seguinte:
1. Instalação do PHP – na seção de downloads do site do PHP, aça o download da versão
para Windows do PHP 5. Você pode baixar o pacote completo, disponível em or-
mato ZIP. Em seguida, descompacte o arquivo no seu computador (normalmente
cria-se a pasta c:\PHP para isso). Renomeie o arquivo php.ini-dist para php.ini,
a m de que o PHP possa localizar seu arquivo de conguração. Por m, copie
o arquivo php5ts.dll para a pasta de sistema do seu Windows (no Windows XP,
a pasta é C:\WINDOWS\system32), pois o PHP precisará encontrar esse arquivo. Faça
o mesmo para o arquivo libmysql.dll, que será usado posteriormente no acesso
ao MySQL.
– no site do Apache, na seção de downloads, há pastas com
2. Instalação do Apache
várias versões do sotware. No caso do Windows, uma boa alternativa é acessar
uma pasta chamada win32, localizada dentro da pasta binaries. Nela, você encon-
trará algumas distribuições binárias do produto, ou seja, você poderá baixar um
arquivo (normalmente com extensão .msi) e executá-lo para que o Apache seja
automaticamente instalado em sua máquina, como mostrado na Figura 1.18.
Se durante o processo de instalação or solicitado o nome do servidor (server
name), você pode digitar localhost. Se ocorrer algum erro ao iniciar o Apache,
será exibida uma mensagem indicando onde está o problema no arquivo de con-
guração httpd.conf, localizado no diretório conf do Apache. Algumas vezes, esse
erro pode ocorrer em virtude da alta de alguma inormação, como, por exemplo,
o e-mail do administrador. Se ocorrer, basta ornecer as inormações solicitadas
Capítulo 1 • O que é Ajax? 39

para que o Apache seja iniciado corretamente. Para vericar se o Apache está
rodando, abra seu navegador e digite na barra de endereços:
http://localhost/

Deve aparecer uma página indicando que o Apache está em execução (Figura 1.19).

Figura 1.18 – Download do arquivo de instalação do Apache.

Figura 1.19 – Testando o funcionamento do Apache.

40 Web Interativa com Ajax e PHP

Para que suas aplicações possam ser acessadas pelo navegador, elas devem ser
colocadas na pasta raiz do servidor (DocumentRoot), por padrão chamada de htdocs.
Por exemplo:
C:\Arquivos de programas\Apache Group\Apache2\htdocs

A pasta raiz pode ser modicada por meio da alteração do valor da diretiva
DocumentRoot do arquivo de conguração httpd.conf.

3. Instalação do MySQL – aça o download do MySQL 5 no site ocial do produto. Assim

como no Apache, você também poderá obter um arquivo binário para Windows,
com extensão msi. Basta azer o download desse arquivo e executá-lo para que o
MySQL seja instalado.
4. Confguração do PHP no Apache– agora que você já tem os três sotwares necessários
para montar seu servidor, alta apenas congurá-los a m de que uncionem em
conjunto. Para habilitar o PHP como um módulo do Apache, você precisará acres-
centar algumas linhas no arquivo httpd.conf. Essas linhas podem ser encontradas
no arquivo install.txt que acompanha a distribuição do PHP. Por exemplo, para
instalar o PHP como módulo do Apache 2.0, devem ser acrescentadas as seguintes
linhas:
LoadModule php5_module “C:/PHP/php5apache2.dll"
AddType application/x-httpd-php .php
PHPIniDir “C:/PHP"

A primeira linha carrega o módulo do PHP, a segunda az com que o Apache
reconheça os scripts com extensão .php, e a terceira indica a localização do ar-
quivo de conguração php.ini. Consulte o arquivo install.txt para orientações
quanto a outras versões. Após incluir as linhas, reinicie o Apache para que elas
tenham eeito.
5. Confguração do MySQL no PHP – para nalizar, precisamos habilitar a extensão do MySQL
no arquivo de conguração do PHP, o php.ini. Neste livro, utilizaremos a extensão
mysqli, visto que nossa versão do MySQL é superior a 4.1, e, portanto, a antiga extensão
do MySQL não uncionará. A linha que habilita essa extensão é:
extension=php_mysqli.dll

Se essa linha estiver comentada, retire o comentário. Caso ela não exista, deve ser
inserida. Se sua versão do MySQL or anterior a 4.1, habilite o arquivo php_mysql.
dll em vez do php_mysqli.dll. Verique ainda se a diretiva extension_dir está apon-
tando para o diretório correto das extensões do PHP (normalmente chamado de
“ext”). Por exemplo:
extension_dir = “C:/PHP/ext/"