Web 2.0 com Ajax: JQuery/PHP (Aula 05)
-
Upload
wagner-silva -
Category
Documents
-
view
511 -
download
1
description
Transcript of Web 2.0 com Ajax: JQuery/PHP (Aula 05)
![Page 1: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/1.jpg)
Aula 05
Wagner Silva
![Page 2: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/2.jpg)
AgendaManipulando 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
![Page 3: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/3.jpg)
Manipulando a Exibição seleção.fadeIn(tempo,função)
$(“div”).fadeIn(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 4: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/4.jpg)
Manipulando a Exibição seleção.show(tempo,função)
$(“div”).show(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 5: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/5.jpg)
Manipulando a Exibição seleção.slideDown(tempo,função)
$(“div”).slideDown(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 6: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/6.jpg)
Manipulando a Exibição seleção.fadeOut(tempo,função)
$(“div”).fadeOut(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 7: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/7.jpg)
Manipulando a Exibição seleção.hide(tempo,função)
$(“div”).hide(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 8: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/8.jpg)
Manipulando a Exibição seleção.slideUp(tempo,função)
$(“div”).slideUp(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 9: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/9.jpg)
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
![Page 10: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/10.jpg)
Customizando com CSS $(“div”).fadeOut(2000)
$(“div”).animate({
opacity : 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 11: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/11.jpg)
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
![Page 12: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/12.jpg)
Customizando com CSS $(“div”).slideUp(2000)
$(“div”).animate({
height : 0,
marginTop: 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 13: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/13.jpg)
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
![Page 14: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/14.jpg)
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
![Page 15: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/15.jpg)
Enfileiramento seleção.animação1.animação2. ... .animaçãon
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 16: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/16.jpg)
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
![Page 17: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/17.jpg)
Animação Exercício: Utilizar fadeIn e fadeOut para manipular a
exibição dos emails.
![Page 18: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/18.jpg)
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
![Page 19: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/19.jpg)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 20: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/20.jpg)
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 21: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/21.jpg)
PHP Linguagem de script server-side
Possui bibliotecas
Banco de dados
Imagens
Etc
Instalação, configuração e documentação: www.php.net
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 22: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/22.jpg)
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
![Page 23: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/23.jpg)
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
![Page 24: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/24.jpg)
Métodos$.get('ajax/teste.php',{},function(dados){
…
});
$.post('ajax/teste.php',{},function(dados){
...
});
Wagner Silva # Web 2.0 com Ajax Aula 05
![Page 25: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/25.jpg)
Ajax Exercício: manipular pastas e busca via Ajax
![Page 26: Web 2.0 com Ajax: JQuery/PHP (Aula 05)](https://reader034.fdocuments.net/reader034/viewer/2022052321/5560b621d8b42af93b8b4ab9/html5/thumbnails/26.jpg)
Web 2.0 com Ajax # Aula 05 Próxima Aula:
Manipulando funções através do Ajax.
E-mail: [email protected]
Twitter: twitter.com/web2softeam