Apostila Básica de AJAX - Carlos Majer

DESENVOLVIMENTO WEB INTRODUO AO AJAX 2008/2010
Verso 4.0b - Prof. Carlos Majer Pgina 1

Este material pertence a Carlos A. Majer, Professor Universitrio de Tecnologia da Informao e
Especialista em Ensino a Distncia e Docncia Superior pela Universidade Cidade de So Paulo (UNICID).

Licena de Uso

Este trabalho est licenciado sob uma Licena Creative Commons: Atribuio-Compartilhamento pela mesma
Licena 2.5 Brasil. Para ver uma cpia desta licena, visite http://creativecommons.org/licenses/by-
sa/2.5/br/ (em portugus) 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 restries:-
Voc dever sempre fazer referncia ao autor: Carlos Majer
O texto Documento disponvel em http://www.carlosmajer.com.br/ deve
ser mencionado ao menos uma vez neste documento (Este o Termo de
Licena para uso deste documento), podendo ser no rodap das pginas, na
primeira ou ltima pgina do documento de projeto. Caso venha a ter alguma
dvida contate-me diretamente.
Voc no poder utilizar este trabalho para fins ilegais, imorais ou de forma a
denegrir ou prejudicar outras pessoas ou instituies.
Para maiores informaes 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 pblico. Caso note algum erro ou tenha
alguma sugesto, sinta-se vontade para me contatar.

Tecnologia Nvel de Conhecimento Desejado
HTML Mdio
Javascript Mdio
Programao Web Mdio



AJAX
Asynchronous Javascript and XML
I In nt tr ro od du u o o
Este um artigo que visa introduzir a utilizao de AJAX ao desenvolvedor web. Para isto, o estudante deve
atender alguns pr-requisitos:-
Conhecimento mnimo para criao de elementos de formulrios HTML
Conhecimento mnimo de funcionamento do Javascript (estrutura, condies, laos, criao de
variveis, etc.)
Conhecimento bsico do DOM Document Object Model, para poder acessar os objetos criados na
pgina HTML.
Como o exemplo em PHP, pressupe-se que o desenvolvedor tenha conhecimento desta
linguagem. Caso isto no ocorra, mas ele tenha conhecimento em outras linguagens de
programao web, ele poder, por analogia, entender o que a pgina PHP est fazendo.
Caso no 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 acrnimo para Javascript Assncrono 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 criao de um
objeto Ajax (Javascript). Este objeto consegue acessar outra pgina e receber o retorno de informao
(sem sair da primeira pgina).

A informao recebida pode ser tratada dentro do cdigo (da pgina onde o objeto existe) permitindo ao
desenvolvedor uma forma inovadora na criao de sua interface de forma a enriquecer e agilizar a
experincia do usurio dentro do sistema.

Uma das caractersticas deste objeto que o mesmo pode comportar-se de uma forma assncrona em
relao pgina HTML, isto , enquanto a pgina continua a ser carregada (parcialmente ou totalmente) o
objeto funciona em paralelo, correspondendo-se com a pgina destino at receber a informao 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 Extensvel tal como o HTML baseada no padro SGML (Standard Generalized
Markup Language) e foi criada para facilitar a troca de dados. O AJAX por padro transfere os dados de um
local para outro usando XML. Alm do XML existe a possibilidade de receber as informaes em formato
texto.

DESENVOLVIMENTO WEB
Verso 4.0b - Prof. Carlos Majer

F Fo or rm mu ul l r ri io o d de e C Ca ad da as st tr ro o
Um dos grandes problemas do HTML
precisar acessar alguma informao (muitas vezes em funo de uma interao com o usurio), numa
determinada pgina, esta informao s pode ser recuperada atravs de uma chamada outra pgina

Isto faz com que o processo seja lento e tedioso.

Um exemplo clssico o do tpico cadastro de um novo usurio num site. O usurio informa sua
identificao (tambm conhecida como

Ao clicar no boto para confirmar seu c
(dinmica) que ir verificar se a identificao (login/ID) informada pode ser usada pelo novo usurio
(verificando a existncia da informao no banco de dados).

Funcionamento sem uso de AJAX
Muitas vezes, na utilizao tradicional da web (sem o uso de AJAX) verificamos a necessidade constante de
recarga de pginas at se atingir o objetivo desejado.
para se executar este tipo de procedimento.

Vamos dar uma olhada no processo tradicional de cadastro?

DESENVOLVIMENTO WEB INTRODUO AO AJAX

o o d de e U Us su u r ri io o
HTML (e seus derivados PHP, ASP, ASP.NET, etc.) o fato de que ao
determinada pgina, esta informao s pode ser recuperada atravs de uma chamada outra pgina
Isto faz com que o processo seja lento e tedioso.
identificao (tambm conhecida como login ou ID) e demais dados.
Ao clicar no boto para confirmar seu cadastro, a pgina de cadastro (HTML) carrega outra pgina
(verificando a existncia da informao no banco de dados).
Funcionamento sem uso de AJAX
as vezes, na utilizao tradicional da web (sem o uso de AJAX) verificamos a necessidade constante de
recarga de pginas at se atingir o objetivo desejado. At alguns anos atrs esta era a nica forma utilizada
procedimento.
Vamos dar uma olhada no processo tradicional de cadastro?
2008/2010
Pgina 3
(e seus derivados PHP, ASP, ASP.NET, etc.) o fato de que ao
determinada pgina, esta informao s pode ser recuperada atravs de uma chamada outra pgina.
) carrega outra pgina
as vezes, na utilizao tradicional da web (sem o uso de AJAX) verificamos a necessidade constante de
esta era a nica forma utilizada

DESENVOLVIMENTO WEB

1 1 P Pr re ee en nc ch hi im me en nt to o d de e D Da ad do os s d do o F Fo or r

