AJAX - Tutorial

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

18 de agosto de 2006

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Agenda
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Introdu c ao Sincrono X Ass ncrono O que e Ajax? Para que Serve? Exemplo 1 - Carregando um Arquivo ajaxInit M etodos e Atributos Exibindo o Resultado Exemplo 2 - Calculadora Exemplo 3a - Alimenta c ao de Select Json Exemplo 3b - Alimenta c ao de Select com Json Sugest ao de Conte udo Conclus ao Refer encias
AJAX - Tutorial

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

S ncrono X Ass ncrono!

S ncrono
Faz uma solicita c ao ao servidor; O usu ario ca esperando a reposta do servidor; Quando vem a resposta toda a p agina e recarregada e o conte udo exibido.

Ass ncrono
Faz uma solicita c ao ao servidor de forma que o usu ario do sistema n ao tome consci encia disto; O usu ario continua trabalhando com o sistema; Ap os o recebimento do conte udo usa-se Javascript para processar e exibir o resultado na tela.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

O que e AJAX

AJAX (acr onimo em l ngua inglesa de Asyncronous Javascript And XML); Um conjunto de Tecnologia
Objeto capaz de fazer requisi c oes ass ncronas; HTML; JavaScript ; XML eXtensible Markup Language ; Json JavaScript Object Notation; DHTML; CSS.

AJAX n ao e somente um modelo, e tamb em uma iniciativa na constru c ao de aplica c oes web mais din amicas.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Para que Serve?

Criar WEB sites mais din amicos; Acelerar o acesso a informa c ao; Diminuir o trafego de informa c oes entre cliente X servidor Produzir aplica c oes WEB mais semelhantes as Desktop.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Tradicional X AJAX

http://adaptivepath.com/images/publications/essays/ajaxg1.png http://adaptivepath.com/images/publications/essays/ajaxg2.png

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 1: ajaxInit.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function

a j a x I n i t () {

var xmlhttp ; try { x m l h t t p = new XMLHttpRequest ( ) ; } catch ( ee ) { try { x m l h t t p = new A c t i v e X O b j e c t ( " Msxml2 . XMLHTTP " ) ; } catch ( e ) { try { x m l h t t p = new A c t i v e X O b j e c t ( " Microsoft . XMLHTTP " ) ; } catch (E) { xmlhttp = f a l s e ; } } } return xmlhttp ; }

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Exemplo 1

Carrega um arquivo chamado texto.txt Insere seu conte udo no DIV cujo id e texto

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 2: Fun c ao do Exemplo 1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function carregar () { ajax = a j a x I n i t () ; document . g e t E l e m e n t B y I d ( " texto " ) . innerHTML = " Carregando ... " ; i f ( ajax ) { a j a x . open ( GET , http : / / 2 0 0 . 2 0 1 . 81 . 3 8 / anselmo / ciclo / texto . txt , t r u e ) ; ajax . onreadystatechange = function () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { document . g e t E l e m e n t B y I d ( " texto " ) . innerHTML = a j a x . r e s p o n s e T e x t ; } } } } a j a x . send ( n u l l ) ; }

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

M etodos e Atributos
M etodos
open(mode, url, boolean), mode e POST ou GET, url eo endere co, pode ser relativo, o u ltimo par ametro e TRUE para conex ao ass ncrona e FALSE para conex ao s ncrona. o m send() E etodo SEND que ativa a conex ao e faz a requisi c ao de informa c oes ao documento aberto pelo m etodo OPEN;

Atributos
status : Status do retorno do html, s ao os c odigos padr oes do html 200 ok, 400 no found; responseText : Retorna a cadeia de caracteres que o servidor enviou; onreadystatechange : Dene qual fun c ao ser a chamada para fazer a manipula c ao dos dados assim que houver um retorno; readyState : C odigo que diz o status da solicita c ao
0 1 2 3 4 (uninitialized); (a carregar); (carregado); (interactivo); (completo).
AJAX - Tutorial

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

Exibindo os Resultados

Para exibir o resultado da consulta pode-se usar dois m etodos o innerHTML ou o DOM; innerHTML simplesmente interpreta o texto que vem do servidor como sendo HTML e joga dentro do objeto de destino; a deni DOM (Modelo de Objeto de Documentos) E c ao da estrutura l ogica dos documentos e o meio pelo qual um documento e acessado e manipulado

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Calculadora

