View
2.313
Download
0
Category
Preview:
DESCRIPTION
Esta apostila introduz a utilização de AJAX com seus elementos internos e através de exemplos práticos de utilização.
Citation preview
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 1
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
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 2
AJAX
Asynchronous Javascript and XML IInnttrroodduuççããoo
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.
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
FFoorrmmuulláárriioo ddee CCaaddaassttrroo
Um dos grandes problemas do HTMLprecisar 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 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 Ao clicar no botão para confirmar seu c(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 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.para se executar este tipo de procedimento.
Vamos dar uma olhada no processo tradicional de cadastro?
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
oo ddee UUssuuáárriioo
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
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, 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
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
procedimento.
Vamos dar uma olhada no processo tradicional de cadastro?
2008/2010
Página 3
(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.
Um exemplo clássico é o do típico cadastro de um novo usuário num site. O usuário informa sua
) carrega outra página (dinâmica) que irá verificar se a identificação (login/ID) informada pode ser usada pelo novo usuário
as vezes, na utilização tradicional da web (sem o uso de AJAX) verificamos a necessidade constante de esta era a única forma utilizada
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
11 –– PPrreeeenncchhiimmeennttoo ddee DDaaddooss ddoo FFoorr 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. 22 -- VVeerriiffiiccaaççããoo ddaa iiddeennttiiffiiccaaççããoo ddoo uussAqui, a página PHP (pode ser feito em outra linguagem) abre a tabela de cadastro e tenta localizar o usuário através da identificação é chave única para cadastro de usuários, não pode haver duas identificações iguais. 44 -- SSuucceessssoo -- IIDD iinnffoorrmmaaddoo nnããoo eexxiisstA página PHP verifica que a identificação informada não existe no banco de dados. Sendo aso processo de cadastro de novo usuário. 33 -- PPrroobblleemmaass -- IIDD iinnffoorrmmaaddoo jjáá eessttáá
Em seguida o usuário volta à tela anterior e altera sua identificaçãoefetuando todo o processo novamente
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
rrmmuulláárriioo -- uussuuáárriioo iinnsseerree iinnffoorrmmaaççõõeess
Neste momento, o usuário deverá preencher as informações do formulário. Note que o formulário pode ter em javascript para, por exemplo, consistir se os campos obrigatórios foram
: Veja no final deste artigo informações para criação (banco de dados, páginas, etc.) dos exemplos
ssuuáárriioo –– PPáággiinnaa DDiinnââmmiiccaa (pode ser feito em outra linguagem) é executada. Ela conecta-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 para cadastro de usuários, não pode haver duas identificações iguais.
sttee nnoo bbaannccoo verifica que a identificação informada não existe no banco de dados. Sendo as
o processo de cadastro de novo usuário.
áá eemm uussoo::--
Em seguida o usuário volta à tela anterior e altera sua identificação (e informa novamente a senha), efetuando todo o processo novamente.
2008/2010
Página 4
Neste momento, o usuário deverá preencher as informações do formulário. Note que o formulário pode ter em javascript para, por exemplo, consistir se os campos obrigatórios foram
: Veja no final deste artigo informações para criação (banco de dados, páginas, etc.) dos exemplos
se com o banco de dados, fornecida. Como a
para cadastro de usuários, não pode haver duas identificações iguais.
verifica que a identificação informada não existe no banco de dados. Sendo assim, ela finaliza
(e informa novamente a senha),
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
UUssuuáárriioo ddeeppaarraa--ssee ccoomm aa lleeii ddee MMuurrpp
Este tipo de experiência pode fazer com que o usuário se irrite levando Este processo pode ser moroso. Para se chegar ao destino (a segunda página), diversos caminhos poderão ser percorridos na Internet (Tente executar o comando Esta segunda página usualmente gera uma página resultante que é enviada ao usuário (máquina O resultado, em muitos casos é um aviso de que a identificação informada pelo usuário 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/logincadastro. Tedioso não?
Funcionamento com uso de AJAX
Note que o objetivo no uso do AJAX, n(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, que o usuário saiba que algo está ocorrendo
O objeto AJAX é criado e executa uma página dinâmicadados e efetua a busca da identificação contendo uma string ao objeto AJAXou Indisponível). Assim que o objeto AJAX tem o retorno do resultado, ele identificado como aviso) previamente criada para receber esta informação:
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
pphhyy::--
Este tipo de experiência pode fazer com que o usuário se irrite 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 idos na Internet (Tente executar o comando tracert WWW.uol.com.br
Esta segunda página usualmente gera uma página resultante que é enviada ao usuário (máquina
s é um aviso de que a identificação informada pelo usuário 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
Funcionamento com uso de AJAX
do AJAX, neste procedimento é acelerar a informação ao usuário de ID existente
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
é criado e executa uma página dinâmica (neste exemplo em PHP) que dados e efetua a busca da identificação digitada numa tabela. Em seguida, a página
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 SPANreviamente criada para receber esta informação:-
2008/2010
Página 5
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 para entender isto).
Esta segunda página usualmente gera uma página resultante que é enviada ao usuário (máquina-cliente).
s é 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
e novamente tentar concluir seu
este procedimento é acelerar a informação ao usuário de ID existente
Com isto, o usuário poderá saber de antemão se o processo de cadastro de um novo usuário irá funcionar.
um ícone animado é exibido, para também poderia ter sido utilizado).
que abre o banco de
, a página retorna um SPAN neste caso o texto Disponível
insere o mesmo dentro de uma área (um SPAN
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
ID já existente
ID não existente Irei explicar mais à frente esta página em detalhes. Vamos verificar agora como funciona o passo. LLaayyoouutt ddoo FFoorrmmuulláárriioo ee UUssoo ddee CCSSSS Ao analisar o código da página web (HTML 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 (posiatravé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 estilpáginas de exemplo disponibilizadas de forma integral no final deste artigo. VVaalliiddaaççããoo ddee CCaammppooss OObbrriiggaattóórriiooss Inseri no formulário algumas indicações visuais de que alguns campos são obrigatórios. Para deixar o Javascript mais simples de ser estudado, decidi não inserir a validação na página.
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
frente esta página em detalhes. Vamos verificar agora como funciona o
Ao analisar o código da página web (HTML - logo abaixo) você notará que utilizei a marca HTML) para delimitar os textos/rótulos que aparecem na frente das caixas de textos (a serem preenchidas
Esta marca e outros elementos (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 existentes no código das páginas de exemplo disponibilizadas de forma integral no final deste artigo.
Inseri no formulário algumas indicações visuais de que alguns campos são obrigatórios. Para deixar o imples de ser estudado, decidi não inserir a validação na página.
2008/2010
Página 6
frente esta página em detalhes. Vamos verificar agora como funciona o processo passo a
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
cionamento, 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
o existentes no código das
Inseri no formulário algumas indicações visuais de que alguns campos são obrigatórios. Para deixar o
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 7
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"
maxlength="50"> <br>
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade" class="campos" size="50"
maxlength="50"> <br>
<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.
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
b. Quando finalizar o processo, exibi
mostrando um SPAN contendo um
identificação informada pel
c. Exibir 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 processo. Isto depende do resultado que vem de Ao se inserir uma imagem logo no início do processo, ela permanecerá sendo exibida durante todo o procedimento até que o desenvolvedorindicação do resultado esperado).
A seguir iremos verificar de que maneira este funcionamento se dará.
Visão Geral do Funcionamento via
Observação: O código Javascript pode
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
Quando finalizar o processo, exibir o resultado obtido da página dinâmica executada,
SPAN contendo um texto que identificará a disponibilidade
informada pelo usuário (Disponível/Indisponível).
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.
um controle de quanto tempo levará para que o objeto
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á.
Funcionamento via AJAX
Observação: O código Javascript pode estar dentro da página HTML ou num arquivo separado.
2008/2010
Página 8
o resultado obtido da página dinâmica executada,
texto que identificará a disponibilidade para uso da
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
objeto AJAX finalize seu
Ao se inserir uma imagem logo no início do processo, ela permanecerá sendo exibida durante todo o (geralmente inserindo uma
página HTML ou num arquivo separado.
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
1) O objeto da caixa de texto de identificação
outro local do formulário).
ChecaUsuario().
2) Dentro da função, o objeto
uma imagem no objeto SPAN
passar ao usuário a impressão de que algo está ocorrendo.
3) O objeto AJAX continua seu trabalho
MYSQL para localização da identificação digitada, no banco de da
Veja o código PHP deste exemplo no final do artigo.
4) A consulta ao banco efetuada
conforme comando SQL executado.
5) A página dinâmica (PHP neste exemplo) retorna
o código HTML de um SPAN que contém
este ID pode ser cadastrado) ou “
ser cadastrado novamente).
6) Uma vez que o objeto AJAX tenha finalizado o recebimento da informação da página PHP, ele
acessar o objeto SPAN inseri
sobrepondo o seu conteúdo anterior (
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
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
da caixa de texto de identificação perde o foco (quando usuário tecla
Ao fazer isto, o evento onBlur da caixa de texto acionará a função
o objeto AJAX é criado. A primeira ação que este objeto executa é a inserção de
SPAN (que está localizado ao lado da caixa de texto de identificação
a impressão de que algo está ocorrendo.
continua seu trabalho executando uma página PHP que irá se
para localização da identificação digitada, no banco de dados.
deste exemplo no final do artigo.
efetuada deverá verificar o número de linhas (tuplas/registros)
conforme comando SQL executado.
neste exemplo) retorna (ao objeto AJAX, que foi quem executou a página)
de um SPAN que contém “disponível” quando o ID não existir (o que significa que
este ID pode ser cadastrado) ou “indisponível” quando o ID já existir (indicando que
ser cadastrado novamente).
Uma vez que o objeto AJAX tenha finalizado o recebimento da informação da página PHP, ele
inserindo dentro dele o código HTML recebido da página 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
2008/2010
Página 9
(quando usuário tecla TAB ou clica em
da caixa de texto acionará a função
este objeto executa é a inserção de
que está localizado ao lado da caixa de texto de identificação) para
que irá se conectar no Servidor
(tuplas/registros) encontrado
que foi quem executou a página)
tir (o que significa que
(indicando que o ID não pode
Uma vez que o objeto AJAX tenha finalizado o recebimento da informação da página PHP, ele irá
da página dinâmica,
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
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
para preencher os demais dados e clicar no cadastro usando o mesmo ID e cadastrado
Revendo o funcionamento
A função (javascript) que cria o objeto AJAX é a Esta função é sempre executada quando seja, quando esta caixa de texto perde o foco ( 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 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çã Vamos entrar agora no detalhe de funcionamento da função AJAX.
EEssttrruuttuurraa ddaa FFuunnççããoo CChh
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
para preencher os demais dados e clicar no botão Cadastrar, um segundo usuário pode ter cadastrado antes do primeiro ter finalizado.
A função (javascript) que cria o objeto AJAX é a ChecaUsuario().
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 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.
Vamos entrar agora no detalhe de funcionamento da função ChecaUsuario() que faz a criação do objeto
hheeccaaUUssuuaarriioo(())
2008/2010
Página 10
pode ter feito um
o usuário sai da caixa de texto de identificação do usuário, ou
Sempre que esta função for executada, ela criará um objeto AJAX que fará um acesso a uma página PHP 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
que faz a criação do objeto
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 11
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. TTeennttaattiivvaa ee EErrrroo ((TTRRYY//CCAATTCCHH)) 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.
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
CCrriiaannddoo oo oobbjjeettoo AAJJAAXX Neste exemplo tentaremos criar o objeto Explorer, Safári e Opera). function ChecaUsuario() {
// PASSO 1 – Tentativa de Criação do objeto AJAXtry
{ objetoAJAX = new XMLHttpRequest() } catch(e1) { try { objetoAJAX } catch(e2) { try { objetoAJAX } catch(e3)
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
Neste exemplo tentaremos criar o objeto AJAX nos navegadores mais conhecidos (Firefox, Internet
Tentativa de Criação do objeto AJAX
= new XMLHttpRequest()
= new ActiveXObject("Msxml2.XMLHTTP")
objetoAJAX = new ActiveXObject("Microsoft.XMLHTTP")
2008/2010
Página 12
nos navegadores mais conhecidos (Firefox, Internet
= new ActiveXObject("Microsoft.XMLHTTP")
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 13
{ 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 { objetoAJAX = new XMLHttpRequest() } 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 {
objetoAJAX = new ActiveXObject("Msxml2.XMLHTTP") } 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.
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 14
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 FFaallhhaa nnaa ccrriiaaççããoo ddoo oobbjjeettoo AAJJAAXX 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
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
Passo 3 – Recuperação da identificação do usuário
Precisamos agora recuperar o que foi digitado na caixa de texto propriedade value deste objeto HTML (Document Object Model):-
} } // Se consegui criar o objeto AJAX if(objetoAJAX) { var objSpan =document.getElementById("aviso") objSpan.innerHTML="<img 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)variável conterá a string “Carlos”.
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
Recuperação da identificação do usuário
o que foi digitado na caixa de texto idUsuario. Para isto, iremos acessar sua deste objeto HTML através da função document.getElementById()
// Se consegui criar o objeto AJAX
var objSpan =document.getElementById("aviso") img src='ajax-loader.gif'>"
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 que será utilizada nesta rotina (Javascript). No exemplo acima, e
2008/2010
Página 15
. Para isto, iremos acessar sua document.getElementById() do DOM
A rotina acima está pegando o valor (value) do objeto idUsuario (do formulário da página HTML) e inserindo . No exemplo acima, esta
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 16
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 objSpan =document.getElementById("aviso") objSpan.innerHTML="<img src='ajax-loader.gif'>" var txtUsuario = document.getElementById("idUsuario").value var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario) ...... ......
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 17
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 txtUsuario = document.getElementById("idUsuario").value var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario) //Abre o Endereço especificado pelo metodo 'GET' objetoAJAX.open("GET", enderecoURL ,true) ...... ......
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 18
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. OO mmaanniippuullaaddoorr oonnrreeaaddyyssttaatteecchhaannggee 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.
//Abre o Endereço especificado pelo metodo 'GET' objetoAJAX.open("GET", enderecoURL ,true)
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. PPrroopprriieeddaaddee rreeaaddyySSttaattee 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
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 19
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.
PPrroopprriieeddaaddee ssttaattuuss 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:- objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText ...... RReeccuuppeerraannddoo oo rreessuullttaaddoo ddoo oobbjjeettoo AAJJAAXX 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
objetoAJAX.onreadystatechange=function() { if (objetoAJAX.readyState==4)
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
{ if (objetoAJAX { var texto= ......
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 programa.
Em seguida inserimos a variável texto no objeto spapropriedade innerHTML, para exibir se a uso pelo usuário.
{ var texto= objetoAJAX.responseText //Exibe o texto no span AVISO objSpan.innerHTML=texto } ......
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
objetoAJAX.status == 200)
var texto= objetoAJAX.responseText ......
do objeto AJAX, armazena o que foi recuperado da página consultada, em
Esta variável irá armazenar o que a página PHP enviou para o objeto AJAX, que neste caso é um comando 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á-
Em seguida inserimos a variável texto no objeto 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
var texto= objetoAJAX.responseText
//Exibe o texto no span AVISO objSpan.innerHTML=texto
2008/2010
Página 20
do objeto AJAX, armazena o que foi recuperado da página consultada, em
Esta variável irá armazenar o que a página PHP enviou para o objeto AJAX, que neste caso é um comando e o texto Disponível ou Indisponível (texto com estilo CSS embutido).
-la posteriormente no
n (criado desde o começo da página) dentro de sua
, neste momento está disponível ou indisponível para
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
� Além da propriedade responseText,a mesma informação recuperada da página consultada, mas em formato XML. neste formato, o retorno da informpretendo cobrir esta propriedade nesta apostila.
Para maiores informações sobre (demais códigos de status), consulte:http://www.w3.org/Protocols/rfc2616/rfc2616 TTrraattaannddoo aa ffaallhhaa 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 200junto com o motivo da falha.
... else { objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText }
...... 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 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 (acessodevemos acionar/executar seu método objeto AJAX. Este método aceita um parâmetro, mas neste caso utilizaremos o valor uma vez que não o utilizaremos.
... else { objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
responseText, o objeto AJAX tem a propriedade responseXMLa mesma informação recuperada da página consultada, mas em formato XML.
o retorno da 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:- 3.org/Protocols/rfc2616/rfc2616-sec10.html
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
diferente de 200 (sucesso). Neste caso, inseri o texto “Falha na localização do ID:
objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText
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.
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
objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText
2008/2010
Página 21
responseXML que contém
a mesma informação recuperada da página consultada, mas em formato XML. Para utilizar o dado ação do PHP teria que ser formatado também em XML. Não
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
Falha na localização do ID:”
objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText
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
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.
à página de consulta), . 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,
objSpan.innerHTML="Falha na localização do ID:" + objetoAJAX.statusText
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
} } } objetoAJAX.send(null)
} } </script> ...... A explicação deste exemplo está finalizadaum snapshot do banco de dados para efetivação dos testes pelo leitor.
TTrraabbaallhhaannddoo ccoomm ddiivveerr
Analise o formulário de pedido a seguir através da ótica de utilização de
Tente identificar quais são as informações que uso de AJAX para a montagem da interface acima. Irei detalhar os tipos de informações existentes nesta interface: Uma possibilidade que existe é a criação de diversos objetos AJAX,página de consulta específica e recebendo dados diferentes. Na página apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:
� Lista (combo) de códigos de produtos existentes
� Nome do produto
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
está finalizada. No final deste artigo segue o código completo destas páginasum snapshot do banco de dados para efetivação dos testes pelo leitor.
rrssooss oobbjjeettooss AAJJAAXX
Analise o formulário de pedido a seguir através da ótica de utilização de AJAX:-
as informações que podem ser recuperadas de um banco de dados através do para a montagem da interface acima.
Irei detalhar os tipos de informações existentes nesta 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:Lista (combo) de códigos de produtos existentes
2008/2010
Página 22
código completo destas páginas e
ser recuperadas de um banco de dados através do
cada um dos quais acionando uma
Na página apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:-
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 23
� 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.
DESENVOLVIMENTO WEB
Versão 4.0b - Prof. Carlos Majer
EExxeemmpplloo –– FFoorrmmuulláárriioo d
Ambiente Web para execução de testes
Sugiro a instalação do WAMP Server (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 tenhapá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:
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),
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
ddee CCaaddaassttrroo
Ambiente Web para execução de testes
Sugiro a instalação do WAMP Server (http://www.wampserver.com/en/) em seu computador. Este ambiente
Servidor Web Apache com o módulo PHP5
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.
Página de cadastro de usuário com o código AJAX inserido
Página que localiza o usuário, em linguagem PHP
Página que grava o usuário no banco, em linguagem PHP
í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:-
Utilize as linhas abaixo (copie e cole no prompt do MYSQL) para gerar o banco deste exemplo:
exemploAjax;
varchar(20),
2008/2010
Página 24
) em seu computador. Este ambiente
Este ambiente irá permitir a execução dos testes utilizando a página em linguagem PHP e a criação do banco 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.
Página de cadastro de usuário com o código AJAX inserido
Página que grava o usuário no banco, em linguagem PHP
Utilize as linhas abaixo (copie e cole no prompt do MYSQL) para gerar o banco deste exemplo:-
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 25
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. PPáággiinnaa CCaaddaassttrraaUUssuuaarriioo..hhttmm <!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;}
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 26
</style>
<script language="javascript">
<!--
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
}
}
}
// Se consegui criar o objeto AJAX
if(objetoAJAX)
{
var objSpan =document.getElementById("aviso")
//objSpan.innerHTML="Checando..."
objSpan.innerHTML="<img src='ajax-loader.gif'>"
var txtUsuario = document.getElementById("idUsuario").value
var enderecoURL =
'localizaUsuario.php?codigo='+escape(txtUsuario)
//Abre o Endereço especificado pelo metodo 'GET'
objetoAJAX.open("GET", enderecoURL ,true)
//Executada quando o navegador obtiver o código
objetoAJAX.onreadystatechange=function()
{
if (objetoAJAX.readyState==4)
// O valor 4 na propriedade readyState significa que o
// objeto já completou/finalizou o recebimento de dados
{
if ( objetoAJAX.status == 200)
{
// 200=resposta do servidor OK - Lê o texto
var texto= objetoAJAX.responseText
//Exibe o texto no span AVISO
objSpan.innerHTML=texto
}
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 27
else
{
objSpan.innerHTML="Falha na localização do
ID:" + objetoAJAX.statusText
}
}
}
// Vamos agora iniciar a execução do objeto AJAX
objetoAJAX.send(null)
}
}
-->
</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"
class="campos" size="50" maxlength="50"> <br>
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade"
class="campos" size="50" maxlength="50"> <br>
<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>
</body>
</html>
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX 2008/2010
Versão 4.0b - Prof. Carlos Majer Página 28
PPáággiinnaa llooccaalliizzaaUUssuuaarriioo..pphhpp <?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();
}
?>
PPáággiinnaa GGrraavvaaUUssuuaarriioo..pphhpp <?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
Versão 4.0b - Prof. Carlos Majer
$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();
}
?>
CCoonncclluussããoo
O uso do Javascript e XML (AJAX) veio para enriquecer a forma pela qual os usuários desenvolvedores o estudo destas mercado e melhorarem a experiência do Dúvidas? Por favor, não envie e-mail. Coloque-as diretamente no BLOG:- WWW.carlosmajer.com.br Carlos Majer.
DESENVOLVIMENTO WEB – INTRODUÇÃO AO AJAX
$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',
idade', '$uf', '$cep')";
$res = mysql_query($comandoSQL ) or die("Erro:" . mysql_error());
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 usuários interagem na interface. Cabe aos
tecnologias para se destacarem no mercado e melhorarem a experiência do usuário nas suas ferramentas.
2008/2010
Página 29
$comandoSQL = "insert into usuarios (idUsuario, senha, nome,
endereco, cidade, uf, cep) values ('$codigo', '$senha', '$nome', '$endereco',
$res = mysql_query($comandoSQL ) or die("Erro:" . mysql_error());
Usuário incluído com sucesso!<br>";
ficar e trazer novas formas de interagem na interface. Cabe aos tecnologias para se destacarem no usuário nas suas ferramentas.
Recommended