Apresentação introdutória do Ajax, a importância do mesmo, conceito e na prática

1. AJAXREQUISIÇÕES ASSÍNCRONAS
Tornando sua aplicação mais
fluídas e eficiente
WEB DESIGNER & DEVELOPER
Kenji Shiroma

2. WEB DESIGNER & DEVELOPER
Kenji Shiroma
kenjishiromajp@gmail.com

3. AJAX
O QUE É
?

4. TÉCNICA UTILIZADA PARA
PEGAR INFORMAÇÕES
DO SERVIDOR
SEM DAR UM REFRESH

6. ÁREA DO CONTEÚDO ATUALIZADO

8. CARREGANDO...

10. CARREGANDO...

11. E COMOTUDO
ISSO FUNCIONA?

12. AJAX
Asynchronous javascript
and XML

13. AJAX
XML e Javascript
Assíncrono

14. Requisição
Assíncrona

15. Assincronia?
Requisição?
MAS O QUE É
MAS O QUE É

17. REQUISIÇÃO = PEDIDO

18. E EM UMA PÁGINA WEB?

20. Email
Senha
posso entrar
no facebook?
Sim, pode || Não, não pode

21. Email
Senha
estrutura de uma requisição
cabeçalhos
corpo

22. estrutura de uma requisição
define o tipo
de requisição
Mostra os valores
da requisição
Email
Senha
cabeçalhos
corpo

23. estrutura de uma requisição
https://facebook.com/signin
POST
email:
kenjishiromajp@gmail.com
senha:
minhasenhasecreta
Email
Senha
cabeçalhos
corpo

24. REQUISIÇÃO
HTTP
hypertext
transfer protocol
Email
Senha
cabeçalhos
corpo

25. Assincronia?
Requisição?
MAS O QUE É
MAS O QUE É

26. PORQUE CHAMAMOS
DE NATAÇÃO SINCRONIZADA?

27. EXECUTANDO EM HARMONIA
COM MESMOS PADRÕES

28. ASSINCRONIA SERIA
O CONTRÁRIO

29. E NA PROGRAMAÇÃO?

30. 1
2
3
EXECUÇÃO
PADRÃO NO JS
console.log(”Olá mundo!”);
console.log(”Kenji”);
console.log(”Shiroma”);

31. EXECUÇÃO
PADRÃO NO JS
DE CIMA
PARA BAIXO
console.log(”Olá mundo!”);1
console.log(”Kenji”);2
console.log(”Shiroma”);3
OUTPUT
Olá mundo!
Kenji
Shiroma

32. console.log(”Kenji”);2
console.log(”Shiroma”);3
QUANDO CHEGA NA ULTIMA
LINHA DE CÓDIGO QUE O
BROWSER FICA LIVRE PARA
O USUÁRIO NAVEGAR

33. 1
2
3
montarHTMLMenuHorizontal();
carregarPosts();
montarHTMLPropagandas();

34. CARREGANDO...
:(

35. 1
2
3
montarHTMLMenuHorizontal();
carregarPosts();
montarHTMLPropagandas();
2
1
3

36. CARREGANDO...

37. OK ENTENDI, MAS
E NA PRÁTICA?

38. VAMOS UTILIZAR A CLASSE
XMLHttpRequest

39. XMLHttpRequest
open(verbo, url, assincronia)
send(corpo)
onload

40. var xhr = new XMLHttpRequest();
xhr.open(verbo,url,true);
xhr.onload=function(resultado){
var resposta = resultado.target.result;
}
xhr.send();
var url = "https://viacep.com.br/ws/"+cep.value+"/json/";
var verbo = “GET”; //Verbo utilizado para pegar informações

41. RECAPITULANDO

42. AJAX
Requisição
Assíncrona

43. REQUISIÇÃO = PEDIDO

44. estrutura de uma requisição
https://facebook.com/signin
POST
email:
kenjishiromajp@gmail.com
senha:
minhasenhasecreta
Email
Senha
cabeçalhos

45. ASSINCRONIA = ALGO
FORA DO PADRÃO

46. CARREGANDO...
:(

47. 1
2
3
montarHTMLMenuHorizontal();
carregarPosts();
montarHTMLPropagandas();
2
1
3

48. XMLHttpRequest
open(verbo, url, assincronia)
send(corpo)
onload

49. var xhr = new XMLHttpRequest();
xhr.open(verbo,url,true);
xhr.onload=function(resultado){
var resposta = resultado.target.result;
}
xhr.send();
var url = "https://viacep.com.br/ws/"+cep.value+"/json/";
var verbo = “GET”; //Verbo utilizado para pegar informações

50. PARA SABER MAIS
AJAX INTRO
https://www.w3schools.com/xml/ajax_intro.asp
AJAX CONCEITO
https://en.wikipedia.org/wiki/Ajax_(programming)
AJAX COM JQUERY
http://api.jquery.com/jquery.ajax/
FETCH API
https://developer.mozilla.org/en/docs/Web/API/Fetch_API

51. AJAXREQUISIÇÕES ASSÍNCRONAS
OBRIGADO!
WEB DESIGNER & DEVELOPER
Kenji Shiroma