Apostila Básica de AJAX - Carlos Majer

DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Este material pertence a Carlos A. Majer, Professor Universitário de Tecnologia da Informação e

Especialista em Ensino a Distância e Docência Superior pela Universidade Cidade de São Paulo (UNICID).
Licença de Uso
Este trabalho está licenciado sob uma Licença Creative Commons: Atribuição-Compartilhamento pela mesma
Licença 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-
sa/2.5/br/ (em português) ou envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford,
California 94305, USA.
Isto significa que você poderá copiar, distribuir, exibir e realizar trabalhos derivados desta obra com as
seguintes restrições:-
Você deverá sempre fazer referência ao autor: Carlos Majer
O texto “Documento disponível em http://www.carlosmajer.com.br/“ deve
ser mencionado ao menos uma vez neste documento (Este é o Termo de
Licença para uso deste documento), podendo ser no rodapé das páginas, na
primeira ou última página do documento de projeto. Caso venha a ter alguma
dúvida contate-me diretamente.
Você não poderá utilizar este trabalho para fins ilegais, imorais ou de forma a
denegrir ou prejudicar outras pessoas ou instituições.
Para maiores informações envie um e-mail para

contato@carlosmajer.com.br ou cmajer@ig.com.br ou cmajer@uol.com.br
Caso acredite que este material tenha lhe ajudado, envie um e-mail de agradecimento. Isto é o suficiente para motivar-
me a continuar desenvolvendo este tipo de material e disponibilizá-lo para o público. Caso note algum erro ou tenha
alguma sugestão, sinta-se à vontade para me contatar.
Tecnologia Nível de Conhecimento Desejado

HTML Médio
Javascript Médio
Programação Web Médio
Versão 4.0b - Prof. Carlos Majer Página 1

AJAX
Asynchronous Javascript and XML
Introdução
Este é um artigo que visa introduzir a utilização de AJAX ao desenvolvedor web. Para isto, o estudante deve
atender alguns pré-requisitos:-
Conhecimento mínimo para criação de elementos de formulários HTML
Conhecimento mínimo de funcionamento do Javascript (estrutura, condições, laços, criação de
variáveis, etc.)
Conhecimento básico do DOM – Document Object Model, para poder acessar os objetos criados na
página HTML.
Como o exemplo é em PHP, pressupõe-se que o desenvolvedor tenha conhecimento desta
linguagem. Caso isto não ocorra, mas ele tenha conhecimento em outras linguagens de
programação web, ele poderá, por analogia, entender o que a página PHP está fazendo.
Caso não tenha ainda estes conhecimentos, busque-os e depois consulte esta apostila.
Vamos lá?
Algumas pessoas podem pensar que AJAX é algum produto de limpeza.

Outras podem achar que é uma nova tecnologia.
AJAX é um acrônimo para Javascript Assíncrono e XML, ou seja, o uso de tecnologia existente (Javascript e
XML) de uma forma inovadora e que veio para mudar a maneira pela qual os desenvolvedores efetuam
certos trabalhos na Internet.
Utilizado inicialmente pelo Microsoft Internet Explorer® e adotado posteriormente pelos demais
navegadores, o AJAX é uma forma inovadora de uso de Javascript e XML que permite a criação de um
objeto Ajax (Javascript). Este objeto consegue acessar outra página e receber o retorno de informação
(sem sair da primeira página).
A informação recebida pode ser tratada dentro do código (da página onde o objeto existe) permitindo ao
desenvolvedor uma forma inovadora na criação de sua interface de forma a enriquecer e agilizar a
experiência do usuário dentro do sistema.
Uma das características deste objeto é que o mesmo pode comportar-se de uma forma assíncrona em
relação à página HTML, isto é, enquanto a página continua a ser carregada (parcialmente ou totalmente) o
objeto funciona em paralelo, correspondendo-se com a página destino até receber a informação desejada
(ou algum erro ocorrer).
Javascript
O Javascript é a nossa velha linguagem de script para navegadores. É nela que criamos nosso objeto AJAX.
XML (Extensible Markup Language)
A Linguagem de Marcas Extensível tal como o HTML é baseada no padrão SGML (Standard Generalized
Markup Language) e foi criada para facilitar a troca de dados. O AJAX por padrão transfere os dados de um
local para outro usando XML. Além do XML existe a possibilidade de receber as informações em formato
texto.

Formulário de Cadastro de Usuário

Um dos grandes problemas do HTML (e seus derivados PHP, ASP, ASP.NET, etc.) é o fato de que ao
precisar acessar alguma informação (muitas vezes em função de uma interação com o usuário), numa
determinada página, esta informação só pode ser recuperada através de uma chamada à outra página.
página
Isto faz com que o processo seja lento e tedioso.
Um exemplo clássico é o do típico cadastro de um novo usuário num site. O usuário informa sua
identificação (também conhecida como login ou ID) e demais dados.
Ao clicar no botão para confirmar seu cadastro,

c a página de cadastro (HTML)) carrega outra página
(dinâmica) que irá verificar se a identificação (login/ID) informada pode ser usada pelo novo usuário
(verificando a existência da informação no banco de dados).
Funcionamento sem uso de AJAX

Muitas
as vezes, na utilização tradicional da web (sem o uso de AJAX) verificamos a necessidade constante de
recarga de páginas até se atingir o objetivo desejado. Até alguns anos atrás esta era a única forma utilizada
para se executar este tipo de procedimento.
Vamos dar uma olhada no processo tradicional de cadastro?

1 – Preenchimento de Dados do Formulário - usuário insere informações
Neste momento, o usuário deverá preencher as informações do formulário. Note que o formulário pode ter
validações internas em javascript para, por exemplo, consistir se os campos obrigatórios foram
informados.
Nota:: Veja no final deste artigo informações para criação (banco de dados, páginas, etc.) dos exemplos
informados.
2 - Verificação da identificação do usuário – Página Dinâmica