Nossa calculadora ser a composta de 2 caixas de texto para a entrada dos valores e uma label para exibi c ao dos resultados, au nica opera c ao que ela realiza e a soma; O arquivo PHP que realiza o c alculo da soma e realmente simples, ele pega as duas vari aveis v1 e v2 do array $ GET do PHP, soma seus valores e escreve o resultado; http://200.201.81.38/anselmo/ciclo/exemplo2.html.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 3: Fun c ao do Exemplo 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function calcular () { ajax = a j a x I n i t () ; document . g e t E l e m e n t B y I d ( " resultado " ) . innerHTML = " Calculando ... " ; i f ( ajax ) { ajax . onreadystatechange = resultado ; v1 = document . g e t E l e m e n t B y I d ( " v1 " ) . v a l u e ; v2 = document . g e t E l e m e n t B y I d ( " v2 " ) . v a l u e ; u r l = http : / / 2 0 0 . 2 0 1 . 8 1 . 3 8 / anselmo / ciclo / calcular . php ? v1 = +v1+& v2 = +v2 ; a j a x . open ( GET , u r l , t r u e ) ; a j a x . send ( n u l l ) ; } } function resultado () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { document . g e t E l e m e n t B y I d ( " resultado " ) . innerHTML = a j a x . r e s p o n s e T e x t ; } } }
AJAX - Tutorial

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

C odigo Fonte 4: Calculadora PHP

1 2 3

<? e c h o $ GET [ v1 ] + $ GET [ v2 ] ; ?>

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Exemplo 3a - Alimenta c ao de Select

Um exemplo cl assico do preenchimento de um SELECT a partir de outro e a escolha das cidades de um determinado estado. Este recurso e uma das maiores pedras no sapato dos programadores de sistema WEB, pois quando o usu ario seleciona o estado toda a p agina deve ser recarregada, inclusive os valores dos demais campos j a preenchidos, para que o SELECT com as cidades seja exibido.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 5: Cidades PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<? h e a d e r ( " Content - Type : text / html ; charset = iso -8859 -1 " ) ; $ e s t a d o = $ GET [ estado ] ; $ c i d a d e s = "" ; i f ( $ e s t a d o==" pr " ) { $ c i d a d e s .= " < option value =\"1\" > Tup~ a ssi </ option > " ; $ c i d a d e s .= " < option value =\"2\" > Toledo </ option > " ; $ c i d a d e s .= " < option value =\"3\" > Cascavel </ option > " ; $ c i d a d e s .= " < option value =\"4\" > Pato Branco </ option > " ; } i f ( $ e s t a d o==" sp " ) { $ c i d a d e s .= " < option value =\"5\" > Mogi </ option > " ; $ c i d a d e s .= " < option value =\"6\" > Palmeiras </ option > " ; $ c i d a d e s .= " < option value =\"7\" > Santos </ option > " ; } echo $ c i d a d e s ; ?>

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 6: Fun c ao do Exemplo 3

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function selecionaCidade ( estado ) { ajax = a j a x I n i t () ; i f ( ajax ) { ajax . onreadystatechange = escreveCidades ; u r l = http : / / 2 0 0 . 2 0 1 . 8 1 . 3 8 / anselmo / ciclo / cidades . php ? estado = +e s t a d o ; a j a x . open ( GET , u r l , t r u e ) ; a j a x . send ( n u l l ) ; } } function escreveCidades () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { document . g e t E l e m e n t B y I d ( " cidade " ) . innerHTML = ajax . responseText ; } } } < s e l e c t name=" estado " i d=" estado " onChange=" if ( this . options [ this . selectedIndex ]. value ) { s e l ec i o n a C id ad e ( this . options [ this . selectedIndex ]. value ) } ">
AJAX - Tutorial

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

Json

JSON JavaScript Object Notation http://www.json.org/

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 7: Cidades PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<? h e a d e r ( " Content - Type : text / html ; charset = iso -8859 -1 " ) ; $ e s t a d o = $ GET [ estado ] ; $ c i d a d e s = " { cidades :[ " ; i f ( $ e s t a d o==" pr " ) { $ c i d a d e s .= " { cdg : 1 , nm : Tup~ a ssi } , { cdg : 2 , nm : Toledo } , { cdg : 3 , nm : Cascavel } , { cdg : 4 , nm : Pato Branco }]} " ; } i f ( $ e s t a d o==" sp " ) { $ c i d a d e s .= " { cdg : 5 , nm : Mogi } , { cdg : 6 , nm : Palmeiras } , { cdg : 7 , nm : Santos }]} " ; } echo $ c i d a d e s ; ?>

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 8: Fun c ao que Chama as Cidades

1 2 3 4 5 6 7 8 9

function selecionaCidadeJson ( estado ) { ajax = a j a x I n i t () ; i f ( ajax ) { ajax . onreadystatechange = escreveCidadesJson ; u r l = http : / / 2 0 0 . 2 0 1 . 8 1 . 3 8 / anselmo / ciclo / cidadesJson . php ? estado = +e s t a d o ; a j a x . open ( GET , u r l , t r u e ) ; a j a x . send ( n u l l ) ; } }

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 9: Fun c ao que Exibe o Resultado

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function escreveCidadesJson () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { var x = 0; v a r j s o n = e v a l ( " ( "+a j a x . r e s p o n s e T e x t+" ) " ) ; l i m p a r D e s t i n o ( " cidade2 " ) ; f o r ( x =0; x<=j s o n . c i d a d e s . l e n g t h ; x++){ o p t i o n = document . c r e a t e E l e m e n t ( " option " ) ; o p t i o n . s e t A t t r i b u t e ( " value " , j s o n . c i d a d e s [ x ] . cdg ) ; o p t i o n . a p p e n d C h i l d ( document . c r e a t e T e x t N o d e ( j s o n . c i d a d e s [ x ] . nm) ) ; document . g e t E l e m e n t B y I d ( document . c r e a t e T e x t N o d e ( j s o n . c i d a d e s [ x ] . nm) ) ; document . g e t E l e m e n t B y I d ( " cidade2 " ) . appendChild ( option ) ; } } } }

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 10: Fun c ao que Remove Tods os elementos

1 2 3 4 5 6 7 8

/ Remove t o d o s o s e l e m e n t o s f i l h o s de um e l e m e n t o / function limparDestino ( destino ) { o b j = document . g e t E l e m e n t B y I d ( d e s t i n o ) ; while ( obj . f i r s t C h i l d ) obj . removeChild ( obj . f i r s t C h i l d ) ; }

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 11: Fun c ao para conectar ao banco de dados

1 2 3 4 5 6 7 8 9

10 11

<?php # F i l e N a m e=" C o n n e c t i o n _ p h p _ m y s q l . htm " # Type=" MYSQL " # HTTP=" true " $ h o s t n a m e c o n e x a o = " localhost " ; $ d a t a b a s e c o n e x a o = " test " ; $ u s e r n a m e c o n e x a o = " aluno " ; $ p a s s w o r d c o n e x a o = " aluno " ; $conexao = mysql pconnect ( $hostname conexao , $username conexao , $password conexao ) or d i e ( m y s q l e r r o r () ) ; m y s q l s e l e c t d b ( $database conexao , $conexao ) ; ?>

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C odigo Fonte 12: Auto Completar Usando Banco de Dados

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<? i n c l u d e ( " conexao . php " ) ; $ s e a r c h = $ GET [ s ] ; $ s q l= " SELECT * FROM municipio WHERE mnc_descricao like " . $ s e a r c h . "%" ; $ c o n s u l t a = mysql query ( $sql , $conexao ) ; $linhas = mysql fetch array ( $consulta ) ; $ r e s = " { pal :[ " ; do { $ r e s .= " " . s t r r e p l a c e ( " " , " " , $ l i n h a s [ mnc_descricao ] ) . " ," ; } while ( $linhas = mysql fetch array ( $consulta ) ) ; $ r e s = s u b s t r ( $ r e s , 0 , ( s t r l e n ( $ r e s ) 1) ) ; $ r e s .= " ]} " ; echo $ r e s ; ?>

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Vant agens

Como a modica c ao das informa c oes da tela s ao parciais uma grande quantidade de informa c oes deixa de trafegar inultimente pela rede; O servidor que roda a aplica c ao ca menor carregado pois existe uma divis ao de tarefas com o cliente; AJAX n ao e uma tecnologia por isto n ao e necess ario pagar para a utilizar.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Problemas

AJAX n ao e a solu c ao milagrosa para todos os males e se usado de forma inadequada pode piorar uma situa c ao que j a era feia; Os Navegadores usam diferentes m etodos por isso temos que estar atentos Os Navegador em geral n ao suporta uma carga muito pesada de scripts ; Os bot ao voltar, avan ca e hist orico n ao funcionam muito bem com AJAX.

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Refer encias
Artigo muito bom sobre AJAX http://adaptivepath.com/publications/essays/archives/000385.php N ao use innerHTML http://slayeroce.com/articles/innerHTML alternatives/#intro P agina ocial do Json http://www.json.org/ DHTML http://www.quirksmode.org/js/cross dhtml.html Material sobre Css http://www.maujor.com DOM XHTML e HTML http://www.amtechs.com/w3c/introduction.html

Anselmo Luiz Eden Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial