Escolar Documentos
Profissional Documentos
Cultura Documentos
Tutorial de Ajax
Tutorial de Ajax
18 de agosto de 2006
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
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.
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.
AJAX - Tutorial
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.
AJAX - Tutorial
Tradicional X AJAX
http://adaptivepath.com/images/publications/essays/ajaxg1.png http://adaptivepath.com/images/publications/essays/ajaxg2.png
AJAX - Tutorial
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 ; }
AJAX - Tutorial
Exemplo 1
Carrega um arquivo chamado texto.txt Insere seu conte udo no DIV cujo id e texto
AJAX - Tutorial
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 ) ; }
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
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
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.
AJAX - Tutorial
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
AJAX - Tutorial
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.
AJAX - Tutorial
<? 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 ; ?>
AJAX - Tutorial
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
Json
AJAX - Tutorial
<? 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 ; ?>
AJAX - Tutorial
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 ) ; } }
AJAX - Tutorial
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 ) ; } } } }
AJAX - Tutorial
/ 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 ) ; }
AJAX - Tutorial
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 ) ; ?>
AJAX - Tutorial
<? 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 ; ?>
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.
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.
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
AJAX - Tutorial