Aqui, a página PHP (pode ser feito em outra linguagem) é executada. Ela conecta-se se com o banco de dados,
abre a tabela de cadastro e tenta localizar o usuário através da identificação fornecida. Como a
identificação é chave única para cadastro de usuários, não pode haver duas identificações iguais.
4 - Sucesso - ID informado não exisstte no banco

A página PHP verifica que a identificação informada não existe no banco de dados. Sendo assim,
as ela finaliza
o processo de cadastro de novo usuário.
3 - Problemas - ID informado já está em uso:-
Em seguida o usuário volta à tela anterior e altera sua identificação (e informa novamente a senha),
efetuando todo o processo novamente.
novamente

Usuário depara-se com a lei de Murphy:-
Este tipo de experiência pode fazer com que o usuário se irrite levando-o
levando o a desistir do uso da ferramenta.
Este processo pode ser moroso. Para se chegar ao destino (a segunda página), diversos caminhos poderão
ser percorridos
idos na Internet (Tente executar o comando tracert WWW.uol.com.br para entender isto).
Esta segunda página usualmente gera uma página resultante que é enviada ao usuário (máquina-cliente).
(máquina
O resultado, em muitos casoss é um aviso de que a identificação informada pelo usuário não está disponível
para uso (porque já existe outro usuário com esta identificação), de forma que o usuário tem que, de
alguma forma, retornar à página anterior e digitar outra identificação/login e novamente tentar concluir seu
cadastro. Tedioso não?
Funcionamento com uso de AJAX

Note que o objetivo no uso do AJAX, neste
neste procedimento é acelerar a informação ao usuário de ID existente
(indisponível) ou não (disponível).
Com isto, o usuário poderá saber de antemão se o processo de cadastro de um novo usuário irá funcionar.
O usuário digita sua identificação (desejada). Ao sair da caixa de texto, um ícone animado é exibido, para
que o usuário saiba que algo está ocorrendo (O texto Carregando... também poderia ter sido utilizado).
O objeto AJAX é criado e executa uma página dinâmica (neste exemplo em PHP) que abre o banco de
dados e efetua a busca da identificação digitada numa tabela. Em seguida,, a página retorna um SPAN
contendo uma string ao objeto AJAX representando o resultado da consulta (neste
neste caso o texto Disponível
ou Indisponível).
Assim que o objeto AJAX tem o retorno do resultado, ele insere o mesmo dentro de uma área (um SPAN
identificado como aviso) previamente
reviamente criada para receber esta informação:-
informação:

ID já existente
ID não existente
Irei explicar mais à frente esta página em detalhes. Vamos verificar agora como funciona o processo passo a
passo.
Layout do Formulário e Uso de CSS

Ao analisar o código da página web (HTML - logo abaixo) você notará que utilizei a marca <label> (do
HTML) para delimitar os textos/rótulos que aparecem na frente das caixas de textos (a serem preenchidas
pelo usuário).
Esta marca e outros elementos (posicionamento,

(posicionamento, cor de fundo, cor do texto, etc.) estão sendo estilizados
através do uso de CSS. Não é de minha intenção detalhar o funcionamento do CSS em uso neste artigo, mas
caso o desenvolvedor pense ser interessante, sugiro verificar os comandos de estilo
estilo existentes no código das
páginas de exemplo disponibilizadas de forma integral no final deste artigo.
Validação de Campos Obrigatórios

Inseri no formulário algumas indicações visuais de que alguns campos são obrigatórios. Para deixar o
Javascript mais simples
imples de ser estudado, decidi não inserir a validação na página.

Alteração da página HTML – Formulário de Cadastro para uso do AJAX

Verifique a estrutura (parcial) HTML (abaixo) da página que contém o formulário de cadastro:-
<form action="GravaUsuario.php" method="post" name="formUsuario">

<fieldset>
<legend>Dados do Usuário</legend>
<label for="idUsuario" class="obrigatorio">Identificação*:</label>
<input type="text" name="idUsuario" id="idUsuario" class="campos" size="20"
maxlength="20" onblur="ChecaUsuario()">
<span id="aviso"></span ><br>
<label for="senha" class="obrigatorio">Senha*:</label>
<input type="password" name="senha" id="senha" class="campos" size="20"
maxlength="20"> <br>
<label for="nome" class="obrigatorio">Nome*:</label>
<input type="text" name="nome" id="nome" class="campos" size="50" maxlength="50">
<br>
<label for="endereco">Endereço:</label>
<input type="text" name="endereco" id="endereco" class="campos" size="50"
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade" class="campos" size="50"
<label for="uf">Estado:</label>
<input type="text" name="uf" id="uf" class="campos" size="3" maxlength="2"> <br>
<label for="cep">CEP:</label>
<input type="text" name="cep" id="cep" class="campos" size="9" maxlength="9"> <br>
<label><input type="submit" value="Cadastrar"></label><br>
* = Preenchimento obrigatório!
</fieldset>
</form>
Perceba que:-
1) O evento onBlur (que é acionado quando um objeto perde o foco) da caixa de texto idUsuario está
sendo interceptado e redirecionado para uma função Javascript,de nome ChecaUsuario() (a ser
criada). Isto fará com que toda vez que se sair deste objeto, a função ChecaUsuario() será
executada. Dentro dela será criado e executado o objeto AJAX.
2) Um elemento do tipo SPAN foi criado, sem nenhum conteúdo. Este elemento será utilizado pelo
objeto AJAX para:-
a. Assim que ser executado, irá armazenar uma imagem (gif animada) que dará a impressão
ao usuário de que algo está ocorrendo (neste caso, a verificação do id do usuário). O
desenvolvedor poderá trocar esta imagem pelo texto Carregando..., ou colocar outra
imagem, caso prefira.

