AJAX - Tutorial. Anselmo Luiz Éden Battisti, Christiano Julio Pilger de Brito. 18 de agosto de 2006

Transcrição

1 18 de agosto de 2006

2 Agenda 1. Introdução 2. Sincrono X Assíncrono 3. O que é Ajax? 4. Para que Serve? 5. Exemplo 1 - Carregando um Arquivo 6. ajaxinit 7. Métodos e Atributos 8. Exibindo o Resultado 9. Exemplo 2 - Calculadora 10. Exemplo 3a - Alimentação de Select 11. Json 12. Exemplo 3b - Alimentação de Select com Json 13. Sugestão de Conteúdo 14. Conclusão 15. Referências

3 Síncrono X Assíncrono! Síncrono Faz uma solicitação ao servidor; O usuário fica esperando a reposta do servidor; Quando vem a resposta toda a página é recarregada e o conteúdo exibido. Assíncrono Faz uma solicitação ao servidor de forma que o usuário do sistema não tome consciência disto; O usuário continua trabalhando com o sistema; Após o recebimento do conteúdo usa-se Javascript para processar e exibir o resultado na tela.

4 O que é AJAX AJAX (acrónimo em ĺıngua inglesa de Asyncronous Javascript And XML); Um conjunto de Tecnologia Objeto capaz de fazer requisições assíncronas; HTML; JavaScript; XML extensible Markup Language; Json JavaScript Object Notation; DHTML; CSS. AJAX não é somente um modelo, é também uma iniciativa na construção de aplicações web mais dinâmicas.

5 Para que Serve? Criar WEB sites mais dinâmicos; Acelerar o acesso a informação; Diminuir o trafego de informações entre cliente X servidor Produzir aplicações WEB mais semelhantes as Desktop.

6 Tradicional X AJAX

7 1 f u n c t i o n a j a x I n i t ( ) { 2 3 v a r x m l h t t p ; 4 Código Fonte 1: ajaxinit.js 5 t r y { 6 x m l h t t p = new XMLHttpRequest ( ) ; 7 } c a t c h ( ee ) { 8 t r y { 9 x m l h t t p = new A c t i v e X O b j e c t ( " Msxml2. XMLHTTP " ) ; 10 } c a t c h ( e ) { 11 t r y { 12 x m l h t t p = new A c t i v e X O b j e c t ( " Microsoft. XMLHTTP " ) ; 13 } c a t c h (E) { 14 x m l h t t p = f a l s e ; 15 } 16 } 17 } r e t u r n x m l h t t p ; 20 }

8 Exemplo 1 Carrega um arquivo chamado texto.txt Insere seu conteúdo no DIV cujo id é texto