Neste momento, o usurio dever preencher as informaes do formulrio. Note que o formulrio pode ter
validaes internas em javascript para, por exemplo, consistir se os campos obrigatrios foram
informados.

Nota: Veja no final deste artigo informaes para criao (banco de dados, pginas, etc.) dos exemplos
informados.

2 2 - - V Ve er ri if fi ic ca a o o d da a i id de en nt ti if fi ic ca a o o d do o u us s
Aqui, a pgina PHP (pode ser feito em outra linguagem)
abre a tabela de cadastro e tenta localizar o usurio atravs da
identificao chave nica para cadastro de usurios, no pode haver duas identificaes iguais.

4 4 - - S Su uc ce es ss so o - - I ID D i in nf fo or rm ma ad do o n n o o e ex xi is st
A pgina PHP verifica que a identificao informada no existe no banco de dados. Sendo as
o processo de cadastro de novo usurio.

3 3 - - P Pr ro ob bl le em ma as s - - I ID D i in nf fo or rm ma ad do o j j e es st t
Em seguida o usurio volta tela anterior e altera sua identificao
efetuando todo o processo novamente

r rm mu ul l r ri io o - - u us su u r ri io o i in ns se er re e i in nf fo or rm ma a e es s
em javascript para, por exemplo, consistir se os campos obrigatrios foram
: Veja no final deste artigo informaes para criao (banco de dados, pginas, etc.) dos exemplos
s su u r ri io o P P g gi in na a D Di in n m mi ic ca a
(pode ser feito em outra linguagem) executada. Ela conecta-se com o banco de dados,
abre a tabela de cadastro e tenta localizar o usurio atravs da identificao fornecida. Como a
para cadastro de usurios, no pode haver duas identificaes iguais.
st te e n no o b ba an nc co o
verifica que a identificao informada no existe no banco de dados. Sendo as
o processo de cadastro de novo usurio.
e em m u us so o: :- -
Em seguida o usurio volta tela anterior e altera sua identificao (e informa novamente a senha),
efetuando todo o processo novamente.
2008/2010
Pgina 4

em javascript para, por exemplo, consistir se os campos obrigatrios foram
: Veja no final deste artigo informaes para criao (banco de dados, pginas, etc.) dos exemplos
se com o banco de dados,
fornecida. Como a
para cadastro de usurios, no pode haver duas identificaes iguais.
verifica que a identificao informada no existe no banco de dados. Sendo assim, ela finaliza

(e informa novamente a senha),
DESENVOLVIMENTO WEB

U Us su u r ri io o d de ep pa ar ra a- -s se e c co om m a a l le ei i d de e M Mu ur rp p

Este tipo de experincia pode fazer com que o usurio se irrite levando

Este processo pode ser moroso. Para se chegar ao destino (a segunda pgina), diversos caminhos podero
ser percorridos na Internet (Tente executar o comando

Esta segunda pgina usualmente gera uma pgina resultante que enviada ao usurio (mquina

O resultado, em muitos casos um aviso de que a identificao informada pelo usurio
para uso (porque j existe outro usurio com esta identificao), de forma que o usurio tem que, de
alguma forma, retornar pgina anterior e digitar outra identificao/login
cadastro. Tedioso no?

Funcionamento com uso de AJAX
Note que o objetivo no uso do AJAX, n
(indisponvel) ou no (disponvel).

Com isto, o usurio poder saber de antemo se o processo de cadastro de um novo usurio ir funcionar.

O usurio digita sua identificao (desejada). Ao sair da caixa de texto,
que o usurio saiba que algo est ocorrendo

O objeto AJAX criado e executa uma pgina dinmica
dados e efetua a busca da identificao
contendo uma string ao objeto AJAX
ou Indisponvel).

Assim que o objeto AJAX tem o retorno do resultado, ele
identificado como aviso) previamente criada para receber esta informao:


p ph hy y: :- -

