Transferir como PDF, PPTX
![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](https://image.slidesharecdn.com/apresentacao-130307162214-phpapp01/85/Comunicacao-Cliente-Servidor-HTTP-66-320.jpg)
Carregado porWillian Watanabe
Comunicação Cliente/Servidor - HTTP
O documento discute a comunicação cliente-servidor na web, abordando: 1) Conteúdos estáticos e dinâmicos e como são servidos por servidores web; 2) A arquitetura cliente-servidor e como funciona a comunicação entre cliente e servidor; 3) Os protocolos HTTP, HTML e como navegadores da web fazem requisições e recebem respostas de servidores.
Mais conteúdo relacionado
Semelhante a Comunicação Cliente/Servidor - HTTP
Comunicação Cliente/Servidor - HTTP
- 1. Comunicação Cliente/Servidor WillianMassami Watanabe 1
- 2. Objetivo Analisar o protocoloHTTP e a comunicação com o servidor web 2
- 3. Sumário • Conteúdos estáticose dinâmicos • Arquitetura Cliente/Servidor • HTTP, HTML e os Navegadores web 3
- 4. Conteúdos estáticos e dinâmicos 4
- 5. Conteúdos estáticos e dinâmicos HTML 5
- 6. Conteúdos estáticos e dinâmicos HTML CSS 6
- 7. Conteúdos estáticos e dinâmicos HTML JavaScript CSS 7
- 8. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Servidor web 8
- 9. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Servidor web 9
- 10. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Usuários Servidor web 10
- 11. Conteúdos estáticos e dinâmicos Quero uma página HTML URL: http:abobrinha.com JavaScript CSS Servidor web Usuários 11
- 12. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Browser Servidor web Usuários 12
- 13. Conteúdos estáticos e Quero uma página dinâmicos URL: http://abobrinha.com HTML JavaScript CSS Browser Servidor web Usuários 13
- 14. Conteúdos estáticos e dinâmicos Resposta com os códigos HTML, CSS e JS Browser Servidor web Usuários 14
- 15. Conteúdos estáticos e dinâmicos Obrigado Browser Servidor web Usuários 15
- 16. Conteúdos estáticos e dinâmicos Cenário de uso de conteúdo estático 16
- 17. Conteúdos estáticos e dinâmicos HTML JavaScript CSS Servidor web 17
- 18. Conteúdos estáticos e dinâmicos Aplicação Servidor web 18
- 19. Conteúdos estáticos e dinâmicos Aplicação Servidor web 19
- 20. Conteúdos estáticos e dinâmicos Quero uma página URL: http://abobrinha.com Aplicação Browser Servidor web Usuários 20
- 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 web Usuários 21
- 22. Conteúdos estáticos e dinâmicos Cenário de uso de conteúdo dinâmico 22
- 23. Cenário de usode conteúdo dinâmico 23
- 24. Cenário de usode conteúdo dinâmico 23
- 25. Cenário de usode conteúdo dinâmico 23
- 26. Cenário de usode conteúdo dinâmico 23
- 27. Cenário de usode conteúdo dinâmico 23
- 28. Cenário de usode conteúdo dinâmico 23
- 29. Conteúdos estáticos e dinâmicos 24
- 30. Conteúdos estáticos e dinâmicos 24
- 31. Conteúdos estáticos e dinâmicos Quero uma página URL: http://google.com?q=abobrinha Aplicação Browser Servidor web Usuários 25
- 32. Conteúdos estáticos e dinâmicos Quero uma página URL: http://google.com?q=abobrinha Aplicação Browser Servidor web Usuários 25
- 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 web Usuários 26
- 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 web Usuários 26
- 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 web Usuários 27
- 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 web Usuários 27
- 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. 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. Conteúdos estáticos e dinâmicos Aplicação Browser Servidor web Usuários 30
- 40. Conteúdos estáticos e dinâmicos Aplicação Browser Servidor web Usuários 31
- 41. Conteúdos estáticos e dinâmicos Quais linguagens de programacão pode ser utilizadas para desenvolver a aplicação referida? Aplicação Pergunta pegadinha ha 32
- 42. Conteúdos estáticos e dinâmicos Quais 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. Conteúdos estáticos e dinâmicos Quais 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. Arquitetura Cliente/ Servidor 35
- 45. Arquitetura Cliente/ Servidor Aplicação Browser Servidor web Usuários 36
- 46. Arquitetura Cliente/Servidor Rede HTML Aplicação JavaScript CSS Browser Servidor web 37
- 47. Arquitetura Cliente/Servidor Rede HTML Aplicação JavaScript CSS Cliente Servidor 38
- 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. HTTP, HTML e NavegadoresWeb 40
- 50. HTTP, HTML e Navegadores Web Rede HTML Aplicação JavaScript CSS Cliente Servidor 41
- 51. HTTP, HTML e Navegadores Web Rede Como funciona a comunicação entre Cliente/Servidor? 42
- 52. HTTP, HTML e Navegadores Web Rede Como funciona a comunicação entre Cliente/Servidor? HTTP - HyperText Transport Protocol 43
- 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. 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. 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. 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. 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. 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. HTTP, HTML e Navegadores Web Completa especificação dos possíveis estados: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html 50
- 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. 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. 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. HTTP, HTML e Navegadores Web • GET Tipos de requisição HTTP • POST • DELETE • PUT • HEAD 54
- 64. HTTP, HTML e Navegadores Web Tipos de requisição HTTP • Envio de parâmetros para transação em formato x-www-urlencoded http://www.google.com?q=alguma_coisa_para_buscar 55
- 65. HTTP, HTML e Navegadores Web > GET /?q=abobrinha HTTP/1.1 > User-Agent: curl/7.27.0 > Host: google.com > Accept: */* 56
- 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. 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. 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. 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. 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. 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. HTTP, HTML e NavegadoresWeb Como o navegador utiliza o HTTP?
- 73. HTTP, HTML e Navegadores Web Como 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. HTTP, HTML e Navegadores Web Como o navegador utiliza o HTTP? <a href=”/?q=abobrinha”>procurar abobrinha</a> > GET /?q=abobrinha HTTP/1.1 > User-Agent: curl/7.27.0 > Host: dominio.alegre.com > Accept: */* utilizando um endereço relativo
- 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. 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. HTTP, HTML e Navegadores Web Como 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. HTTP, HTML e Navegadores Web Como 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.