Web 2.0 com Ajax: JQuery/PHP (Aula 05)

Aula 05

Wagner Silva

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

Manipulando a Exibição seleção.fadeIn(tempo,função)

$(“div”).fadeIn(2000)


Manipulando a Exibição seleção.show(tempo,função)

$(“div”).show(2000)


Manipulando a Exibição seleção.slideDown(tempo,função)

$(“div”).slideDown(2000)


Manipulando a Exibição seleção.fadeOut(tempo,função)

$(“div”).fadeOut(2000)


Manipulando a Exibição seleção.hide(tempo,função)

$(“div”).hide(2000)


Manipulando a Exibição seleção.slideUp(tempo,função)

$(“div”).slideUp(2000)


Customizando com CSS seleção.animate(propriedades,tempo,frequencia,função)

Somente propriedades numéricas são válidas

Frequência: swing ou linear


Customizando com CSS $(“div”).fadeOut(2000)

$(“div”).animate({

opacity : 0

},2000)


Customizando com CSS $(“div”).hide(2000)


height : 0,

width : 0,

marginTop : 0,

marginLeft : 0

},2000)


Customizando com CSS $(“div”).slideUp(2000)


height : 0,

marginTop: 0

},2000)


Customizando com CSS Propriedades podem possuir valores não numéricos:

propriedade : ‘show’

propriedade : ‘hide’

propriedade : ‘toogle’


Customizando com CSS Os valores das propriedades não necessitam ser exatos:

propriedade : ‘+= valor’

propriedade : ‘-= valor ’


Enfileiramento seleção.animação1.animação2. ... .animaçãon


Delay Atrasa a execução de animações enfileiradas

seleção.animação1.delay(tempo).animação2


Animação Exercício: Utilizar fadeIn e fadeOut para manipular a

exibição dos emails.

Ajax União de várias tecnologias

Interação dinâmica com usuário

Não há necessidade de recarregamento

Compartilhamento de recursos

Acessibilidade


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


XmlHttpRequest Criado pela Microsoft

Acessar/recuperar dados do servidor (assíncrona)

Pode retornar:

XML

Json

Texto

Imagem

etc


Conexão com JQuery ajaxSetup() e ajax()

Principais propriedades:

async : booleano

data : mapeamento

statusCode : mapeamento

type : string (post/get)

success : função

url : string


Métodos$.get('ajax/teste.php',{},function(dados){

…

});

$.post('ajax/teste.php',{},function(dados){

...

});


Ajax Exercício: manipular pastas e busca via Ajax

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

Web 2.0 com Ajax: JQuery/PHP (Aula 05)

Documents

Transcript of Web 2.0 com Ajax: JQuery/PHP (Aula 05)