Este tipo de experincia pode fazer com que o usurio se irrite levando-o a desistir do uso da ferramenta.
idos na Internet (Tente executar o comando tracert WWW.uol.com.br
Esta segunda pgina usualmente gera uma pgina resultante que enviada ao usurio (mquina
s um aviso de que a identificao informada pelo usurio
alguma forma, retornar pgina anterior e digitar outra identificao/login e novamente tentar concluir seu
Funcionamento com uso de AJAX
do AJAX, neste procedimento acelerar a informao ao usurio de ID existente
O usurio digita sua identificao (desejada). Ao sair da caixa de texto, um cone animado exibido, para
que o usurio saiba que algo est ocorrendo (O texto Carregando... tambm poderia ter sido
criado e executa uma pgina dinmica (neste exemplo em PHP) que
dados e efetua a busca da identificao digitada numa tabela. Em seguida, a pgina
ao objeto AJAX representando o resultado da consulta (neste caso o texto
tem o retorno do resultado, ele insere o mesmo dentro de uma rea (um SPAN
reviamente criada para receber esta informao:-
2008/2010
Pgina 5

o a desistir do uso da ferramenta.
para entender isto).
Esta segunda pgina usualmente gera uma pgina resultante que enviada ao usurio (mquina-cliente).
s um aviso de que a identificao informada pelo usurio no est disponvel
e novamente tentar concluir seu
este procedimento acelerar a informao ao usurio de ID existente
um cone animado exibido, para
tambm poderia ter sido utilizado).

que abre o banco de
, a pgina retorna um SPAN
neste caso o texto Disponvel
insere o mesmo dentro de uma rea (um SPAN
DESENVOLVIMENTO WEB

ID j existente
ID no existente
Irei explicar mais frente esta pgina em detalhes. Vamos verificar agora como funciona o
passo.

L La ay yo ou ut t d do o F Fo or rm mu ul l r ri io o e e U Us so o d de e C CS SS S
Ao analisar o cdigo da pgina web (HTML
HTML) para delimitar os textos/rtulos que aparecem na frente das caixas de textos (a serem preenchidas
pelo usurio).

Esta marca e outros elementos (posi
atravs do uso de CSS. No de minha inteno detalhar o funcionamento do CSS em uso neste artigo, mas
caso o desenvolvedor pense ser interessante, sugiro verificar os comandos de estil
pginas de exemplo disponibilizadas de forma integral no final deste artigo.

V Va al li id da a o o d de e C Ca am mp po os s O Ob br ri ig ga at t r ri io os s
Inseri no formulrio algumas indicaes visuais de que alguns campos so obrigatrios. Para deixar o
Javascript mais simples de ser estudado, decidi no inserir a validao na pgina.

frente esta pgina em detalhes. Vamos verificar agora como funciona o

Ao analisar o cdigo da pgina web (HTML - logo abaixo) voc notar que utilizei a marca
Esta marca e outros elementos (posicionamento, cor de fundo, cor do texto, etc.) esto sendo estilizados
caso o desenvolvedor pense ser interessante, sugiro verificar os comandos de estilo existentes no cdigo das
pginas de exemplo disponibilizadas de forma integral no final deste artigo.
imples de ser estudado, decidi no inserir a validao na pgina.
2008/2010
Pgina 6

frente esta pgina em detalhes. Vamos verificar agora como funciona o processo passo a
logo abaixo) voc notar que utilizei a marca <label> (do
cionamento, cor de fundo, cor do texto, etc.) esto sendo estilizados
o existentes no cdigo das


Alterao da pgina HTML Formulrio de Cadastro para uso do AJAX
Verifique a estrutura (parcial) HTML (abaixo) da pgina que contm o formulrio 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 funo Javascript,de nome ChecaUsuario() (a ser
criada). Isto far com que toda vez que se sair deste objeto, a funo ChecaUsuario() ser
executada. Dentro dela ser criado e executado o objeto AJAX.
2) Um elemento do tipo SPAN foi criado, sem nenhum contedo. Este elemento ser utilizado pelo
objeto AJAX para:-
a. Assim que ser executado, ir armazenar uma imagem (gif animada) que dar a impresso
ao usurio de que algo est ocorrendo (neste caso, a verificao do id do usurio). O
desenvolvedor poder trocar esta imagem pelo texto Carregando..., ou colocar outra
imagem, caso prefira.
DESENVOLVIMENTO WEB

b. Quando finalizar o processo, exibi
mostrando um SPAN contendo um
identificao informada pel
c. Exibir algum erro ocorrido na recuperao da informao da pgina dinmica
Ao visualizarmos a tpica imagem da bolinha girando, pensamos que a pgina tem controle exato sobre
a operao que est sendo realizada.

A verdade que no existe um
processo.

Isto depende do resultado que vem de

Ao se inserir uma imagem logo no incio do processo, ela permanecer sendo exibida durante todo o
procedimento at que o desenvolvedor
indicao do resultado esperado).

A seguir iremos verificar de que maneira este funcionamento se dar.
Viso Geral do Funcionamento via
Observao: O cdigo Javascript pode


Quando finalizar o processo, exibir o resultado obtido da pgina dinmica executada,
SPAN contendo um texto que identificar a disponibilidade
informada pelo usurio (Disponvel/Indisponvel).
bir algum erro ocorrido na recuperao da informao da pgina dinmica
a operao que est sendo realizada.
um controle de quanto tempo levar para que o objeto
que vem de uma pgina externa.
procedimento at que o desenvolvedor altere o contedo do SPAN criado (geralmente inserindo uma
indicao do resultado esperado).
A seguir iremos verificar de que maneira este funcionamento se dar.
Funcionamento via AJAX
Observao: O cdigo Javascript pode estar dentro da pgina HTML ou num arquivo separado.
2008/2010
Pgina 8
o resultado obtido da pgina dinmica executada,
texto que identificar a disponibilidade para uso da
bir algum erro ocorrido na recuperao da informao da pgina dinmica
objeto AJAX finalize seu
(geralmente inserindo uma

pgina HTML ou num arquivo separado.
DESENVOLVIMENTO WEB

1) O objeto da caixa de texto de identificao
outro local do formulrio).
ChecaUsuario().
2) Dentro da funo, o objeto
uma imagem no objeto SPAN
passar ao usurio a impresso de que algo est ocorrendo.
3) O objeto AJAX continua seu trabalho
MYSQL para localizao da identificao digitada, no banco de da
Veja o cdigo PHP deste exemplo no final do artigo.
4) A consulta ao banco efetuada
conforme comando SQL executado.
5) A pgina dinmica (PHP neste exemplo) retorna
o cdigo HTML de um SPAN que contm
este ID pode ser cadastrado) ou
ser cadastrado novamente).
6) Uma vez que o objeto AJAX tenha finalizado o recebimento da informao da pgina PHP, ele
acessar o objeto SPAN inseri
sobrepondo o seu contedo anterior (
Perceba que apesar deste processo estar mais gil, o usurio s saber se conseguiu gravar o ID aps clicar
no boto Cadastrar, ou seja, existe ainda a possibilidade de que, no espao de tempo que

da caixa de texto de identificao perde o foco (quando usurio tecla
Ao fazer isto, o evento onBlur da caixa de texto acionar a funo
o objeto AJAX criado. A primeira ao que este objeto executa a insero de
SPAN (que est localizado ao lado da caixa de texto de identificao
a impresso de que algo est ocorrendo.
continua seu trabalho executando uma pgina PHP que ir se
para localizao da identificao digitada, no banco de dados.
deste exemplo no final do artigo.
efetuada dever verificar o nmero de linhas (tuplas/registros)
conforme comando SQL executado.
neste exemplo) retorna (ao objeto AJAX, que foi quem executou a pgina)
de um SPAN que contm disponvel quando o ID no existir (o que significa que
este ID pode ser cadastrado) ou indisponvel quando o ID j existir (indicando que
ser cadastrado novamente).
Uma vez que o objeto AJAX tenha finalizado o recebimento da informao da pgina PHP, ele
inserindo dentro dele o cdigo HTML recebido da pgina dinmica
sobrepondo o seu contedo anterior (que era a imagem de carregamento).
no boto Cadastrar, ou seja, existe ainda a possibilidade de que, no espao de tempo que
2008/2010
Pgina 9
(quando usurio tecla TAB ou clica em
da caixa de texto acionar a funo
este objeto executa a insero de
que est localizado ao lado da caixa de texto de identificao) para
que ir se conectar no Servidor

(tuplas/registros) encontrado
que foi quem executou a pgina)
tir (o que significa que
(indicando que o ID no pode
Uma vez que o objeto AJAX tenha finalizado o recebimento da informao da pgina PHP, ele ir
da pgina dinmica,

no boto Cadastrar, ou seja, existe ainda a possibilidade de que, no espao de tempo que o usurio levou
DESENVOLVIMENTO WEB

para preencher os demais dados e clicar no
cadastro usando o mesmo ID e cadastrado
Revendo o funcionamento
A funo (javascript) que cria o objeto AJAX a

Esta funo sempre executada quando
seja, quando esta caixa de texto perde o foco (

Sempre que esta funo for executada, ela criar um objeto AJAX que far um acesso a uma pgina PHP
que ir buscar no banco de dados a informao de existncia ou no da identificao do usurio.

Assim que o objeto AJAX receber o resultado da pgina PHP ele ir inserir a informao de disponibilidade
ou indisponibilidade no SPAN localizado ao lado da caixa de texto de identifica

Vamos entrar agora no detalhe de funcionamento da funo
AJAX.
E Es st tr ru ut tu ur ra a d da a F Fu un n o o C Ch h

para preencher os demais dados e clicar no boto Cadastrar, um segundo usurio pode ter
cadastrado antes do primeiro ter finalizado.
A funo (javascript) que cria o objeto AJAX a ChecaUsuario().
executada quando o usurio sai da caixa de texto de identificao do usurio, ou
seja, quando esta caixa de texto perde o foco (evento onBlur).
ados a informao de existncia ou no da identificao do usurio.
ou indisponibilidade no SPAN localizado ao lado da caixa de texto de identificao.
Vamos entrar agora no detalhe de funcionamento da funo ChecaUsuario() que faz a criao do objeto
h he ec ca aU Us su ua ar ri io o( () )
2008/2010
Pgina 10
pode ter feito um
o usurio sai da caixa de texto de identificao do usurio, ou
ados a informao de existncia ou no da identificao do usurio.
que faz a criao do objeto



1 - Entendendo a criao do objeto AJAX
Vamos agora estudar a criao do objeto AJAX para poder ter base para uma anlise mais tcnica 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 atravs de um comando Javascript do navegador. Conforme o navegador utilizado
pelo usurio, e em alguns casos a verso, o comando pode ser diferente.

Analise a tabela abaixo:-

Navegador Cdigo de criao do objeto AJAX
Firefox (Mozilla) e Safri (Apple), Opera var objetoAJAX = new XMLHttpRequest();
Internet Explorer acima da verso 5 var objetoAJAX = new ActiveXObject("Msxml2.XMLHTTP")
Internet Explorer (inicial) var objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
A verso inicial do IE (acima) mantm compatibilidade, podendo ser utilizada com as verses superiores
do navegador.

No Internet Explorer, voc poder encontrar variaes nos comandos para a criao do objeto AJAX
atravs dos diversos objetos ActiveXObject disponibilizados. Iremos estudar alguns destes casos logo a
seguir.

T Te en nt ta at ti iv va a e e E Er rr ro o ( (T TR RY Y/ /C CA AT TC CH H) )
Podemos perceber acima que existem formas diferentes de se criar o objeto AJAX, conforme o navegador
utilizado pelo usurio.

Como fazer ento para se criar um objeto AJAX independente do navegador que o usurio 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 criao do objeto que iremos utilizar no existir no
navegador do usurio, um erro ser gerado.

Utilizaremos ento 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 seo do
cdigo Javascript na qual tentaremos criar o objeto AJAX de outra forma (e assim consecutivamente) at
que consigamos (ou no) definitivamente criar o objeto AJAX.
DESENVOLVIMENTO WEB

C Cr ri ia an nd do o o o o ob bj je et to o A AJ JA AX X
Neste exemplo tentaremos criar o objeto
Explorer, Safri e Opera).

function ChecaUsuario()
{
// PASSO 1 Tentativa de Criao do objeto AJAX
try
{
objetoAJAX = new XMLHttpRequest()
}
catch(e1)
{
try
{
objetoAJAX
}
catch(e2)
{
try
{
objetoAJAX
}
catch(e3)

Neste exemplo tentaremos criar o objeto AJAX nos navegadores mais conhecidos (Firefox, Internet
Tentativa de Criao do objeto AJAX
= new XMLHttpRequest()
= new ActiveXObject("Msxml2.XMLHTTP")
objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
2008/2010
Pgina 12

nos navegadores mais conhecidos (Firefox, Internet
= new ActiveXObject("Microsoft.XMLHTTP")


{
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 atravs da chamada funo
XMLHttpRequest(), a qual s funcionar nos navegadores Firefox, Safri e pera. Veja:-

try
{
}

Caso o navegador seja outro (esta funo no exista no navegador do usurio) um erro ser gerado, o que
far com que o fluxo do programa seja desviado para o bloco de comandos logo abaixo da instruo
catch(e1).

Tentaremos agora criar o objeto AJAX atravs da chamada funo ActiveXObject tentando criar um
objeto AJAX atravs do parmetro Msml2.XMLHTTP (veja abaixo). Este objeto reconhecido pelo Internet
Explorer a partir da verso 5.5:-

try
{
objetoAJAX = new ActiveXObject("Msxml2.XMLHTTP")
}

Caso novamente no funcione (O IE menor ou igual verso 5.0, ou o navegador do usurio no o IE),
o fluxo do programa ser desviado para o bloco de comandos abaixo da instruo catch(e2).

Tentaremos agora criar o objeto AJAX usando a mesma funo (ActiveXObject) mas informando um
parmetro diferente (do comando anteriormente executado), que as verses do IE abaixo da 5.5 conhece:-

try
{
objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
}

Bom, se at agora no funcionou porque existem as seguintes possibilidades:-

1) Ou o usurio no est usando nenhum dos navegadores acima informados (que compe a maioria
dos navegadores em uso no mundo)
2) Ou o desenvolvedor digitou algo errado no Javascript, aps o primeiro bloco Try/Catch, o que est
fazendo com que, em qualquer erro gerado, o fluxo do programa seja desviado para outra seo do
programa. Sugiro que voc reveja o seu cdigo Javascript e resolva o problema antes de colocar a
pgina no ar.


Caso haja um problema, o prximo bloco try/catch ser executado. Aps a instruo catch(e3) fao 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 pgina.
objetoAJAX = false

F Fa al lh ha a n na a c cr ri ia a o o d do o o ob bj je et to o A AJ JA AX X
Qual o impacto na falha na criao do objeto AJAX desta pgina?

O objetivo na criao do objeto AJAX era informar ao usurio se a identificao que ele estava digitando
est disponvel ou no para seu uso. Podemos ento verificar que este procedimento estava trazendo uma
comodidade ao usurio. Caso no consigamos fazer com que o mesmo funcione, o impacto ser pequeno,
uma vez que o usurio ainda poder preencher os dados do formulrio e tentar cadastrar.

O mximo que pode acontecer o que j foi descrito anteriormente, isto , o usurio ter que informar
outra identificao caso a mesma j exista no banco de dados.

Passo 2 Insero da imagem de carregamento no SPAN
Neste momento temos o objeto AJAX criado. Precisamos agora chamar a ateno do usurio 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 cdigo 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 no falso (Quando no conseguimos criar o objeto AJAX
deixo ele com o valor false veja acima).
2) Criamos a varivel objSpan que aponta para objeto SPAN chamado aviso (objeto vazio localizado
ao lado da caixa de texto de identificao do usurio). Qualquer alterao efetuada nesta varivel
propaga-se no objeto destino, como se estivssemos trabalhando com o prprio objeto SPAN
(chamado aviso*).
3) Como este objeto um SPAN, iremos alterar sua propriedade innerHTML que a propriedade que
armazena seu contedo, que alm de texto pode conter cdigo HTML**.

* Para mais informaes 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

DESENVOLVIMENTO WEB

Passo 3 Recuperao da identificao do usurio
Precisamos agora recuperar o que foi digitado na caixa de texto
propriedade value deste objeto HTML
(Document Object Model):-

}
}
if(objetoAJAX)
{
objSpan.innerHTML="<img src='ajax

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

A rotina acima est pegando o valor (value) do objeto idUsuario (do formulrio da pgina HTML) e inserindo
este valor na varivel txtUsuario que ser utilizada nesta rotina (Javascript)
varivel conter a string Carlos.

Recuperao da identificao do usurio
o que foi digitado na caixa de texto idUsuario. Para isto, iremos acessar sua
deste objeto HTML atravs da funo document.getElementById()

img src='ajax-loader.gif'>"
que ser utilizada nesta rotina (Javascript). No exemplo acima, e
2008/2010
Pgina 15

. Para isto, iremos acessar sua
document.getElementById() do DOM
. No exemplo acima, esta


Passo 4 Montagem do Endereo de chamada (URL) da pgina PHP
Iremos criar agora a varivel enderecoURL que conter a chamada pgina PHP que ir fazer uma busca
para verificar se a identificao digitada pelo usurio j existe no banco de dados.

Esta pgina chama-se localizaUsuario.php.

Precisamos chamar esta pgina passando-lhe a identificao que foi digitada pelo usurio (que neste
exemplo a string Carlos).

Para isto, iremos utilizar o mtodo GET. Este um dos mtodos de envio de informao entre pginas e
pode ser utilizado dentro de um formulrio (Exemplo: <form action=... method=GET>) ou atravs de
uma URL (endereo).

Para utilizao numa URL, devemos fazer assim:-

<nome da pagina>?<nome do elemento>=<valor>&<nome do segundo elemento>=<valor>
1) Insira o nome da pgina 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 aps o nome da pgina, insira um ponto de interrogao. Este ponto de interrogao
um caractere especial que funciona como aviso ao navegador de que um elemento est sendo
enviado atravs do mtodo GET.
3) <nome do elemento > Aps o ponto de interrogao 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 aps 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 cdigo Javascript para montagem de uma varivel (chamada
enderecoURL).

Esta varivel ser composta do nome da pgina localizaUsuario.php (que no muda) somada com a
string codigo (nome que decidi aplicar no elemento utilizado pelo Javascript para identificao do usurio) e
em seguida do valor da varivel txtUsuario (que contm o que o usurio digitou na caixa de identificao na
pgina 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 funo escape?
Temos um pequeno problema. Existem navegadores que ao digitarmos um cdigo com acentos, ele
transforma os acentos num cdigo de escape. Veja:-

localizaUsuario.php?codigo=Jo%E3o

No exemplo acima, caso o usurio digite Joo na pgina e caso seu navegador seja o Mozilla Firefox, o
navegador transformar Joo para Jo%E3o, que a forma pela qual este navegador consegue transferir
acentos, entre pginas.

Ocorre que a pgina PHP no conseguir localizar o cdigo correto (pois o que est cadastrado Joo e
no Jo%E3o).

Por outro lado, o Internet Explorer no faz esta alterao no dado enviado.

Para se ter a certeza de que a pgina funcionar em ambos os navegadores, iremos alterar o envio do dado
escapando-o, isto , transformando todos os caracteres em cdigos especiais de escape e efetuando o
processo inverso na pgina PHP (veremos adiante).

Passo 5 Preparando o objeto AJAX Parte 1
O objeto AJAX tem um mtodo chamado open que abre uma determinada pgina (efetua uma conexo)
para recebimento de dados. Este mtodo deve ser configurado com os seguintes parmetros:-
1) Mtodo de Requisio/Envio de dados: GET ou POST (Existem outros, mas vamos nos limitar
nestes dois). Note que o mtodo utilizado neste exemplo (GET) tem total relao com a forma pela
qual acabamos de montar a pgina, no passo 4, acima.
2) Endereo a ser lido/executado: Neste caso, utilizaremos a varivel enderecoURL que contm a
pgina que queremos acessar e que est preparada para enviar o cdigo que queremos passar para
a pgina de consulta (PHP).
3) Funcionamento Assncrono: Neste caso, o true (que significa verdadeiro) confirma que queremos
que o objeto funcione de forma assncrona. A conexo assncrona faz com que o objeto no trave o
funcionamento da pgina HTML permitindo que o objeto AJAX seja executado de forma paralela
com a execuo da pgina HTML. Caso seja informado false, o objeto AJAX ir trabalhar de forma
sncrona, isto , ao ser acionado o objeto AJAX (aps execuo do mtodo send() veja abaixo), o
cdigo Javascript (e HTML) interrompe at que o objeto AJAX tenha sido completamente
processado. Em alguns casos isto pode travar a pgina, particularmente quando ocorrer algum
problema entre o objeto AJAX e a pgina que deveria estar retornando-lhe um contedo.
A partir desta linha o objeto AJAX j est preparado para posteriormente acessar a pgina de consulta e
comeara a aguardar o retorno das informaes desta pgina. (Ele est preparado mas ainda no foi
executado).

