1) AJAX é uma coleção de tecnologias que permitem a criação de aplicações web interativas e dinâmicas sem recarregar a página. Ele incorpora XHTML, CSS, DOM, XML, XSLT e JavaScript. 2) No modelo tradicional, o usuário precisa esperar o servidor processar cada requisição, enquanto no AJAX a interação do usuário acontece simultaneamente através de uma ferramenta entre o usuário e o servidor. 3) jQuery é uma biblioteca JavaScript que facilita a manipulação de eventos e anim

1. AJAX
ASYNCHRONOUS JAVASCRIPT AND XML

2. Definição
• Ajax não é uma tecnologia (vamos prestar atenção nisso). É na verdade
várias tecnologias, cada uma atuando da sua própria maneira, tornando-se
juntas uma poderosa possibilidade. Ajax incorpora:
1. Apresentação baseada nasWeb Standards usando XHTML e CSS.
2. Exibição e interação dinâmicas usando Document Objetct Model (DOM);
3. Troca e manipulação de dados usando XML e XSLT;
4. Retorno de dados assincronamente usando XMLHttpRequest;
5. E JavaScript interligando tudo.

3. Modelo de uma aplicação normal
• Essa técnica faz muito sentido, mas não
para uma grande experiência do usuário.
• Enquanto o servidor está processando as
requisições, oque o usuário está fazendo?
Está certo, esperando. E a cada etapa da
tarefa o usuário espera mais um pouco.

4. Como o Ajax faz?
• Uma aplicação Ajax elimina o natural o intermediário, ou seja, introduz
uma ferramentaAjax entre o usuário e o servidor.
• A ferramentaAjax permite que a interação do usuário com a aplicação
aconteça simultaneamente, independente da comunicação com o servidor
então o usuário nunca encarará uma janela branca do browser e um ícone
de ampulheta, esperando pelo servidor para fazer algo.

5. Características
• É possível, e bastante desejável, construir aplicações Ajax que
tenham algumas características:
• • Funcionar sem Java script ;
• • Funcionar sem CSS;
• • Ao clicar, mudar a url na barra de endereços e o título da página;
• • Manter funcionais os botões de avançar, voltar e recarregar ;
• • Permitam salvar links, adicionar a bookmarks, etc.

6. Padrões Web Standards
• AJAX é baseado nos seguintes padrões da web Standards:
• Java Script
• XML
• HTML
• CSS

7. AJAX Http Requests
• AJAX usa pedidos do HTTP
• No código tradicional do Java script, se você quiser começar alguma
informação de uma base de dados ou de um arquivo no usuário, ou emitir a
informação do usuário a um usuário, você terá que fazer um HTML dar
forma e COMEÇAR ou AFIXAR os dados ao usuário. O usuário terá que
enviar “submete” a tecla para emitir/começa a informação, espera para que
o usuário responda, então uma página nova carregará com os resultados.

8. AJAX Http Requests
•Usando o objeto de XMLHttpRequest, um
colaborador da web standart pode atualizar
uma página com dados do usuário depois
que a página carregou!

9. O que é JQuery
• jQuery é uma biblioteca JavaScript criada por John
Resig e disponibilizada como software livre e
aberto, ou seja, de emprego e uso regido segundo
licença conforme as regras estabelecidas pelo MIT –
Massachusetts Institute of Technology ou pelo GPL
– GNU General Public License. Isso, resumidamente,
significa que você pode usar a biblioteca
gratuitamente tanto em desenvolvimento de
projetos pessoais como comerciais.

10. Incluindo a jQuery
Inserir pelo arquivo baixado – Caminho Relativo
<script src="jquery.js"></script>
Ou utilizar a biblioteca pelo Google – Caminho Absoluto
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>

11. Criando efeitos de fade e slide com jQuery
• Um dos principais recursos que a biblioteca jQuery nos fornece é a
fácil aplicação de efeitos especiais a elementos. Dois dos efeitos mais
utilizados, são os efeitos de fading e sliding. O primeiro funciona
alterando gradativamente a opacidade de um elemento até o ponto
desejado, geralmente, até o elemento estar completamente visível
ou invisível. O segundo faz com que parte do elemento “role” em
certa direção até atingir o ponto desejado, geralmente até aparecer
ou desaparecer completamente.

12. FadeIn
• Este efeito faz com que o elemento alvo tenha sua opacidade aumentada, até o valor
máximo (100%), quando o elemento se torna totalmente visível. Pode-se passar como
parâmetro a duração e uma função de call-back, ou seja, que será executada ao fim do
efeito.
• A função hide() foi invocada no carregamento da página para esconder a div, pois o
efeito fadeIn é usado para torna-la visível.
FadeIn

13. FadeOut
• O efeito fade out realiza o inverso da função anterior, aumentando a
transparência do elemento até que este se torne totalmente invisível.
• Neste exemplo não foi necessário esconder a div inicialmente, pois este é o
objetivo da função fadeOut.
FadeOut

14. FadeTo
• Utiliza-se o fadeTo para ajustar a opacidade de um elemento,
passando o novo valor como segundo parâmetro (o primeiro deve ser
a duração do efeito). O valor da opacidade deve ser um número entre
0 e 1.
FadeTo

15. FadeToggle
• O fadeToggle alterna a opacidade do elemento entre o máximo e
mínimo, dependendo do estado atual da mesma. Ou seja, se o
elemento estiver visível, ficará invisível após o efeito fade e vice-
versa.
FadeToggle

