53-Desenvolvendo Aplicacoes Web em Ajax PDF

2007 Er Galvo Abbott - http://www.galvao.eti.
br/
Aplicaes Web com AJAX
v. 2.1 - Setembro/2007

2007 Er Galvo Abbott - http://www.galvao.eti.br/
Objetivo:
Esta apresentao tem por objetivo apresentar a tecnologia
AJAX, realizando uma breve explanao sobre os conceitos
envolvidos em sua utilizao.
Como case, trataremos de um uso comum mas extremamente
ltil desta tecnologia: a interao entre elementos de formulrio,
mais precisamente entre uma caixa de seleo de estados e outra
de cidades.

Preparativos:
Primeiramente criaremos um formulrio HTML com duas
caixas de seleo: uma de estados e outra de cidades. Depois
criaremos um gatilho que ir disparar nossa funo AJAX.
<select name='estados' onChange='buscaCidades();'>
Que, por sua vez agir sobre a caixa de seleo de cidades, que
originalmente ter apenas uma opo:
<select name='cidades'>
<option value='x' selected>Aguardando seleo de estado</option>
</select>
Para isto utilizaremos o evento onChange da caixa de seleo
de estados:

1. O que AJAX:
A J
A
nd
X
synchronous avaScript
ML
ou "JavaScript Assncrono e XML. AJAX no uma
nova linguagem, mas apenas a utilizao de duas
caractersticas mais recentes da linguagem JavaScript:
1) A possibilidade de trabalhar com requisies HTTP
2) A habilidade de trabalhar com documentos XML
combinadas com uma terceira que j velha conhecida
dos desenvolvedores: a manipulao direta do DOM HTML.

Requisies HTTP
So as requisies feitas para um servidor web.
Um exemplo simples de uma requisio HTTP quando voc
est navegando em um website. Cada clique em um hiperlink
dispara uma requisio para o servidor:
Requisio HTTP
Usurio / Cliente Provedor / Servidor
Retorno (HTML)

Documentos XML
So documentos criados na linguagem de marcao XML, que
permite a descrio e armazenamento de informaes.

<?xml version=1.0 encoding=iso-8859-1?>
<cidades>
<cidade>
<codigo>1</codigo>
<nome>Porto Alegre</nome>
</cidade>
<cidade>
<codigo>2</codigo>
<nome>Canoas</nome>
</cidade>
</cidades>
Vejamos um exemplo simplificado do arquivo XML que
utilizaremos:

2. Trabalhando com a requisio
Quando trabalhamos com uma requisio HTTP devemos ter
em mente os seguintes passos:
! Criao da requisio"
# ! $e%inio de u&a %uno que tratar'
a resposta desta requisio"
( ! A)ertura da requisio"
* ! $e%inio do tipo de conte+do da requisio"
, ! -nvio da requisio.

Criando uma requisio HTTP
Uma requisio HTTP um objeto que criado de acordo com
o navegador onde a aplicao ir rodar:
http_request = new ActiveXObject("Msxml2.XMLHTTP"); // IE 6+
http_request = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.5-
http_request = new XMLHttpRequest();

Definindo a funo de tratamento da resposta
Neste passo definimos uma funo que ser responsvel por
tratar a resposta de nossa requisio, ou seja, esta funo ser o
passo final de nossa aplicao.
1. O Estado da requisio (readyState): Uma requisio HTTP
passa pelos seguintes estados:
0 - No inicializada
1 - Carregando
2 - Carregada
3 - Processando
4 - Pronta
Para que esta funo possa desempenhar seu papel dois fatores
precisam ser checados:
2. O cdigo de Status HTTP retornado pelo servidor (status):
Caso este cdigo seja 200 (HTTP OK) tudo correu bem. Qualquer
outro cdigo pode significar um erro retornado pelo servidor.

Definindo a funo de tratamento da resposta (cont.)
A definio da funo feita atravs do atributo
onreadystatechange do objeto da requisio. Veremos aqui
como definir uma funo "on-the-fly:
http_request.onreadystatechange = function (
!
if (http_request.ready"tate == # !
if (http_request.status == $%% !
&& '(digo
) else !
alert (*+ ser,idor retornou um erro.-.
)
)
)

Abrindo a requisio
A abertura da requisio feita atravs do mtodo open.
Este mtodo aceita 3 parmetros:
1 - A forma de envio dos dados: GET ou POST
2 - A URL do script server-side
3 - Se esta requisio ser assncrona
Vejamos o exemplo:
http_request.open('GET', 'http://localhost/script.php?iduf=' +
document.forms[0].estados.value, true);

Definindo o tipo de contedo da requisio
Utilizando o mtodo setRequestHeader, definiremos o tipo
de contedo que est sendo enviado por nossa requisio.
Como utilizaremos um formulrio para envi-la, precisamos
definir um tipo especial de contedo:
http_request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');

Enviando a requisio
Para finalmente enviarmos a requisio usamos o mtodo send.
Como estamos trabalhando com o mtodo de envio GET, no
enviaremos dados, mas apenas o valor especial nu//.
Os dados, quando utilizamos este mtodo, so enviados atravs
de um query string na prpria URL, como vimos no mtdo open.
http_request.send(null);

3. Retornando XML
Veremos agora como gerar um retorno em XML atravs de um
script server-side programado em PHP.
Esta a lgica que seguiremos:
1 - Criamos uma varivel que guardar o cdigo XML
2 - Testamos se o 'id' recebido o que esperamos
3 - Em caso positivo alimentamos nossa varivel com mais XML
4 - Definimos novamente um tipo de contedo, desta vez
referente ao retorno de nosso script.
5 - Damos sada direta no cdigo XML, que ser posteriormente
capturado por nossa funo de tratamento em JavaScript.

Retornando XML (cont.)
<?php
$retorno = '<?xml version="1.0" encoding="iso-8859-1"?>';
$retorno .= '<cidades>';
if ($_GET['iduf'] == 1) {
$retorno .= <<<FIM
<cidade>
<codigo>1</codigo>
<nome>Porto Alegre</nome>
</cidade>
<cidade>
<codigo>2</codigo>
<nome>Canoas</nome>
</cidade>
FIM;
}
$retorno .= '</cidades>';
header('Content-type: application/xml; charset=iso-8859-1');
echo $retorno;
?>
Aplicada em cdigo, nossa lgica resultar no seguinte:

4. O Grand Finale: JavaScript + XML + DOM
A primeira coisa que faremos "zerar a combobox de cidades, de
forma evitar que ela seja repetidamente populada. Feito isto,
trataremos o XML retornado.
Isto ser feito acessando-se o atributo responseXML de nossa
requisio. Utilizando este atributo realizaremos uma manipulao
do DOM de forma realizar quatro etapas:
1 - Utilizando o mtodo DOM get-/e&ents0yTag1a&e iremos
capturar cada cidade presente no retorno XML.
2 - Para cada uma destas cidades capturaremos os elementos
'codigo' e 'nome', utilizando o mesmo mtodo DOM.
3 - Atravs do mtodo DOM create-/e&ent, criaremos
dinamicamente opes (options de formulrio).
4 - Adicionaremos, com o mtodo add, estas opes
ao combobox de cidades.

O Grand Finale: JavaScript + XML + DOM (cont.)
O cdigo a seguir deve ser colocado no lugar indicado em nossa
funo de tratamento de retorno:
document.forms[0].cidades.options.length = 1;
retorno = http_request.responseXML;
cidades = retorno.getElementsByTagName('cidade');
for (x = 0; x < cidades.length; x++) {
codigo = cidades[x].getElementsByTagName('codigo');
descricao = cidades[x].getElementsByTagName('nome');

novaOp = document.createElement('option');

novaOp.value = codigo[0].firstChild.nodeValue;
novaOp.text = descricao[0].firstChild.nodeValue;

document.forms[0].cidades.options.add(novaOp);
}

Como fica o cdigo HTML / JavaScript Final:
/html0
/head0
/script type=-te1t&2a,ascript-0
,ar http_request.
function busca'idades(
!
http_request = ne3 X456ttp7equest(.
http_request.onreadystatechange = function (
!
if (http_request.ready"tate == # !
if (http_request.status == $%% !
document.forms8%9.cidades.options.length = :.
retorno = http_request.responseX45.
cidades = retorno.get;lements<y=ag>ame(?cidade?.
for (1 = %. 1 / cidades.length. 1@@ !
codigo = cidades819.get;lements<y=ag>ame(?codigo?.
descricao = cidades819.get;lements<y=ag>ame(?nome?.

no,a+p = document.create;lement(?option?.

no,a+p.,alue = codigo8%9.first'hild.nodeAalue.
no,a+p.te1t = descricao8%9.first'hild.nodeAalue.

document.forms8%9.cidades.options.add(no,a+p.
)

Como fica o cdigo HTML / JavaScript Final (cont.)
) else !
alert(*BossC,el erro na requisiDo-.
)
)
)
http_request.open(?E;=?F ?httpG&&localhost&script.phpHiduf=? @
document.forms8%9.estados.,alueF true.
http_request.set7equest6eader(?'ontentI=ype?F
?application&1I333IformIurlencoded?.
http_request.send(null.
)
/&script0
/&head0
/body0
/form0
;stadoG
/select name=?estados? on'hange=?busca'idades(.?0
/option ,alue=-%-0"elecioneG/&option0
/option ,alue=-:-07"/&option0
/&select0/br &0
'idadeG
/select name=-cidades?0
/option ,alue=?1? selected0Aguardando seleDo de estado/&option0
/&select0
/&form0

Como fica o cdigo HTML / JavaScript Final (cont.)
/&body0
/&html0

Sobre o autor:
Er Galvo Abbott trabalha h mais de dez anos com
programao de websites e sistemas corporativos com
interface web.
Autodidata, teve seu primeiro contato com a linguagem HTML
em 1995, quando a internet estreava no Brasil.
Alm de lecionar em cursos, escrever artigos e ministrar
palestras, tem se dedicado ao desenvolvimento de aplicaes
web, tendo nas linguagens PHP, Perl e JavaScript suas principais
paixes.
o fundador e lder do UG PHP RS, alm de trabalhar como
consultor e desenvolvedor para uma empresa norte-americana
da rea de segurana.

Contatos:
Contatos com o autor:
Web:
http://www.galvao.eti.br
http://blog.galvao.eti.br/
http://www.phprs.com.br
E-mail:
galvao@galvao.eti.br
IM:
ergalvao@hotmail.com (MSN)
er.galvao@gmail.com (GoogleTalk)

53-Desenvolvendo Aplicacoes Web em Ajax PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

53-Desenvolvendo Aplicacoes Web em Ajax PDF

Enviado por

Direitos autorais:

Formatos disponíveis

2007 Er Galvo Abbott - http://www.galvao.eti.

Você também pode gostar