var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario)
//Abre o Endereo 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 pgina de consulta.

O O m ma an ni ip pu ul la ad do or r o on nr re ea ad dy ys st ta at te ec ch ha an ng ge e
Para isto, iremos trabalhar com o manipulador de eventos onreadystatechange (alguns chamam de
propriedade ou mtodo do objeto AJAX).

Podemos criar uma funo e associ-la ao manipulador ou simplesmente inserir uma funo dentro do
manipulador (utilizaremos esta forma) para tratar o processo de recebimento de dados pelo objeto AJAX da
pgina 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 localizao do ID:" + objetoAJAX.statusText
}
}
}
......
......

Na primeira linha inserimos uma funo no manipulador onreadystatechange. Esta funo s ser
executada pelo prprio objeto AJAX assim que ele comear a ser executado.

O que precisamos fazer aqui entender bem o funcionamento desta funo, quais so as propriedades mais
importantes, seus valores e para que eles servem.

P Pr ro op pr ri ie ed da ad de e r re ea ad dy yS St ta at te e
Esta propriedade define o status do objeto AJAX quanto ao processo de recebimento de dados da pgina
destino e pode ter os seguintes valores:-

Valor Significado
0 O objeto foi instanciado (criado), mas ainda no foi inicializado
1 O objeto j foi aberto
2 Dados j foram enviados pgina destino (solicitao efetuada)
3 Dados esto sendo carregados (o que significa que a operao est em operao)
4 O objeto est finalizado, o que significa que o recebimento de dados finalizou