16. Efeito Slide

17. Efeito Fade

18. SlideUp
• A função slideUp “dobrará” o elemento de baixo para cima,
recebendo os mesmos parâmetros da função fadeIn.
SlideUp

19. SlideDown
• O slideDown é exatamente o inverso do slideUp, como se pode
imaginar, tornando o objeto visível após “desdobrá-lo” de cima para
baixo. Os parâmetros e a estrutura são os mesmos do slideUp.
SlideDown

20. SlideToggle
• A função slideToggle, por sua vez, funciona segundo a mesma lógica
do fadeToggle, porém com o efeito sliding. Se o elemento estiver
visível, será executado o slideUp, caso contrário, o slideDown. A
estrutura e os parâmetros também são semelhantes.
SlideToggle

21. Exemplo de Calendário

22. Efeitos de Formulário

23. Como tratar eventos de formulários com
jQuery
• Dentre os vários eventos possíveis que podemos tratar com jQuery, alguns
dos mais utilizados no desenvolvimento de aplicações são aqueles ligados a
formulários. Por exemplo, é muito comum precisarmos executar alguma
ação quando um controle (um input, por exemplo) recebe ou perde o foco,
ou quando seu valor é alterado.
• E exatamente por serem situações bastante comuns, essa biblioteca nos
fornece métodos para tratar esses eventos de forma prática, agilizando o
trabalho do desenvolvedor web.

24. Evento blur
• O evento blur é disparado quando um determinado elemento perde o foco,
o que pode ocorrer se o usuário pressionarTAB, por exemplo, sobre o
controle ou se clicar em outra região da página que também receba foco.
• Este evento só era implementado, originalmente, por controles de
formulário como inputs e textareas, mas alguns browsers mais recentes
estão permitindo que outros elementos recebam e, consequentemente,
percam o foco, disparando o evento blur.
Efeito Blur

25. Efeito Change
• Este evento é disparado quando o valor do controle é alterado e seu uso é
exclusivo de elementos de formulário como inputs, textareas, selects,
checkboxes e radio buttons.
• No caso de selects e radios, ele é disparado imediatamente após o valor ser
alterado (nova opção no select ser selecionada ou radio/checkbox ser
marcado/desmarcado). Já nos inputs do tipo text e nos textareas, o change
só é executado quando o elemento perde o foco, que é quando seu valor é
validado.
Efeito
Change

26. Efeito Focus
• De nome sugestivo, o evento focus funciona de forma inversa ao blur.
Nesse caso o evento é disparado quando o elemento recebe o foco.
Inicialmente este evento era exclusivo de alguns tipos de elemento
como inputs e links, mas os browsers mais recentes estão permitindo
que outros controles recebam o foco, executando o evento focus.
• Uma aplicação comum deste evento é no destaque dos campos que
receberam o foco, por exemplo, mudando a cor do background.
Efeito Focus

27. Efeito Select
• Este evento é exclusivo de elementos nos quais se pode digitar texto,
ou seja, inputs e textareas e é disparado quando algum texto do
controle é selecionado. Essa seleção pode ser feita tanto com o
mouse quanto com o teclado, usando as setas direcionais ou atalhos
de seleção.
Efeito
Select

28. Efeito Submit
• O evento submit é próprio de formulários e, como se pode imaginar, é
disparado quando o form é submetido a processamento, ou seja,
quando um controle de submissão é acionado, como um input ou
Button com tipo “submit”.
Efeito
Submit

29. Validação de Formulário
Sem Plugin Com Plugin

30. Atividade
• Pesquise formas de aplicar máscara de entrada usando
Jquery.
• Crie um formulário aplicando o uso das Máscara.

32. Efeitos JQuery Com Animações
• O conceito de animação fala na transição entre 2 pontos dentro de
um determinado tempo, assim podemos pensar que, como o jQuery
é uma biblioteca javascript baseada no CSS, o ponto inicial seria um
valor para uma determinada propriedade CSS e o ponto final um
outro valor para essa propriedade.
• O método Animate trabalha com o mesmo pensamento, seletores
CSS e a animação trabalha as propriedades CSS, assim
informamos quem queremos animar, a propriedade a ser
animada, o valor para o ponto final e o tempo em que a animação
deve acontecer.

33. A Sintaxe
$(seletor).animate({
propriedade:
valor
}, tempo);
• $(seletor) - Quem será
selecionado.
• .animate - Chamada do
método
• propriedade - propriedade CSS
a ser animada
• valor - valor final da
propriedade animada
• tempo -Tempo de execução da
animação em milesegundos

34. Animate jQuery () - manipular várias propriedades
• Exemplo
• $("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Exemplo

35. Animate jQuery () - Usando valores relativos
• Também é possível definir os valores relativos (o valor é, em seguida,
em relação ao valor atual do elemento). Isto é feito pondo + = ou - =
na frente do valor:
• Exemplo
• $("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Exemplo

36. animate jQuery () - Usando valores pré-
definidos
• Você pode até especificar valor animação de uma propriedade como
"show", "hide", ou "toggle":
• Exemplo
• $("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Exemplo

37. Animate jQuery () – Múltiplas
funcionalidades
• Exemplo
• $("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Exemplo 1

38. Animate jQuery () – Múltiplas
funcionalidades
• Exemplo
• $("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Exemplo 2
O exemplo a seguir primeiro movimenta o elemento <div> para a
direita, e, em seguida, aumenta o tamanho da fonte do texto: