Comunicação Cliente/Servidor - HTTP

5.338 visualizações

Publicada em

1 comentário
3 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
5.338
No SlideShare
0
A partir de incorporações
0
Número de incorporações
106
Ações
Compartilhamentos
0
Downloads
113
Comentários
1
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Comunicação Cliente/Servidor - HTTP

  1. 1. ComunicaçãoCliente/Servidor Willian Massami Watanabe 1
  2. 2. ObjetivoAnalisar o protocolo HTTP e a comunicação com o servidor web 2
  3. 3. Sumário• Conteúdos estáticos e dinâmicos• Arquitetura Cliente/Servidor• HTTP, HTML e os Navegadores web 3
  4. 4. Conteúdos estáticos e dinâmicos 4
  5. 5. Conteúdos estáticos e dinâmicosHTML 5
  6. 6. Conteúdos estáticos e dinâmicosHTML CSS 6
  7. 7. Conteúdos estáticos e dinâmicosHTMLJavaScript CSS 7
  8. 8. Conteúdos estáticos e dinâmicosHTMLJavaScript CSS Servidor web 8
  9. 9. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Servidor web 9
  10. 10. Conteúdos estáticos e dinâmicos HTML JavaScript CSSUsuários Servidor web 10
  11. 11. Conteúdos estáticos e dinâmicos Quero uma página HTML URL: http:abobrinha.com JavaScript CSS Servidor webUsuários 11
  12. 12. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Browser Servidor webUsuários 12
  13. 13. Conteúdos estáticos e Quero uma página dinâmicosURL: http://abobrinha.com HTML JavaScript CSS Browser Servidor webUsuários 13
  14. 14. Conteúdos estáticos e dinâmicos Resposta com os códigos HTML, CSS e JS Browser Servidor webUsuários 14
  15. 15. Conteúdos estáticos e dinâmicos Obrigado Browser Servidor webUsuários 15
  16. 16. Conteúdos estáticos e dinâmicosCenário de uso de conteúdo estático 16
  17. 17. Conteúdos estáticos e dinâmicosHTMLJavaScript CSS Servidor web 17
  18. 18. Conteúdos estáticos e dinâmicos Aplicação Servidor web 18
  19. 19. Conteúdos estáticos e dinâmicos Aplicação Servidor web 19
  20. 20. Conteúdos estáticos e dinâmicos Quero uma páginaURL: http://abobrinha.com Aplicação Browser Servidor webUsuários 20
  21. 21. Conteúdos estáticos e dinâmicos Resposta com os códigos HTML, CSS e JS gerados pela aplicação Aplicação Browser Servidor webUsuários 21
  22. 22. Conteúdos estáticos e dinâmicosCenário de uso de conteúdo dinâmico 22
  23. 23. Cenário de uso de conteúdo dinâmico 23
  24. 24. Cenário de uso de conteúdo dinâmico 23
  25. 25. Cenário de uso de conteúdo dinâmico 23
  26. 26. Cenário de uso de conteúdo dinâmico 23
  27. 27. Cenário de uso de conteúdo dinâmico 23
  28. 28. Cenário de uso de conteúdo dinâmico 23
  29. 29. Conteúdos estáticos e dinâmicos 24
  30. 30. Conteúdos estáticos e dinâmicos 24
  31. 31. Conteúdos estáticos e dinâmicos Quero uma página URL: http://google.com?q=abobrinha Aplicação Browser Servidor webUsuários 25
  32. 32. Conteúdos estáticos e dinâmicos Quero uma página URL: http://google.com?q=abobrinha Aplicação Browser Servidor webUsuários 25
  33. 33. Conteúdos estáticos e dinâmicos Processa em seu banco de dados uma busca por elementos relacionados a abobrinha Aplicação Browser Servidor webUsuários 26
  34. 34. Conteúdos estáticos e dinâmicos Processa em seu banco de dados uma busca por elementos relacionados a abobrinha Aplicação Browser Servidor webUsuários 26
  35. 35. Conteúdos estáticos e dinâmicos Resposta com os códigos HTML, CSS e JS gerados pela aplicação Aplicação Browser Servidor webUsuários 27
  36. 36. Conteúdos estáticos e dinâmicos Resposta com os códigos HTML, CSS e JS gerados pela aplicação Aplicação Browser Servidor webUsuários 27
  37. 37. Conteúdos estáticos e dinâmicos• Vantagens do conteúdo estático • mais rápido visto que não exige processamento no servidor • possui políticas de cache mais agressivas • compatível com qualquer servidor 28
  38. 38. Conteúdos estáticos e dinâmicos• Vantagens do conteúdo dinâmico • permite que os conteúdos sejam atualizados mais rapidamente • permite que o conteúdo se adeque ao perfil do usuário 29
  39. 39. Conteúdos estáticos e dinâmicos Aplicação Browser Servidor webUsuários 30
  40. 40. Conteúdos estáticos e dinâmicos Aplicação Browser Servidor webUsuários 31
  41. 41. Conteúdos estáticos e dinâmicosQuais linguagens de programacão pode ser utilizadas para desenvolver a aplicação referida? Aplicação Pergunta pegadinha ha 32
  42. 42. Conteúdos estáticos e dinâmicosQuais linguagens de programacão pode ser utilizadas para desenvolver a aplicação referida?TODAS que forem suportadas pelo seu servidor web Aplicação 33
  43. 43. Conteúdos estáticos e dinâmicosQuais linguagens de programacão pode ser utilizadas para desenvolver a aplicação referida?TODAS que forem suportadas pelo seu servidor web Aplicação Existe uma ampla variedade de servidores web 34
  44. 44. Arquitetura Cliente/ Servidor 35
  45. 45. Arquitetura Cliente/ Servidor Aplicação Browser Servidor webUsuários 36
  46. 46. Arquitetura Cliente/Servidor Rede HTML Aplicação JavaScript CSS Browser Servidor web 37
  47. 47. Arquitetura Cliente/Servidor Rede HTML Aplicação JavaScript CSS Cliente Servidor 38
  48. 48. Arquitetura Cliente/Servidor • Arquitetura Distribuída de Cliente/Servidor • Cliente: considera as partes da aplicação que são executadas dentro do navegador • Servidor: considera as partes da aplicação que são executadas no servidor 39
  49. 49. HTTP, HTML eNavegadores Web 40
  50. 50. HTTP, HTML e Navegadores Web RedeHTML AplicaçãoJavaScript CSS Cliente Servidor 41
  51. 51. HTTP, HTML e Navegadores Web RedeComo funciona a comunicação entre Cliente/Servidor? 42
  52. 52. HTTP, HTML e Navegadores Web Rede Como funciona a comunicação entre Cliente/Servidor?HTTP - HyperText Transport Protocol 43
  53. 53. HTTP, HTML e Navegadores Web• HTTP • HyperText Transfer Protocol • Padrão utilizado na www - World Wide Web • Utiliza IP/TCP, atuando no nível da aplicação (Modelo OSI) • Utilizado para transmitir Recursos (URL - Unified Resources Location) 44
  54. 54. HTTP, HTML e Navegadores Web> GET / HTTP/1.1> User-Agent: curl/7.27.0 Requisição HTTP> Host: www.google.com> Accept: */* 45
  55. 55. HTTP, HTML e Navegadores Web> GET / HTTP/1.1> User-Agent: curl/7.27.0 Requisição HTTP> Host: www.google.com> Accept: */*< HTTP/1.1 302 Found< Location: http://www.google.com.br/< Cache-Control: private< Content-Type: text/html; charset=UTF-8 46
  56. 56. HTTP, HTML e Navegadores Web> GET / HTTP/1.1> User-Agent: curl/7.27.0 Requisição HTTP> Host: www.google.com> Accept: */*< HTTP/1.1 302 Found< Location: http://www.google.com.br/ Resposta HTTP< Cache-Control: private< Content-Type: text/html; charset=UTF-8 47
  57. 57. HTTP, HTML e Navegadores Web< HTTP/1.1 302 Found< Location: http://www.google.com.br/< Cache-Control: private< Content-Type: text/html; charset=UTF-8 Status da Resposta HTTP 48
  58. 58. HTTP, HTML e Navegadores Web• Tipos de Status • 1xx indica uma mensagem informacional • 2xx indica sucesso na transação • 3xx redireciona o cliente para outra URL • 4xx indica um erro por parte do cliente • 5xx indica um erro por parte do servidor 49
  59. 59. HTTP, HTML e Navegadores Web Completa especificação dos possíveis estados:http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html 50
  60. 60. HTTP, HTML e Navegadores Web> GET / HTTP/1.1> User-Agent: curl/7.27.0 Cabeçalhos da> Host: www.google.com requisição> Accept: */*< HTTP/1.1 302 Found< Location: http://www.google.com.br/< Cache-Control: private< Content-Type: text/html; charset=UTF-8 51
  61. 61. HTTP, HTML e Navegadores Web> GET / HTTP/1.1> User-Agent: curl/7.27.0 Cabeçalhos da> Host: www.google.com resposta> Accept: */*< HTTP/1.1 302 Found< Location: http://www.google.com.br/< Cache-Control: private< Content-Type: text/html; charset=UTF-8 52
  62. 62. HTTP, HTML e Navegadores Web> GET / HTTP/1.1> User-Agent: curl/7.27.0 Tipos de requisição> Host: www.google.com HTTP> Accept: */*< HTTP/1.1 302 Found< Location: http://www.google.com.br/< Cache-Control: private< Content-Type: text/html; charset=UTF-8 53
  63. 63. HTTP, HTML e Navegadores Web• GET Tipos de requisição HTTP• POST• DELETE• PUT• HEAD 54
  64. 64. HTTP, HTML e Navegadores Web Tipos de requisição HTTP • Envio de parâmetros para transação em formato x-www-urlencodedhttp://www.google.com?q=alguma_coisa_para_buscar 55
  65. 65. HTTP, HTML e Navegadores Web> GET /?q=abobrinha HTTP/1.1> User-Agent: curl/7.27.0> Host: google.com> Accept: */* 56
  66. 66. HTTP, HTML e Navegadores Web> GET /?q=abobrinha HTTP/1.1> User-Agent: curl/7.27.0> Host: google.com> Accept: */* <?php echo $_GET[‘q’]; ?> Servidor web 57
  67. 67. HTTP, HTML e Navegadores Web• GET => parâmetros na URL• POST => parâmetros no corpo• DELETE => parâmetros na URL• PUT => parâmetros no corpo• HEAD => parâmetros na URL Freqüentemente 58
  68. 68. HTTP, HTML e Navegadores Web• GET => parâmetros na URL• POST => parâmetros no corpo• DELETE => parâmetros na URL• PUT => parâmetros no corpo• HEAD => parâmetros na URLÚnicos métodos aceitos no navegador 59
  69. 69. HTTP, HTML e Navegadores Web• Método GET • Utilizado para enviar parâmetros de busca e leitura ao servidor • Os dados são enviados na URL seguindo o formato da query string
  70. 70. HTTP, HTML e Navegadores Web• Método POST • Utilizado para enviar parâmetros de escrita ao servidor • Os dados são enviados no corpo da requisição HTTP seguindo o formato da query string
  71. 71. HTTP, HTML e Navegadores Web• Método HEAD • Utilizado para pesquisar meta-dados de recursos disponíveis em URLs • Por exemplo: utilizado para fazer a verificação se um arquivo em cache foi alterado no servidor.
  72. 72. HTTP, HTML eNavegadores WebComo o navegador utiliza o HTTP?
  73. 73. HTTP, HTML e Navegadores WebComo o navegador utiliza o HTTP?<a href=”http://www.google.com?q=abobrinha”>procurar abobrinha</a> > GET /?q=abobrinha HTTP/1.1 > User-Agent: curl/7.27.0 > Host: google.com > Accept: */*
  74. 74. HTTP, HTML e Navegadores WebComo o navegador utiliza o HTTP?<a href=”/?q=abobrinha”>procurarabobrinha</a> > GET /?q=abobrinha HTTP/1.1 > User-Agent: curl/7.27.0 > Host: dominio.alegre.com > Accept: */*utilizando um endereço relativo
  75. 75. HTTP, HTML e Navegadores Web<form method=”GET” action=”http://google.com”>Como o navegador utiliza o HTTP? <label for=”q”>Procurar:</label> <input type=”text” id=”q” name=”q”></input> <input type=”submit” value=“submit”></input></form> > GET /?q=abobrinha HTTP/1.1 > User-Agent: curl/7.27.0 > Host: google.com > Accept: */*
  76. 76. HTTP, HTML e Navegadores Web<form method=”POST” action=”http://google.com”> Como o navegador utiliza o HTTP? <label for=”q”>Procurar:</label> <input type=”text” id=”q” name=”q”></input> <input type=”submit” value=“submit”></input></form> > POST / HTTP/1.1 > User-Agent: curl/7.27.0 > Host: google.com > Accept: */* q=abobrinha
  77. 77. HTTP, HTML e Navegadores WebComo o navegador utiliza o HTTP?<img src=”figura_legal.png” alt= “super legal”></img><link rel="stylesheet" href="master.css" type="text/css"media="screen" charset="utf-8" /><script type=“text/javascript” src=“jquery.js” />
  78. 78. HTTP, HTML e Navegadores WebComo o navegador utiliza o HTTP? Também existem outras formas de realizar essas requisições utilizando JavaScript e a linguagem de programação do lado do servidor
  79. 79. Dúvidas ?

×