Para ns, o que interessa quando a propriedade readyState esteja com valor igual a quatro, o que
significa que o processo j finalizou e a informao (caso no tenha havido nenhum problema) est
disponvel para uso.

A propriedade readyState do objeto AJAX, enquanto no estiver com o valor 4 (que significa que
a operao foi finalizada) significa que a operao est em andamento. Como o objeto foi criado de
forma assncrona, ele continua aguardando o resultado que ser enviado pela pgina PHP.

P Pr ro op pr ri ie ed da ad de e s st ta at tu us s
Esta propriedade armazena o resultado do acesso pgina destino do objeto AJAX.
Seus valores mais comuns so:-

Valor Significado
200 OK pgina encontrada e executada
403 Forbidden contedo proibido de ser exibido
404 Not Found Pgina no encontrada

O desenvolvedor deve checar qual o valor desta propriedade para tomar a ao devida.

Se o valor desta propriedade for duzentos (200) significa que a pgina foi encontrada (e executada) de
forma que podemos continuar o procedimento que em geral utilizar o resultado enviado por pgina e
armazenado no objeto AJAX.

if (objetoAJAX.status == 200)
.....

Caso contrrio, houve algum problema (exemplo: Pgina no encontrada).

Neste caso, a obrigao do desenvolvedor informar o usurio.

Neste exemplo, o programa informa ao usurio que houve falha na tentativa de localizao do id do usurio.

A propriedade statusText contm uma descrio mais amigvel do texto ocorrido. O desenvolvedor pode
utilizar esta propriedade para exibir o erro em formato texto ao invs de exibir o cdigo do erro ao usurio
final. Exemplo:-

......

R Re ec cu up pe er ra an nd do o o o r re es su ul lt ta ad do o d do o o ob bj je et to o A AJ JA AX X

Vamos agora estudar a seguinte situao/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 pgina destino teve sucesso (status=200), ou seja, houve sucesso no
recebimento dos dados da pgina PHP.
3) Vamos agora acessar o objeto AJAX (propriedade responseText ) e utilizar os dados que foram
recuperados da pgina consultada

{
DESENVOLVIMENTO WEB

{
if (objetoAJAX
{
var texto=
......

A propriedade responseText do objeto AJAX, armazena o que foi recuperado da pgina consultada, em
formato de texto.

Esta varivel ir armazenar o que a pgina PHP enviou para o objeto AJAX, que neste caso um comando
HTML contendo um SPAN e o texto Disponvel ou Indisponvel (texto com estilo CSS embutido).

Vamos guardar este resultado numa varivel chamada
programa.

Em seguida inserimos a varivel texto no objeto spa
propriedade innerHTML, para exibir se a
uso pelo usurio.

{

}
......


objetoAJAX.status == 200)
......
do objeto AJAX, armazena o que foi recuperado da pgina consultada, em
e o texto Disponvel ou Indisponvel (texto com estilo CSS embutido).
Vamos guardar este resultado numa varivel chamada texto, para podermos utiliz-
Em seguida inserimos a varivel texto no objeto span (criado desde o comeo da pgina) dentro de sua
propriedade innerHTML, para exibir se a identificao, neste momento est disponvel ou indisponvel para
2008/2010
Pgina 20
do objeto AJAX, armazena o que foi recuperado da pgina consultada, em
e o texto Disponvel ou Indisponvel (texto com estilo CSS embutido).
-la posteriormente no

n (criado desde o comeo da pgina) dentro de sua
, neste momento est disponvel ou indisponvel para
DESENVOLVIMENTO WEB

Alm da propriedade responseText,
a mesma informao recuperada da pgina consultada, mas em formato XML.
neste formato, o retorno da inform
pretendo cobrir esta propriedade nesta apostila.

Para maiores informaes sobre (demais cdigos de status), consulte:
http://www.w3.org/Protocols/rfc2616/rfc2616

T Tr ra at ta an nd do o a a f fa al lh ha a
Como informado anteriormente, caso haja alguma falha na recuperao do objeto da pgina PHP (Exemplo:
Servidor fora do ar, falha de comunicao, estouro de tempo de acesso, etc.), o objeto ficar com sua
propriedade status diferente de 200
junto com o motivo da falha.

...
else
{
}
......

Em alguns casos, pode ser interessante eliminar o trecho de cdigo Javascript acima. Considerando que a
pgina de cadastro PHP ir fazer a consistncia da existncia da identificao, sempre que o usurio clicar
no boto Cadatrar, o desenvolvedor pode querer
AJAX, de forma a no gerar confuso e preocupao ao usurio, no funcionamento da rotina.
Passo 7 - Executar o objeto AJAX
Para finalizar a rotina e fazer com que o objeto AJAX inicie sua execuo (acesso
devemos acionar/executar seu mtodo
objeto AJAX. Este mtodo aceita um parmetro, mas neste caso utilizaremos o valor
uma vez que no o utilizaremos.
...
else
{

responseText, o objeto AJAX tem a propriedade responseXML
a mesma informao recuperada da pgina consultada, mas em formato XML.
o retorno da informao do PHP teria que ser formatado tambm em XML. No
pretendo cobrir esta propriedade nesta apostila.
Para maiores informaes sobre (demais cdigos de status), consulte:-
3.org/Protocols/rfc2616/rfc2616-sec10.html
diferente de 200 (sucesso). Neste caso, inseri o texto Falha na localizao do ID:
alguns casos, pode ser interessante eliminar o trecho de cdigo Javascript acima. Considerando que a
no boto Cadatrar, o desenvolvedor pode querer no mostrar nada para o usurio em caso de falha do
Executar o objeto AJAX
Para finalizar a rotina e fazer com que o objeto AJAX inicie sua execuo (acesso pgina de consulta),
devemos acionar/executar seu mtodo send(). Este o mtodo responsvel por iniciar o funcionamento do
objeto AJAX. Este mtodo aceita um parmetro, mas neste caso utilizaremos o valor
2008/2010
Pgina 21

responseXML que contm
a mesma informao recuperada da pgina consultada, mas em formato XML. Para utilizar o dado
ao do PHP teria que ser formatado tambm em XML. No
Falha na localizao do ID:
alguns casos, pode ser interessante eliminar o trecho de cdigo Javascript acima. Considerando que a
no mostrar nada para o usurio em caso de falha do
pgina de consulta),
. Este o mtodo responsvel por iniciar o funcionamento do
objeto AJAX. Este mtodo aceita um parmetro, mas neste caso utilizaremos o valor null como parmetro,
DESENVOLVIMENTO WEB

}
}
}
objetoAJAX.send(null)
}
}
</script>
......

A explicao deste exemplo est finalizada
um snapshot do banco de dados para efetivao dos testes pelo leitor.
T Tr ra ab ba al lh ha an nd do o c co om m d di iv ve er r
Analise o formulrio de pedido a seguir atravs da tica de utilizao de
Tente identificar quais so as informaes que
uso de AJAX para a montagem da interface acima.

Irei detalhar os tipos de informaes existentes nesta interface:

Uma possibilidade que existe a criao de diversos objetos AJAX,
pgina de consulta especfica e recebendo dados diferentes.

Na pgina apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:
Lista (combo) de cdigos de produtos existentes
Nome do produto

est finalizada. No final deste artigo segue o cdigo completo destas pginas
um snapshot do banco de dados para efetivao dos testes pelo leitor.
r rs so os s o ob bj je et to os s A AJ JA AX X
Analise o formulrio de pedido a seguir atravs da tica de utilizao de AJAX:-
as informaes que podem ser recuperadas de um banco de dados atravs do
para a montagem da interface acima.
Irei detalhar os tipos de informaes existentes nesta interface:-
Uma possibilidade que existe a criao de diversos objetos AJAX, cada um dos quais acionando uma
pgina de consulta especfica e recebendo dados diferentes.
Na pgina apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:
Lista (combo) de cdigos de produtos existentes
2008/2010
Pgina 22
cdigo completo destas pginas e

