Apostila Básica de AJAX - Carlos Majer

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 [email protected] ou [email protected] ou [email protected] 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



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


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


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


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:


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


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.


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



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

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

<fieldset>

<legend>Dados do Usuário</legend>

<label for="idUsuario" class="obrigatorio">Identificação*:</label>

<input type="text" name="idUsuario" id="idUsuario" class="campos" size="20"

maxlength="20" onblur="ChecaUsuario()">

<span id="aviso"></span ><br>

<label for="senha" class="obrigatorio">Senha*:</label>

<input type="password" name="senha" id="senha" class="campos" size="20"

maxlength="20"> <br>

<label for="nome" class="obrigatorio">Nome*:</label>

<input type="text" name="nome" id="nome" class="campos" size="50" maxlength="50">

<br>

<label for="endereco">Endereço:</label>

<input type="text" name="endereco" id="endereco" class="campos" size="50"


<label for="cidade">Cidade:</label>

<input type="text" name="cidade" id="cidade" class="campos" size="50"


<label for="uf">Estado:</label>

<input type="text" name="uf" id="uf" class="campos" size="3" maxlength="2"> <br>

<label for="cep">CEP:</label>

<input type="text" name="cep" id="cep" class="campos" size="9" maxlength="9"> <br>

<label><input type="submit" value="Cadastrar"></label><br>

* = Preenchimento obrigatório!

</fieldset>

</form>

Perceba que:-

1) O evento onBlur (que é acionado quando um objeto perde o foco) da caixa de texto idUsuario está

sendo interceptado e redirecionado para uma função Javascript,de nome ChecaUsuario() (a ser

criada). Isto fará com que toda vez que se sair deste objeto, a função ChecaUsuario() será

executada. Dentro dela será criado e executado o objeto AJAX.

2) Um elemento do tipo SPAN foi criado, sem nenhum conteúdo. Este elemento será utilizado pelo

objeto AJAX para:-

a. Assim que ser executado, irá armazenar uma imagem (gif animada) que dará a impressão

ao usuário de que algo está ocorrendo (neste caso, a verificação do id do usuário). O

desenvolvedor poderá trocar esta imagem pelo texto Carregando..., ou colocar outra

imagem, caso prefira.

DESENVOLVIMENTO WEB


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


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


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


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


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


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



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


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)


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")



{ 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.



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


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”.


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



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) ...... ......



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) ...... ......



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



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


{ 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 } ......


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


� 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


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


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:”


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,


DESENVOLVIMENTO WEB


} } } 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


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:-



� 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


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),


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:-



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;}



</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>



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


$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.


$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 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




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.

Documents

Apostila Básica de AJAX - Carlos Majer