Você está na página 1de 79

Comunicação

Cliente/Servidor
Willian Massami Watanabe

1
Objetivo

Analisar o protocolo HTTP e a comunicação


com o servidor web

2
Sumário

• Conteúdos estáticos e dinâmicos


• Arquitetura Cliente/Servidor
• HTTP, HTML e os Navegadores web

3
Conteúdos estáticos e
dinâmicos

4
Conteúdos estáticos e
dinâmicos

HTML

5
Conteúdos estáticos e
dinâmicos

HTML

CSS

6
Conteúdos estáticos e
dinâmicos

HTML

JavaScript CSS

7
Conteúdos estáticos e
dinâmicos

HTML

JavaScript CSS
Servidor web

8
Conteúdos estáticos e
dinâmicos
HTML

JavaScript CSS

Servidor web

9
Conteúdos estáticos e
dinâmicos
HTML

JavaScript CSS
Usuários
Servidor web

10
Conteúdos estáticos e
dinâmicos
Quero uma página
HTML
URL: http:abobrinha.com

JavaScript CSS

Servidor web
Usuários

11
Conteúdos estáticos e
dinâmicos
HTML

JavaScript CSS

Browser Servidor web


Usuários

12
Conteúdos estáticos e
Quero uma página
dinâmicos
URL: http://abobrinha.com

HTML

JavaScript CSS

Browser Servidor web


Usuários

13
Conteúdos estáticos e
dinâmicos
Resposta com os códigos
HTML, CSS e JS

Browser Servidor web


Usuários

14
Conteúdos estáticos e
dinâmicos
Obrigado

Browser Servidor web


Usuários

15
Conteúdos estáticos e
dinâmicos

Cenário de uso de conteúdo estático

16
Conteúdos estáticos e
dinâmicos

HTML

JavaScript CSS
Servidor web

17
Conteúdos estáticos e
dinâmicos

Aplicação

Servidor web

18
Conteúdos estáticos e
dinâmicos

Aplicação

Servidor web

19
Conteúdos estáticos e
dinâmicos
Quero uma página
URL: http://abobrinha.com

Aplicação

Browser Servidor web


Usuários

20
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
Conteúdos estáticos e
dinâmicos

Cenário de uso de conteúdo dinâmico

22
Cenário de uso de conteúdo dinâmico
23
Cenário de uso de conteúdo dinâmico
23
Cenário de uso de conteúdo dinâmico
23
Cenário de uso de conteúdo dinâmico
23
Cenário de uso de conteúdo dinâmico
23
Cenário de uso de conteúdo dinâmico
23
Conteúdos estáticos e
dinâmicos

24
Conteúdos estáticos e
dinâmicos

24
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
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
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
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
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
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
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
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
Conteúdos estáticos e
dinâmicos

Aplicação

Browser Servidor web


Usuários
30
Conteúdos estáticos e
dinâmicos

Aplicação

Browser Servidor web


Usuários
31
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
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
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
Arquitetura Cliente/
Servidor

35
Arquitetura Cliente/
Servidor

Aplicação

Browser Servidor web


Usuários

36
Arquitetura Cliente/Servidor
Rede

HTML

Aplicação
JavaScript CSS
Browser Servidor web

37
Arquitetura Cliente/Servidor
Rede

HTML

Aplicação
JavaScript CSS
Cliente Servidor

38
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
HTTP, HTML e
Navegadores Web

40
HTTP, HTML e
Navegadores Web
Rede

HTML

Aplicação
JavaScript CSS
Cliente Servidor

41
HTTP, HTML e
Navegadores Web
Rede
Como funciona a comunicação
entre Cliente/Servidor?

42
HTTP, HTML e
Navegadores Web
Rede
Como funciona a comunicação
entre Cliente/Servidor?

HTTP - HyperText Transport Protocol

43
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
HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0
Requisição HTTP
> Host: www.google.com
> Accept: */*

45
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
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
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
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
HTTP, HTML e
Navegadores Web

Completa especificação dos possíveis estados:


http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

50
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
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
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
HTTP, HTML e
Navegadores Web
• GET Tipos de requisição
HTTP
• POST
• DELETE
• PUT
• HEAD
54
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
HTTP, HTML e
Navegadores Web
> GET /?q=abobrinha HTTP/1.1
> User-Agent: curl/7.27.0
> Host: google.com
> Accept: */*

56
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
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
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
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
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
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.
HTTP, HTML e
Navegadores Web

Como o navegador utiliza o HTTP?


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: */*
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
HTTP, HTML e
Navegadores Web
<form
Como method=”GET” action=”http://google.com”>
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: */*
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
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” />
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
Dúvidas ?