ser recuperadas de um banco de dados atravs do
cada um dos quais acionando uma
Na pgina apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:-


Preo do produto
Foto do produto
Descrio do produto
A tcnica aqui consiste em criar um objeto AJAX para cada item a ser utilizado. Veja o cdigo 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 pgina
diferente.

Os exemplos para voc fazer os seus testes podem ser encontrados abaixo:-

WWW.carlosmajer.com.br/AJAX

E a explicao est no blog:-

http://www.carlosmajer.com.br/blog/?p=340

Segue abaixo o contedo dos arquivos de exemplos de formulrio explicados nesta apostila.

DESENVOLVIMENTO WEB

E Ex xe em mp pl lo o F Fo or rm mu ul l r ri io o d
Ambiente Web para execuo de testes
Sugiro a instalao do WAMP Server (
instala os seguintes aplicativos:-
Servidor Web Apache com o mdulo PHP5
Banco de Dados MYSQL
Aplicativos de apoio
Este ambiente ir permitir a execuo dos testes utilizando a pgina em linguagem PHP e a criao do banco
de dados MYSQL explicado abaixo. Caso deseje e tenha
pgina ASP (ao invs da PHP) e criar o banco de dados no SQL Server ou outro banco de dados preferido.
Arquivos deste exemplo
CadastraUsuario.htm - Pgina de cadastro de usurio com o cdigo AJAX inserido
localizaUsuario.php - Pgina que localiza o usurio, em linguagem PHP
GravaUsuario.php Pgina que grava o usurio no banco, em linguagem PHP
ajax-loader.gif cone de simulao de execuo ou carregamento .
Criao do Banco de Dados e tabela de Usurios
Utilizei o Prompt do MYSQL para criao do banco de dados. Exemplo:

Utilize as linhas abaixo (copie e cole no prompt do MYSQL) para gerar o banco deste exemplo:

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

d de e C Ca ad da as st tr ro o
Ambiente Web para execuo de testes
Sugiro a instalao do WAMP Server (http://www.wampserver.com/en/) em seu computador. Este ambiente
Servidor Web Apache com o mdulo PHP5
de dados MYSQL explicado abaixo. Caso deseje e tenha conhecimento, o desenvolvedor pode criar uma
Pgina de cadastro de usurio com o cdigo AJAX inserido
Pgina que localiza o usurio, em linguagem PHP
Pgina que grava o usurio no banco, em linguagem PHP
cone de simulao de execuo ou carregamento .
Criao do Banco de Dados e tabela de Usurios
Utilizei o Prompt do MYSQL para criao do banco de dados. Exemplo:-
Utilize as linhas abaixo (copie e cole no prompt do MYSQL) para gerar o banco deste exemplo:
exemploAjax;
varchar(20),
2008/2010
Pgina 24
) em seu computador. Este ambiente
conhecimento, o desenvolvedor pode criar uma
Pgina de cadastro de usurio com o cdigo AJAX inserido
Pgina que grava o usurio no banco, em linguagem PHP

Utilize as linhas abaixo (copie e cole no prompt do MYSQL) para gerar o banco deste exemplo:-


senha varchar(20),
nome varchar(50),
endereco varchar(50),
cidade varchar(50),
uf varchar(2),
cep varchar(9),
primary key(idUsuario) );
Cdigo Fonte das Pginas
Copie e cole o cdigo das pginas 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 usurio root e senha em branco para acesso ao MYSQL. Caso seu banco de
dados esteja diferente (usurio/senha), ajuste as linhas de comando de acesso, nas pginas PHP abaixo.

P P g gi in na a C Ca ad da as st tr ra aU Us su ua ar ri io o. .h ht tm m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Cadastro de Novo Usurio</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 P g gi in na a l lo oc ca al li iz za aU Us su ua ar ri io o. .p ph hp p

<?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 P g gi in na a G Gr ra av va aU Us su ua ar ri io o. .p ph hp p

<?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];
DESENVOLVIMENTO WEB

$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', '$uf', '$cep')";
$res = mysql_query($comandoSQL ) or die("Erro:" . mysql_error());
echo "OK - Usuário incluído com sucesso!<br>";
}
mysql_close();
}
?>

C Co on nc cl lu us s o o
O uso do Javascript e XML (AJAX) veio para
enriquecer a forma pela qual os usurios
desenvolvedores o estudo destas
mercado e melhorarem a experincia do

Dvidas?

Por favor, no envie e-mail.

Coloque-as diretamente no BLOG:-
WWW.carlosmajer.com.br

Carlos Majer.

$cidade=$_POST[cidade];
$uf=$_POST[uf];
$cep=$_POST[cep];
idade', '$uf', '$cep')";
Usuário incluído com sucesso!<br>";
O uso do Javascript e XML (AJAX) veio para ficar e trazer
enriquecer a forma pela qual os usurios interagem na interface. Cabe aos
tecnologias para se destacarem no
mercado e melhorarem a experincia do usurio nas suas ferramentas.

2008/2010
Pgina 29
Usuário incluído com sucesso!<br>";
ficar e trazer novas formas de
interagem na interface. Cabe aos
tecnologias para se destacarem no
usurio nas suas ferramentas.

Apostila Básica de AJAX - Carlos Majer

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Básica de AJAX - Carlos Majer

Enviado por

Direitos autorais:

Formatos disponíveis

DESENVOLVIMENTO WEB INTRODUO AO AJAX 2008/2010

Verso 4.0b - Prof. Carlos Majer Pgina 1

Você também pode gostar