Como ocorre a interação entre o cliente e o servidor…

A interação ocorre através do protocolo HTTP/HTTPS, geralmente num modelo "cliente-servidor":

O cliente (navegador) envia uma solicitação. A solicitação contém:
- Método (GET, POST, PUT, DELETE, etc.)
- URL do recurso solicitado
- Cabeçalhos (informações sobre o cliente, tipo de dados, autorização, etc.)
- Corpo da solicitação (para métodos como POST, com dados)
O servidor processa a solicitação.
- Recebe e analisa a solicitação.
- Determina o recurso e a operação.
- Acede aos dados (base de dados, sistema de ficheiros, etc.), se necessário.
- Forma a resposta.
O servidor envia a resposta. A resposta contém:
- Código de estado HTTP (200 OK, 404 Not Found, 500 Internal Server Error, etc.)
- Cabeçalhos da resposta (tipo de conteúdo, cache, cookies, etc.)
- Corpo da resposta (HTML, JSON, XML, imagem, etc.)
O cliente recebe e processa a resposta.
- Analisa a resposta.
- Mostra o conteúdo (por exemplo, renderiza a página HTML).
- Executa JavaScript, processa dados.

Exemplo de pedido GET:

GET /api/users HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (...)
Accept: application/json

Exemplo de resposta a um pedido GET:

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 150
Cache-Control: max-age=3600

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

Também são utilizados outros mecanismos para uma interação mais interativa:

WebSocket: Conexão bidirecional contínua para troca de dados em tempo real (por exemplo, chats).
Server-Sent Events (SSE): Conexão unidirecional do servidor para o cliente para receber um fluxo de atualizações.
Polling: O cliente envia periodicamente pedidos ao servidor para verificar atualizações.
Long Polling: O cliente envia um pedido, o servidor mantém-no aberto até que haja dados ou o tempo limite seja atingido, depois envia a resposta.

No contexto de aplicações web, o navegador também carrega recursos (CSS, JS, imagens) através de pedidos HTTP separados após receber o HTML inicial. O JavaScript também pode enviar pedidos adicionais dinamicamente à API (AJAX) para obter ou enviar dados sem recarregar a página.

Como ocorre a interação entre o cliente e o servidor?