1. Comunicação
Cliente/Servidor
Willian Massami Watanabe
1

2. Objetivo
Analisar o protocolo HTTP e a comunicação
com o servidor web
2

3. Sumário
• Conteúdos estáticos e 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 uso de conteúdo dinâmico
23

24. Cenário de uso de conteúdo dinâmico
23

25. Cenário de uso de conteúdo dinâmico
23

26. Cenário de uso de conteúdo dinâmico
23

27. Cenário de uso de conteúdo dinâmico
23

28. Cenário de uso de 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
Navegadores Web
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
Navegadores Web
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. Dúvidas ?