b. Quando finalizar o processo, exibir

exibi o resultado obtido da página dinâmica executada,
mostrando um SPAN contendo um texto que identificará a disponibilidade para uso da
identificação informada pelo
pel usuário (Disponível/Indisponível).
c. Exibir
bir algum erro ocorrido na recuperação da informação da página dinâmica
Ao visualizarmos a típica imagem da bolinha girando, pensamos que a página tem controle exato sobre
a operação que está sendo realizada.
A verdade é que não existe um controle de quanto tempo levará para que o objeto AJAX finalize seu
processo.
Isto depende do resultado que vem de uma página externa.
Ao se inserir uma imagem logo no início do processo, ela permanecerá sendo exibida durante todo o
procedimento até que o desenvolvedor altere o conteúdo do SPAN criado (geralmente inserindo uma
indicação do resultado esperado).
A seguir iremos verificar de que maneira este funcionamento se dará.

Visão Geral do Funcionamento via AJAX
Observação: O código Javascript pode estar dentro da página HTML ou num arquivo separado.

1) O objeto da caixa de texto de identificação perde o foco (quando usuário tecla TAB ou clica em
outro local do formulário). Ao fazer isto, o evento onBlur da caixa de texto acionará a função
ChecaUsuario().
2) Dentro da função, o objeto AJAX é criado. A primeira ação que este objeto executa é a inserção de
uma imagem no objeto SPAN (que que está localizado ao lado da caixa de texto de identificação)
identificação para
passar ao usuário a impressão de que algo está ocorrendo.
3) O objeto AJAX continua seu trabalho executando uma página PHP que irá se conectar no Servidor
MYSQL para localização da identificação digitada, no banco de dados.
da
Veja o código PHP deste exemplo no final do artigo.
4) A consulta ao banco efetuada deverá verificar o número de linhas (tuplas/registros) encontrado

conforme comando SQL executado.
5) A página dinâmica (PHP neste exemplo) retorna (ao objeto AJAX, que foi quem executou a página)
o código HTML de um SPAN que contém “disponível” quando o ID não existir tir (o que significa que
este ID pode ser cadastrado) ou “indisponível”
“ quando o ID já existir (indicando que o ID não pode
ser cadastrado novamente).
6) Uma vez que o objeto AJAX tenha finalizado o recebimento da informação da página PHP, ele irá
acessar o objeto SPAN inserindo
inseri dentro dele o código HTML recebido da página dinâmica,
dinâmica
sobrepondo o seu conteúdo anterior (que
( era a imagem de carregamento).
Perceba que apesar deste processo estar mais ágil, o usuário só saberá se conseguiu gravar o ID após clicar
no botão Cadastrar, ou seja, existe ainda a possibilidade de que, no espaço de tempo que o usuário levou

para preencher os demais dados e clicar no botão Cadastrar, um segundo usuário pode ter feito um
cadastro usando o mesmo ID e cadastrado antes do primeiro ter finalizado.
Revendo o funcionamento
A função (javascript) que cria o objeto AJAX é a ChecaUsuario().
Esta função é sempre executada quando o usuário sai da caixa de texto de identificação do usuário, ou
seja, quando esta caixa de texto perde o foco (evento
( onBlur).
Sempre que esta função for executada, ela criará um objeto AJAX que fará um acesso a uma página PHP
que irá buscar no banco de dados
ados a informação de existência ou não da identificação do usuário.
Assim que o objeto AJAX receber o resultado da página PHP ele irá inserir a informação de disponibilidade
ou indisponibilidade no SPAN localizado ao lado da caixa de texto de identificação.
identificaçã
Vamos entrar agora no detalhe de funcionamento da função ChecaUsuario() que faz a criação do objeto
AJAX.
Estrutura da Função ChecaUsuario()

1 - Entendendo a criação do objeto AJAX

Vamos agora estudar a criação do objeto AJAX para poder ter base para uma análise mais técnica do
procedimento executado.
Naturalmente, um objeto AJAX deve ser criado dentro do Javascript. Como mencionei anteriormente, a
maneira pela qual criamos o objeto AJAX depende do navegador.
O objeto AJAX é criado através de um comando Javascript do navegador. Conforme o navegador utilizado
pelo usuário, e em alguns casos a versão, o comando pode ser diferente.
Analise a tabela abaixo:-
Navegador Código de criação do objeto AJAX

Firefox (Mozilla) e Safári (Apple), Opera var objetoAJAX = new XMLHttpRequest();
Internet Explorer acima da versão 5 var objetoAJAX = new ActiveXObject("Msxml2.XMLHTTP")
Internet Explorer (inicial) var objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
A versão inicial do IE (acima) mantém compatibilidade, podendo ser utilizada com as versões superiores
do navegador.
No Internet Explorer, você poderá encontrar variações nos comandos para a criação do objeto AJAX
através dos diversos objetos ActiveXObject disponibilizados. Iremos estudar alguns destes casos logo a
seguir.
Tentativa e Erro (TRY/CATCH)

Podemos perceber acima que existem formas diferentes de se criar o objeto AJAX, conforme o navegador
utilizado pelo usuário.
Como fazer então para se criar um objeto AJAX independente do navegador que o usuário está utilizando?
Iremos utilizar de tentativa e erro, isto é, tentaremos criar o objeto AJAX assumindo que um determinado
navegador está sendo utilizado. Caso o comando de criação do objeto que iremos utilizar não existir no
navegador do usuário, um erro será gerado.
Utilizaremos então o bloco Try /Catch do Javascript que nos permitirá tentarmos criar o objeto AJAX de
uma determinada forma. Caso ocorra algum erro, o fluxo do programa será desviado para outra seção do
código Javascript na qual tentaremos criar o objeto AJAX de outra forma (e assim consecutivamente) até
que consigamos (ou não) definitivamente criar o objeto AJAX.

Criando o objeto AJAX

Neste exemplo tentaremos criar o objeto AJAX nos navegadores mais conhecidos (Firefox, Internet
Explorer, Safári e Opera).
function ChecaUsuario()
{
// PASSO 1 – Tentativa de Criação do objeto AJAX
try
{
objetoAJAX = new XMLHttpRequest()
}
catch(e1)
{
try
{
objetoAJAX = new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e2)
{
try
{
objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e3)

{
objetoAJAX = false
}
}
}
......
Antes de tudo precisamos dar um nome ao objeto AJAX que iremos utilizar neste exemplo. Decidi nomear
este objeto como objetoAJAX.
No primeiro bloco try/catch tentamos criar o objeto AJAX através da chamada à função
XMLHttpRequest(), a qual só funcionará nos navegadores Firefox, Safári e Ópera. Veja:-
try
{
}
Caso o navegador seja outro (esta função não exista no navegador do usuário) um erro será gerado, o que
fará com que o fluxo do programa seja desviado para o bloco de comandos logo abaixo da instrução
catch(e1).
Tentaremos agora criar o objeto AJAX através da chamada à função ActiveXObject tentando criar um
objeto AJAX através do parâmetro Msml2.XMLHTTP (veja abaixo). Este objeto é reconhecido pelo Internet
Explorer a partir da versão 5.5:-
try
{
}
Caso novamente não funcione (O IE é menor ou igual à versão 5.0, ou o navegador do usuário não é o IE),
o fluxo do programa será desviado para o bloco de comandos abaixo da instrução catch(e2).
Tentaremos agora criar o objeto AJAX usando a mesma função (ActiveXObject) mas informando um
parâmetro diferente (do comando anteriormente executado), que as versões do IE abaixo da 5.5 conhece:-
try
{
objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
}
Bom, se até agora não funcionou é porque existem as seguintes possibilidades:-
1) Ou o usuário não está usando nenhum dos navegadores acima informados (que compõe a maioria
dos navegadores em uso no mundo)
2) Ou o desenvolvedor digitou algo errado no Javascript, após o primeiro bloco Try/Catch, o que está
fazendo com que, em qualquer erro gerado, o fluxo do programa seja desviado para outra seção do
programa. Sugiro que você reveja o seu código Javascript e resolva o problema antes de colocar a
página no ar.

Caso haja um problema, o próximo bloco try/catch será executado. Após a instrução catch(e3) faço com
que o objeto Ajax fique setado com o valor em falso de forma a interromper qualquer trabalho a ser feito
com ele posteriormente na página.
objetoAJAX = false
Falha na criação do objeto AJAX

Qual é o impacto na falha na criação do objeto AJAX desta página?
O objetivo na criação do objeto AJAX era informar ao usuário se a identificação que ele estava digitando
está disponível ou não para seu uso. Podemos então verificar que este procedimento estava trazendo uma
comodidade ao usuário. Caso não consigamos fazer com que o mesmo funcione, o impacto será pequeno,
uma vez que o usuário ainda poderá preencher os dados do formulário e tentar cadastrar.
O máximo que pode acontecer é o que já foi descrito anteriormente, isto é, o usuário terá que informar
outra identificação caso a mesma já exista no banco de dados.
Passo 2 – Inserção da imagem de carregamento no SPAN

Neste momento temos o objeto AJAX criado. Precisamos agora chamar a atenção do usuário para que o
mesmo perceba que algo está ocorrendo. Para isto, iremos inserir a imagem de carregamento dentro do
SPAN que foi criado com o id=“aviso". Analise o código Javascript a seguir:-
objetoAJAX = false
}
}
}
// Se consegui criar o objeto AJAX
if(objetoAJAX)
{
var objSpan =document.getElementById("aviso")
objSpan.innerHTML="<img src='ajax-loader.gif'>"
......
1) Verificamos se o objeto objetoAJAX não é falso (Quando não conseguimos criar o objeto AJAX
deixo ele com o valor false – veja acima).
2) Criamos a variável objSpan que aponta para objeto SPAN chamado aviso (objeto vazio localizado
ao lado da caixa de texto de identificação do usuário). Qualquer alteração efetuada nesta variável
propaga-se no objeto destino, como se estivéssemos trabalhando com o próprio objeto SPAN
(chamado aviso*).
3) Como este objeto é um SPAN, iremos alterar sua propriedade innerHTML que é a propriedade que
armazena seu conteúdo, que além de texto pode conter código HTML**.
* Para mais informações procure por DOM – Document Object Model, na Internet.
** A propriedade innerHTML de um objeto SPAN ou DIV aceita comandos em HTML e executa-os.
Ao sair desta linha, este objeto irá tentar carregar a imagem ajax-loader.gif

Passo 3 – Recuperação da identificação do usuário

Precisamos agora recuperar o que foi digitado na caixa de texto idUsuario.. Para isto, iremos acessar sua
propriedade value deste objeto HTML através da função document.getElementById() do DOM
(Document Object Model):-
}
}
if(objetoAJAX)
{
objSpan.innerHTML="<img img src='ajax-loader.gif'>"
src='ajax
var txtUsuario = document.getElementById("idUsuario").value

......
A rotina acima está pegando o valor (value) do objeto idUsuario (do formulário da página HTML) e inserindo
este valor na variável txtUsuario que será utilizada nesta rotina (Javascript).
(Javascript). No exemplo acima, esta
e
variável conterá a string “Carlos”.

Passo 4 – Montagem do Endereço de chamada (URL) da página PHP

Iremos criar agora a variável enderecoURL que conterá a chamada à página PHP que irá fazer uma busca
para verificar se a identificação digitada pelo usuário já existe no banco de dados.
Esta página chama-se localizaUsuario.php.
Precisamos chamar esta página passando-lhe a identificação que foi digitada pelo usuário (que neste
exemplo é a string “Carlos”).
Para isto, iremos utilizar o método GET. Este é um dos métodos de envio de informação entre páginas e
pode ser utilizado dentro de um formulário (Exemplo: <form action=”...” method=”GET”>) ou através de
uma URL (endereço).
Para utilização numa URL, devemos fazer assim:-
<nome da pagina>?<nome do elemento>=<valor>&<nome do segundo elemento>=<valor>

1) Insira o nome da página que pode ser completa (Exemplo: HTTP://www.site.com.br/pagina.php) ou
relativa se estiver no mesmo site onde o programa está rodando (Exemplo: pagina.php)
2) ? Logo após o nome da página, insira um ponto de interrogação. Este ponto de interrogação é
um caractere especial que funciona como aviso ao navegador de que um elemento está sendo
enviado através do método GET.
3) <nome do elemento > Após o ponto de interrogação vem o nome do elemento que está sendo
enviado ao navegador. (Exemplo: pagina.php?idade)
4) <valor> Representa o valor do elemento enviado (Exemplo: pagina.php?idade=22)
5) & Logo após o valor do primeiro elemento, caso se deseje passar mais algum elemento, insira
um e comercial. Este & é um caractere especial que funciona como aviso ao navegador de que mais
um elemento será enviado.
6) <valor> Representa o valor do (segundo) elemento enviado (Exemplo:
pagina.php?idade=22&nome=Joana)
No exemplo abaixo estaremos criando o código Javascript para montagem de uma variável (chamada
enderecoURL).
Esta variável será composta do nome da página localizaUsuario.php (que não muda) somada com a
string codigo (nome que decidi aplicar no elemento utilizado pelo Javascript para identificação do usuário) e
em seguida do valor da variável txtUsuario (que contém o que o usuário digitou na caixa de identificação na
página HTML).
Basicamente será algo assim que seria montado:-

localizaUsuario.php?codigo=Carlos
Em Javascript, o comando fica assim:-


var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario)
......
......

Por que estamos usando a função escape?

Temos um pequeno problema. Existem navegadores que ao digitarmos um código com acentos, ele
transforma os acentos num código de escape. Veja:-
localizaUsuario.php?codigo=Jo%E3o
No exemplo acima, caso o usuário digite João na página e caso seu navegador seja o Mozilla Firefox, o
navegador transformará João para Jo%E3o, que é a forma pela qual este navegador consegue transferir
acentos, entre páginas.
Ocorre que a página PHP não conseguirá localizar o código correto (pois o que está cadastrado é João e
não Jo%E3o).
Por outro lado, o Internet Explorer não faz esta alteração no dado enviado.
Para se ter a certeza de que a página funcionará em ambos os navegadores, iremos alterar o envio do dado
escapando-o, isto é, transformando todos os caracteres em códigos especiais de escape e efetuando o
processo inverso na página PHP (veremos adiante).
Passo 5 – Preparando o objeto AJAX – Parte 1

O objeto AJAX tem um método chamado open que abre uma determinada página (efetua uma conexão)
para recebimento de dados. Este método deve ser configurado com os seguintes parâmetros:-
1) Método de Requisição/Envio de dados: GET ou POST (Existem outros, mas vamos nos limitar
nestes dois). Note que o método utilizado neste exemplo (GET) tem total relação com a forma pela
qual acabamos de montar a página, no passo 4, acima.
2) Endereço a ser lido/executado: Neste caso, utilizaremos a variável enderecoURL que contém a
página que queremos acessar e que está preparada para enviar o código que queremos passar para
a página de consulta (PHP).
3) Funcionamento Assíncrono: Neste caso, o true (que significa verdadeiro) confirma que queremos
que o objeto funcione de forma assíncrona. A conexão assíncrona faz com que o objeto não trave o
funcionamento da página HTML permitindo que o objeto AJAX seja executado de forma paralela
com a execução da página HTML. Caso seja informado false, o objeto AJAX irá trabalhar de forma
síncrona, isto é, ao ser acionado o objeto AJAX (após execução do método send() – veja abaixo), o
código Javascript (e HTML) interrompe até que o objeto AJAX tenha sido completamente
processado. Em alguns casos isto pode travar a página, particularmente quando ocorrer algum
problema entre o objeto AJAX e a página que deveria estar retornando-lhe um conteúdo.
A partir desta linha o objeto AJAX já está preparado para posteriormente acessar a página de consulta e
começara a aguardar o retorno das informações desta página. (Ele está preparado mas ainda não foi
executado).

var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario)
//Abre o Endereço especificado pelo metodo 'GET'
objetoAJAX.open("GET", enderecoURL ,true)
......
......

Passo 6 – Preparando o objeto AJAX – Parte 2

Precisamos configurar o que fazer quando o objeto AJAX receber os dados da página de consulta.
O manipulador onreadystatechange
Para isto, iremos trabalhar com o manipulador de eventos onreadystatechange (alguns chamam de
propriedade ou método do objeto AJAX).
Podemos criar uma função e associá-la ao manipulador ou simplesmente inserir uma função dentro do
manipulador (utilizaremos esta forma) para tratar o processo de recebimento de dados pelo objeto AJAX da
página destino.

objetoAJAX.onreadystatechange=function()
{
// O valor 4 na propriedade readyState significa que o objeto já completou/finalizou o
// recebimento de dados
if (objetoAJAX.readyState==4)
{
// 200 = resposta do servidor OK - Lê o texto
if (objetoAJAX.status == 200)
{
var texto= objetoAJAX.responseText
//Exibe o texto no span AVISO

objSpan.innerHTML=texto
}
else
{
objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText
}
}
}
......
......
Na primeira linha inserimos uma função no manipulador onreadystatechange. Esta função só será
executada pelo próprio objeto AJAX assim que ele começar a ser executado.
O que precisamos fazer aqui é entender bem o funcionamento desta função, quais são as propriedades mais
importantes, seus valores e para que eles servem.
Propriedade readyState
Esta propriedade define o status do objeto AJAX quanto ao processo de recebimento de dados da página
destino e pode ter os seguintes valores:-
Valor Significado
0 O objeto foi instanciado (criado), mas ainda não foi inicializado
1 O objeto já foi aberto
2 Dados já foram enviados à página destino (solicitação efetuada)
3 Dados estão sendo carregados (o que significa que a operação está em operação)
4 O objeto está finalizado, o que significa que o recebimento de dados finalizou