9 Código Fonte 2: Função do Exemplo 1 1 f u n c t i o n c a r r e g a r ( ) { 2 a j a x = a j a x I n i t ( ) ; 3 document. g e t E l e m e n t B y I d ( " texto " ). innerhtml = " Carregando... " ; 4 i f ( a j a x ) { 5 a j a x. open ( GET, http :// / anselmo / ciclo / texto. txt, t r u e ) ; 6 a j a x. o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ) { 7 i f ( a j a x. r e a d y S t a t e == 4) { 8 i f ( a j a x. s t a t u s == 200) { 9 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 ; 10 } 11 } 12 } 13 } 14 a j a x. send ( n u l l ) ; 15 }

10 Métodos e Atributos Métodos open(mode, url, boolean), mode é POST ou GET, url é o endereço, pode ser relativo, o último parâmetro é TRUE para conexão assíncrona e FALSE para conexão síncrona. send() É o método SEND que ativa a conexão e faz a requisição de informações ao documento aberto pelo método OPEN; Atributos status : Status do retorno do html, são os códigos padrões do html 200 ok, 400 no found; responsetext : Retorna a cadeia de caracteres que o servidor enviou; onreadystatechange : Define qual função será chamada para fazer a manipulação dos dados assim que houver um retorno; readystate : Código que diz o status da solicitação 0 (uninitialized); 1 (a carregar); 2 (carregado); 3 (interactivo); 4 (completo).

11 Exibindo os Resultados Para exibir o resultado da consulta pode-se usar dois métodos o innerhtml ou o DOM; innerhtml simplesmente interpreta o texto que vem do servidor como sendo HTML e joga dentro do objeto de destino; DOM (Modelo de Objeto de Documentos) É a definição da estrutura lógica dos documentos e o meio pelo qual um documento é acessado e manipulado

12 Calculadora Nossa calculadora será composta de 2 caixas de texto para a entrada dos valores e uma label para exibição dos resultados, a única operação que ela realiza é a soma; O arquivo PHP que realiza o cálculo da soma é realmente simples, ele pega as duas variáveis v1 e v2 do array $ GET do PHP, soma seus valores e escreve o resultado;

13 Código Fonte 3: Função do Exemplo 2 1 f u n c t i o n c a l c u l a r ( ) { 2 a j a x = a j a x I n i t ( ) ; 3 document. g e t E l e m e n t B y I d ( " resultado " ). innerhtml = " Calculando... " ; 4 i f ( a j a x ) { 5 a j a x. o n r e a d y s t a t e c h a n g e = r e s u l t a d o ; 6 v1 = document. g e t E l e m e n t B y I d ( "v1 " ). v a l u e ; 7 v2 = document. g e t E l e m e n t B y I d ( "v2 " ). v a l u e ; 8 u r l = http :// / anselmo / ciclo / calcular. php? v1= +v1+ & v2= +v2 ; 9 a j a x. open ( GET, u r l, t r u e ) ; 10 a j a x. send ( n u l l ) ; 11 } 12 } f u n c t i o n r e s u l t a d o ( ) { 15 i f ( a j a x. r e a d y S t a t e == 4) { 16 i f ( a j a x. s t a t u s == 200) { 17 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 ; 18 } 19 } 20 }

14 Código Fonte 4: Calculadora PHP 1 <? 2 echo $ GET [ v1 ] + $ GET [ v2 ] ; 3?>

15 Exemplo 3a - Alimentação de Select Um exemplo clássico do preenchimento de um SELECT a partir de outro é a escolha das cidades de um determinado estado. Este recurso é uma das maiores pedras no sapato dos programadores de sistema WEB, pois quando o usuário seleciona o estado toda a página deve ser recarregada, inclusive os valores dos demais campos já preenchidos, para que o SELECT com as cidades seja exibido.

16 Código Fonte 5: Cidades PHP 1 <? 2 h e a d e r ( " Content - Type : text / html ; charset =iso " ) ; 3 4 $ e s t a d o = $ GET [ estado ] ; 5 $ c i d a d e s = "" ; 6 i f ( $ e s t a d o=="pr " ) { 7 $ c i d a d e s.= "<option value =\"1\" > Tup~assi </ option >" ; 8 $ c i d a d e s.= "<option value =\"2\" > Toledo </ option >" ; 9 $ c i d a d e s.= "<option value =\"3\" > Cascavel </ option >" ; 10 $ c i d a d e s.= "<option value =\"4\" > Pato Branco </ option >" ; 11 } i f ( $ e s t a d o=="sp " ) { 14 $ c i d a d e s.= "<option value =\"5\" > Mogi </ option >" ; 15 $ c i d a d e s.= "<option value =\"6\" > Palmeiras </ option >" ; 16 $ c i d a d e s.= "<option value =\"7\" > Santos </ option >" ; 17 } echo $ c i d a d e s ; 20?>

17 Código Fonte 6: Função do Exemplo 3 1 f u n c t i o n s e l e c i o n a C i d a d e ( e s t a d o ) { 2 a j a x = a j a x I n i t ( ) ; 3 i f ( a j a x ) { 4 a j a x. o n r e a d y s t a t e c h a n g e = e s c r e v e C i d a d e s ; 5 u r l = http :// / anselmo / ciclo / cidades. php? estado = +e s t a d o ; 6 a j a x. open ( GET, u r l, t r u e ) ; 7 a j a x. send ( n u l l ) ; 8 } 9 } f u n c t i o n e s c r e v e C i d a d e s ( ) { 12 i f ( a j a x. r e a d y S t a t e == 4) { 13 i f ( a j a x. s t a t u s == 200) { 14 document. g e t E l e m e n t B y I d ( " cidade " ). innerhtml = a j a x. r e s p o n s e T e x t ; 15 } 16 } 17 } < s e l e c t name=" estado " i d=" estado " onchange="if ( this. options [ this. selectedindex ]. value ){ selecionacidade ( this. options [ this. selectedindex ]. value )}">

18 Json JSON JavaScript Object Notation

19 Código Fonte 7: Cidades PHP 1 <? 2 h e a d e r ( " Content - Type : text / html ; charset =iso " ) ; 3 4 $ e s t a d o = $ GET [ estado ] ; 5 $ c i d a d e s = "{ cidades :[" ; 6 i f ( $ e s t a d o=="pr " ) { 7 $ c i d a d e s.= "{ cdg : 1, nm : Tup~assi }, 8 { cdg : 2, nm : Toledo }, 9 { cdg : 3, nm : Cascavel }, 10 { cdg : 4, nm : Pato Branco }]}" ; 11 } i f ( $ e s t a d o=="sp " ) { 14 $ c i d a d e s.= "{ cdg : 5, nm : Mogi }, 15 { cdg : 6, nm : Palmeiras }, 16 { cdg : 7, nm : Santos }]}" ; 17 } echo $ c i d a d e s ; 20?>

20 Código Fonte 8: Função que Chama as Cidades 1 f u n c t i o n s e l e c i o n a C i d a d e J s o n ( e s t a d o ) { 2 a j a x = a j a x I n i t ( ) ; 3 i f ( a j a x ) { 4 a j a x. o n r e a d y s t a t e c h a n g e = e s c r e v e C i d a d e s J s o n ; 5 u r l = http :// / anselmo / ciclo / cidadesjson. php? estado = +e s t a d o ; 6 a j a x. open ( GET, u r l, t r u e ) ; 7 a j a x. send ( n u l l ) ; 8 } 9 }

21 Código Fonte 9: Função que Exibe o Resultado 1 f u n c t i o n e s c r e v e C i d a d e s J s o n ( ) { 2 i f ( a j a x. r e a d y S t a t e == 4) { 3 i f ( a j a x. s t a t u s == 200) { 4 v a r x = 0 ; 5 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+")" ) ; 6 l i m p a r D e s t i n o ( " cidade2 " ) ; 7 f o r ( x =0;x<=j s o n. c i d a d e s. l e n g t h ; x++){ 8 o p t i o n = document. c r e a t e E l e m e n t ( " option " ) ; 9 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 ) ; 10 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) ) ; 11 document. g e t E l e m e n t B y I d ( document. c r e a tetextnode ( j s o n. c i d a d e s [ x ]. nm) ) ; 12 document. g e t E l e m e n t B y I d ( " cidade2 " ). a p p e n d C h i l d ( o p t i o n ) ; 13 } 14 } 15 } 16 }

22 Código Fonte 10: Função que Remove Tods os elementos 1 / 2 Remove t o d o s os e l e m e n t o s f i l h o s de um e l emento 3 / 4 f u n c t i o n l i m p a r D e s t i n o ( d e s t i n o ) { 5 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 ) ; 6 w h i l e ( o b j. f i r s t C h i l d ) 7 o b j. r e m o v e C h i l d ( o b j. f i r s t C h i l d ) ; 8 }

23 Código Fonte 11: Função para conectar ao banco de dados 1 <?php 2 # FileName=" Connection_php_mysql. htm " 3 # Type=" MYSQL " 4 # HTTP=" true " 5 $hostname conexao = " localhost " ; 6 $ d a t a b a s e c o n e x a o = " test " ; 7 $username conexao = " aluno " ; 8 $ p a s s w o r d c o n e x a o = " aluno " ; 9 $conexao = m y s q l p c o n n e c t ( $hostname conexao, $username conexao, $ p a s s w o r d c o n e x a o ) o r d i e ( m y s q l e r r o r ( ) ) ; 10 m y s q l s e l e c t d b ( $ d a t a b a s e c o n e x a o, $conexao ) ; 11?>

24 Código Fonte 12: Auto Completar Usando Banco de Dados 1 <? 2 i n c l u d e ( " conexao. php " ) ; 3 4 $ s e a r c h = $ GET [ s ] ; 5 6 $ s q l= " SELECT * FROM municipio WHERE mnc_descricao like ". $ s e a r c h. "% " ; 7 8 $ c o n s u l t a = m y s q l q u e r y ( $ s q l, $conexao ) ; 9 $ l i n h a s = m y s q l f e t c h a r r a y ( $ c o n s u l t a ) ; $ r e s = "{ pal :[" ; 12 do { 13 $ r e s.= " ". s t r r e p l a c e ( " ", " ", $ l i n h a s [ mnc_descricao ] ). "," ; 14 } w h i l e ( $ l i n h a s = m y s q l f e t c h a r r a y ( $ c o n s u l t a ) ) ; $ r e s = s u b s t r ( $ r e s, 0, ( s t r l e n ( $ r e s ) 1) ) ; 17 $ r e s.= "]} " ; 18 echo $ r e s ; 19?>

25 Vantágens Como a modificação das informações da tela são parciais uma grande quantidade de informações deixa de trafegar inultimente pela rede; O servidor que roda a aplicação fica menor carregado pois existe uma divisão de tarefas com o cliente; AJAX não é uma tecnologia por isto não é necessário pagar para a utilizar.

26 Problemas AJAX não é a solução milagrosa para todos os males e se usado de forma inadequada pode piorar uma situação que já era feia; Os Navegadores usam diferentes métodos por isso temos que estar atentos Os Navegador em geral não suporta uma carga muito pesada de scripts; Os botão voltar, avança e histórico não funcionam muito bem com AJAX.

27 Referências Artigo muito bom sobre AJAX Não use innerhtml alternatives/#intro Página oficial do Json DHTML dhtml.html Material sobre Css DOM XHTML e HTML