Web 2.0 com Ajax: JQuery/PHP

Treinamento ministrado para turma iniciante em 2011

Aula 05

Transcript

1. Aula 05 Wagner Silva
2. Agenda  Manipulando a exibição de objetos  Customizando animações com CSS  Enfileirando animações  Aplicação de Delay  Ajax  Revisão: PHP e XMLHttpRequest  Conexões Síncronas e Assíncronas Wagner Silva # Web 2.0 com Ajax Aula 05
3. Manipulando a Exibição  seleção.fadeIn(tempo,função)  $(“div”).fadeIn(2000) Wagner Silva # Web 2.0 com Ajax Aula 05
4. Manipulando a Exibição  seleção.show(tempo,função)  $(“div”).show(2000) Wagner Silva # Web 2.0 com Ajax Aula 05
5. Manipulando a Exibição  seleção.slideDown(tempo,função)  $(“div”).slideDown(2000) Wagner Silva # Web 2.0 com Ajax Aula 05
6. Manipulando a Exibição  seleção.fadeOut(tempo,função)  $(“div”).fadeOut(2000) Wagner Silva # Web 2.0 com Ajax Aula 05
7. Manipulando a Exibição  seleção.hide(tempo,função)  $(“div”).hide(2000) Wagner Silva # Web 2.0 com Ajax Aula 05
8. Manipulando a Exibição  seleção.slideUp(tempo,função)  $(“div”).slideUp(2000) Wagner Silva # Web 2.0 com Ajax Aula 05
9. Customizando com CSS  seleção.animate(propriedades,tempo,frequencia,função)  Somente propriedades numéricas são válidas  Frequência: swing ou linear Wagner Silva # Web 2.0 com Ajax Aula 05
10. Customizando com CSS  $(“div”).fadeOut(2000)  $(“div”).animate({ opacity : 0 },2000) Wagner Silva # Web 2.0 com Ajax Aula 05
11. Customizando com CSS  $(“div”).hide(2000)  $(“div”).animate({ height : 0, width : 0, marginTop : 0, marginLeft : 0 },2000) Wagner Silva # Web 2.0 com Ajax Aula 05
12. Customizando com CSS  $(“div”).slideUp(2000)  $(“div”).animate({ height : 0, marginTop: 0 },2000) Wagner Silva # Web 2.0 com Ajax Aula 05
13. Customizando com CSS  Propriedades podem possuir valores não numéricos:  propriedade : ‘show’  propriedade : ‘hide’  propriedade : ‘toogle’ Wagner Silva # Web 2.0 com Ajax Aula 05
14. Customizando com CSS  Os valores das propriedades não necessitam ser exatos:  propriedade : ‘+= valor’  propriedade : ‘-= valor ’ Wagner Silva # Web 2.0 com Ajax Aula 05
15. Enfileiramento  seleção.animação1 .animação2 . ... .animaçãon Wagner Silva # Web 2.0 com Ajax Aula 05
16. Delay  Atrasa a execução de animações enfileiradas  seleção.animação1 .delay(tempo).animação2 Wagner Silva # Web 2.0 com Ajax Aula 05
17. Animação  Exercício: Utilizar fadeIn e fadeOut para manipular a exibição dos emails.
18. Ajax  União de várias tecnologias  Interação dinâmica com usuário  Não há necessidade de recarregamento  Compartilhamento de recursos  Acessibilidade Wagner Silva # Web 2.0 com Ajax Aula 05
19. Wagner Silva # Web 2.0 com Ajax Aula 05
20. Wagner Silva # Web 2.0 com Ajax Aula 05
21. PHP  Linguagem de script server-side  Possui bibliotecas  Banco de dados  E-mail  Imagens  Etc  Instalação, configuração e documentação: www.php.net Wagner Silva # Web 2.0 com Ajax Aula 05
22. XmlHttpRequest  Criado pela Microsoft  Acessar/recuperar dados do servidor (assíncrona)  Pode retornar:  XML  Json  Texto  Imagem  etc Wagner Silva # Web 2.0 com Ajax Aula 05
23. Conexão com JQuery  ajaxSetup() e ajax()  Principais propriedades:  async : booleano  data : mapeamento  statusCode : mapeamento  type : string (post/get)  success : função  url : string Wagner Silva # Web 2.0 com Ajax Aula 05
24. Métodos $.get('ajax/teste.php',{},function(dados){ … }); $.post('ajax/teste.php',{},function(dados){ ... }); Wagner Silva # Web 2.0 com Ajax Aula 05
25. Ajax  Exercício: manipular pastas e busca via Ajax
26. Web 2.0 com Ajax # Aula 05  Próxima Aula:  Manipulando funções através do Ajax.  E-mail: web2softeam@gmail.com  Twitter: twitter.com/web2softeam