Para nós, o que interessa é quando a propriedade readyState esteja com valor igual a quatro, o que
significa que o processo já finalizou e a informação (caso não tenha havido nenhum problema) está
disponível para uso.
A propriedade readyState do objeto AJAX, enquanto não estiver com o valor 4 (que significa que
a operação foi finalizada) significa que a operação está em andamento. Como o objeto foi criado de
forma assíncrona, ele continua aguardando o resultado que será enviado pela página PHP.
Propriedade status
Esta propriedade armazena o resultado do acesso à página destino do objeto AJAX.
Seus valores mais comuns são:-
Valor Significado
200 OK – página encontrada e executada
403 Forbidden – conteúdo proibido de ser exibido
404 Not Found – Página não encontrada
O desenvolvedor deve checar qual o valor desta propriedade para tomar a ação devida.
Se o valor desta propriedade for duzentos (200) significa que a página foi encontrada (e executada) de
forma que podemos continuar o procedimento que em geral é utilizar o resultado enviado por página e
armazenado no objeto AJAX.
if (objetoAJAX.status == 200)
.....
Caso contrário, houve algum problema (exemplo: Página não encontrada).
Neste caso, a obrigação do desenvolvedor é informar o usuário.
Neste exemplo, o programa informa ao usuário que houve falha na tentativa de localização do id do usuário.
A propriedade statusText contém uma descrição mais amigável do texto ocorrido. O desenvolvedor pode
utilizar esta propriedade para exibir o erro em formato texto ao invés de exibir o código do erro ao usuário
final. Exemplo:-

......
Recuperando o resultado do objeto AJAX
Vamos agora estudar a seguinte situação/possibilidade:-

1) O objeto AJAX está com seu status finalizado (readyState=4), ou seja, o processo já foi realizado e
está pronto para ser acessado.
2) O status do acesso à página destino teve sucesso (status=200), ou seja, houve sucesso no
recebimento dos dados da página PHP.
3) Vamos agora acessar o objeto AJAX (propriedade responseText ) e utilizar os dados que foram
recuperados da página consultada
{

{
if (objetoAJAX
objetoAJAX.status == 200)
{
......
A propriedade responseText do objeto AJAX, armazena o que foi recuperado da página consultada, em
formato de texto.
Esta variável irá armazenar o que a página PHP enviou para o objeto AJAX, que neste caso é um comando
HTML contendo um SPAN e o texto Disponível ou Indisponível (texto com estilo CSS embutido).
Vamos guardar este resultado numa variável chamada texto, para podermos utilizá--la posteriormente no
programa.
Em seguida inserimos a variável texto no objeto span

span (criado desde o começo da página) dentro de sua
propriedade innerHTML, para exibir se a identificação,, neste momento está disponível ou indisponível para
uso pelo usuário.
{

}
......

Além da propriedade responseText, o objeto AJAX tem a propriedade responseXML que contém
a mesma informação recuperada da página consultada, mas em formato XML. Para utilizar o dado
neste formato, o retorno da informação
informação do PHP teria que ser formatado também em XML. Não
pretendo cobrir esta propriedade nesta apostila.
Para maiores informações sobre (demais códigos de status), consulte:-

consulte:
http://www.w3.org/Protocols/rfc2616/rfc2616
3.org/Protocols/rfc2616/rfc2616-sec10.html
Tratando a falha
Como informado anteriormente, caso haja alguma falha na recuperação do objeto da página PHP (Exemplo:
Servidor fora do ar, falha de comunicação, estouro de tempo de acesso, etc.), o objeto ficará com sua
propriedade status diferente de 200 (sucesso). Neste caso, inseri o texto “Falha
Falha na localização do ID:”
ID:
junto com o motivo da falha.
...
else
{
}
......
Em alguns casos, pode ser interessante eliminar o trecho de código Javascript acima. Considerando que a
página de cadastro PHP irá fazer a consistência da existência da identificação, sempre que o usuário clicar
no botão Cadatrar, o desenvolvedor pode querer não mostrar nada para o usuário em caso de falha do
AJAX, de forma a não gerar confusão e preocupação ao usuário, no funcionamento da rotina.
Passo 7 - Executar o objeto AJAX
Para finalizar a rotina e fazer com que o objeto AJAX inicie sua execução (acesso à página de consulta),
devemos acionar/executar seu método send().. Este é o método responsável por iniciar o funcionamento do
objeto AJAX. Este método aceita um parâmetro, mas neste caso utilizaremos o valor null como parâmetro,
uma vez que não o utilizaremos.
...
else
{

}
}
}
objetoAJAX.send(null)
}
}
</script>
......
A explicação deste exemplo está finalizada.

finalizada No final deste artigo segue o código completo destas páginas e
um snapshot do banco de dados para efetivação dos testes pelo leitor.
Trabalhando com diversos objetos AJAX

Analise o formulário de pedido a seguir através da ótica de utilização de AJAX:-
Tente identificar quais são as informações que podem ser recuperadas de um banco de dados através do
uso de AJAX para a montagem da interface acima.
Irei detalhar os tipos de informações existentes nesta interface:-

interface:
Uma possibilidade que existe é a criação de diversos objetos AJAX, cada um dos quais acionando uma
página de consulta específica e recebendo dados diferentes.
Na página apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:-
AJAX:
Lista (combo) de códigos de produtos existentes
Nome do produto

Preço do produto
Foto do produto
Descrição do produto
A técnica aqui consiste em criar um objeto AJAX para cada item a ser utilizado. Veja o código a seguir:-
try
{
xmlFoto= new XMLHttpRequest();
xmlTit= new XMLHttpRequest();
xmlPreco= new XMLHttpRequest();
xmlDesc= new XMLHttpRequest();
}
catch(e1)
{
try
{
xmlFoto = new ActiveXObject("Msxml2.XMLHTTP");
xmlTit = new ActiveXObject("Msxml2.XMLHTTP");
xmlPreco = new ActiveXObject("Msxml2.XMLHTTP");
xmlDesc = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e2)
{
try
{
xmlFoto = new ActiveXObject("Microsoft.XMLHTTP");
xmlTit = new ActiveXObject("Microsoft.XMLHTTP");
xmlPreco = new ActiveXObject("Microsoft.XMLHTTP");
xmlDesc = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3)
{
xmlFoto = null;
}
}
}
No exemplo acima, criamos quatro objetos AJAX, cada um dos quais fará uma chamada a uma página
diferente.
Os exemplos para você fazer os seus testes podem ser encontrados abaixo:-
WWW.carlosmajer.com.br/AJAX
E a explicação está no blog:-
http://www.carlosmajer.com.br/blog/?p=340
Segue abaixo o conteúdo dos arquivos de exemplos de formulário explicados nesta apostila.

Exemplo – Formulário de Cadastro

Ambiente Web para execução de testes
Sugiro a instalação do WAMP Server (http://www.wampserver.com/en/)
( ) em seu computador. Este ambiente
instala os seguintes aplicativos:-
Servidor Web Apache com o módulo PHP5
Banco de Dados MYSQL
Aplicativos de apoio
Este ambiente irá permitir a execução dos testes utilizando a página em linguagem PHP e a criação do banco
de dados MYSQL explicado abaixo. Caso deseje e tenha conhecimento, o desenvolvedor pode criar uma
página ASP (ao invés da PHP) e criar o banco de dados no SQL Server ou outro banco de dados preferido.
Arquivos deste exemplo
CadastraUsuario.htm - Página de cadastro de usuário com o código AJAX inserido
localizaUsuario.php - Página que localiza o usuário, em linguagem PHP
GravaUsuario.php – Página que grava o usuário no banco, em linguagem PHP
ajax-loader.gif – ícone de simulação de execução ou carregamento .
Criação do Banco de Dados e tabela de Usuários

Utilizei o Prompt do MYSQL para criação do banco de dados. Exemplo:-
Exemplo:
Utilize as linhas abaixo (copie e cole no prompt do MYSQL) para gerar o banco deste exemplo:-
exemplo:
create database exemploAjax;

exemploAjax
use exemploAjax;
create table usuarios (
idUsuario varchar(20),

senha varchar(20),
nome varchar(50),
endereco varchar(50),
cidade varchar(50),
uf varchar(2),
cep varchar(9),
primary key(idUsuario) );
Código Fonte das Páginas

Copie e cole o código das páginas abaixo e salve-as em arquivos mantendo os nomes originais.
Em seguida, insira estes arquivos na pasta de seu servidor WEB, para efetuar os seus testes.
Note que estou utilizando o usuário root e senha em branco para acesso ao MYSQL. Caso seu banco de
dados esteja diferente (usuário/senha), ajuste as linhas de comando de acesso, nas páginas PHP abaixo.
Página CadastraUsuario.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Cadastro de Novo Usuário</title>
<style type="text/css">
body {
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-
serif;
height: 100%;
margin: 0px;
padding: 85px 0px 0px 0px;
text-align:center;
}
form {
margin:0px auto;
text-align:left;
width: 520px;
}
fieldset {
margin: 0px auto;
border-color:silver;
}
label {
display:block;
float:left;
padding-right:10px;
text-align:right;
width:150px;
}
.campos {
background-color:#FFFFCC;
border:1px solid black;
margin-bottom:4px;
}
.obrigatorio{font-weight:bold;}

</style>
<script language="javascript">

</script>
</head>
<body>
<form action="GravaUsuario.php" method="post" name="formUsuario">
<fieldset>
<legend>Dados do Usuário</legend>
<label for="idUsuario"
class="obrigatorio">Identificação*:</label>
<input type="text" name="idUsuario" id="idUsuario"
class="campos" size="20" maxlength="20" onblur="ChecaUsuario()">
<span id="aviso"></span ><br>
<label for="senha" class="obrigatorio">Senha*:</label>

<input type="password" name="senha" id="senha"
class="campos" size="20" maxlength="20"> <br>
<label for="nome" class="obrigatorio">Nome*:</label>

<input type="text" name="nome" id="nome" class="campos"
size="50" maxlength="50"> <br>
<label for="endereco">Endereço:</label>
<input type="text" name="endereco" id="endereco"
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade"
<label for="uf">Estado:</label>
<input type="text" name="uf" id="uf" class="campos"
<label for="cep">CEP:</label>
<input type="text" name="cep" id="cep" class="campos"
<label><input type="submit" value="Cadastrar"></label><br>
* = Preenchimento obrigatório!
</fieldset>
</form>
</body>
</html>

Página localizaUsuario.php
<?php
$conexao = mysql_connect("localhost","root","");
$charset = "iso-8859-1";
$mime = "text/html";
header("Content-Type: $mime;charset=$charset");
mysql_select_db("exemploAjax",$conexao);
if(isset($_GET['codigo']))
{
$cmdSQL = "select * from usuarios where idUsuario='".
$_GET['codigo'] . "'";
$res = mysql_query($cmdSQL) or die(mysql_error());
$linhas = mysql_num_rows($res);
if( $linhas > 0)
{
echo "<span style='color:red;font-weight: bold'>
Indisponível</span>";
}
else
{
echo "<span style='color:green'>Disponível</span>";
}
mysql_close();
}
?>
Página GravaUsuario.php
<?php
$conexao = mysql_connect("localhost","root","");
$charset = "iso-8859-1";
$mime = "text/html";
header("Content-Type: $mime;charset=$charset");
mysql_select_db("exemploAjax",$conexao);
if(isset($_POST['idUsuario']))
{
$res = mysql_query("select * from usuarios where
idUsuario='".$_POST['idUsuario']."'") or die(mysql_error());
$linhas = mysql_num_rows($res);
if( $linhas > 0)
{
echo "Infelizmente o usuário <span style='color:red'>"
. $_POST['idUsuario']."</span> já está em uso. Favor informar outro
usuário.<br>";
echo "Clique <a href='#'>aqui</a> para voltar.";
}
else
{
$codigo=$_POST['idUsuario'];
$nome=$_POST[nome];
$endereco=$_POST[endereco];

$cidade=$_POST[cidade];
$uf=$_POST[uf];
$cep=$_POST[cep];
$comandoSQL = "insert into usuarios (idUsuario, senha, nome,

endereco, cidade, uf, cep) values ('$codigo', '$senha', '$nome', '$endereco',
'$cidade',
idade', '$uf', '$cep')";
$res = mysql_query($comandoSQL ) or die("Erro:" . mysql_error());
echo "OK - Usuário incluído com sucesso!<br>";
}
mysql_close();
}
?>
Conclusão
O uso do Javascript e XML (AJAX) veio para ficar e trazer novas formas de
enriquecer a forma pela qual os usuários interagem na interface. Cabe aos
desenvolvedores o estudo destas tecnologias para se destacarem no
mercado e melhorarem a experiência do usuário nas suas ferramentas.
Dúvidas?
Por favor, não envie e-mail.
Coloque-as diretamente no BLOG:-

WWW.carlosmajer.com.br
Carlos Majer.

Apostila Básica de AJAX - Carlos Majer

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila Básica de AJAX - Carlos Majer

Caricato da

Copyright:

Formati disponibili

DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010

Este material pertence a Carlos A. Majer, Professor Universitário de Tecnologia da Informação e

Para maiores informações envie um e-mail para

Tecnologia Nível de Conhecimento Desejado

Versão 4.0b - Prof. Carlos Majer Página 1

Algumas pessoas podem pensar que AJAX é algum produto de limpeza.

Versão 4.0b - Prof. Carlos Majer Página 2

Formulário de Cadastro de Usuário

Isto faz com que o processo seja lento e tedioso.

Ao clicar no botão para confirmar seu cadastro,

Funcionamento sem uso de AJAX

Vamos dar uma olhada no processo tradicional de cadastro?

Versão 4.0b - Prof. Carlos Majer Página 3

1 – Preenchimento de Dados do Formulário - usuário insere informações

2 - Verificação da identificação do usuário – Página Dinâmica

4 - Sucesso - ID informado não exisstte no banco

3 - Problemas - ID informado já está em uso:-

Versão 4.0b - Prof. Carlos Majer Página 4

Usuário depara-se com a lei de Murphy:-

Funcionamento com uso de AJAX

Versão 4.0b - Prof. Carlos Majer Página 5

Layout do Formulário e Uso de CSS

Esta marca e outros elementos (posicionamento,

Validação de Campos Obrigatórios

Versão 4.0b - Prof. Carlos Majer Página 6

Alteração da página HTML – Formulário de Cadastro para uso do AJAX

<form action="GravaUsuario.php" method="post" name="formUsuario">

Versão 4.0b - Prof. Carlos Majer Página 7

b. Quando finalizar o processo, exibir

Isto depende do resultado que vem de uma página externa.

A seguir iremos verificar de que maneira este funcionamento se dará.

Versão 4.0b - Prof. Carlos Majer Página 8

Veja o código PHP deste exemplo no final do artigo.

4) A consulta ao banco efetuada deverá verificar o número de linhas (tuplas/registros) encontrado

Versão 4.0b - Prof. Carlos Majer Página 9

Estrutura da Função ChecaUsuario()

Versão 4.0b - Prof. Carlos Majer Página 10

1 - Entendendo a criação do objeto AJAX

Analise a tabela abaixo:-

Navegador Código de criação do objeto AJAX

Tentativa e Erro (TRY/CATCH)

Versão 4.0b - Prof. Carlos Majer Página 11

Criando o objeto AJAX

Versão 4.0b - Prof. Carlos Majer Página 12

Bom, se até agora não funcionou é porque existem as seguintes possibilidades:-

Versão 4.0b - Prof. Carlos Majer Página 13

Falha na criação do objeto AJAX

Passo 2 – Inserção da imagem de carregamento no SPAN

Versão 4.0b - Prof. Carlos Majer Página 14

Passo 3 – Recuperação da identificação do usuário

var txtUsuario = document.getElementById("idUsuario").value

Versão 4.0b - Prof. Carlos Majer Página 15

Passo 4 – Montagem do Endereço de chamada (URL) da página PHP

Esta página chama-se localizaUsuario.php.

Para utilização numa URL, devemos fazer assim:-

<nome da pagina>?<nome do elemento>=<valor>&<nome do segundo elemento>=<valor>

Basicamente será algo assim que seria montado:-

var objSpan =document.getElementById("aviso")

var txtUsuario = document.getElementById("idUsuario").value

Versão 4.0b - Prof. Carlos Majer Página 16

Por que estamos usando a função escape?

Passo 5 – Preparando o objeto AJAX – Parte 1

var txtUsuario = document.getElementById("idUsuario").value

Versão 4.0b - Prof. Carlos Majer Página 17