Hoe verloopt de interactie tussen client en server…

De interactie vindt plaats via het HTTP/HTTPS-protocol, meestal in een "client-server"-model:

De client (browser) stuurt een verzoek. Het verzoek bevat:
- Methode (GET, POST, PUT, DELETE, enz.)
- URL van de opgevraagde bron
- Headers (informatie over de client, datatypes, autorisatie, enz.)
- Verzoekbody (voor methoden zoals POST, met gegevens)
De server verwerkt het verzoek.
- Ontvangt en analyseert het verzoek.
- Bepaalt de bron en de operatie.
- Toegang tot gegevens (database, bestandssysteem, enz.), indien nodig.
- Vormt het antwoord.
De server stuurt het antwoord. Het antwoord bevat:
- HTTP-statuscode (200 OK, 404 Not Found, 500 Internal Server Error, enz.)
- Antwoordheaders (contenttype, caching, cookies, enz.)
- Antwoordbody (HTML, JSON, XML, afbeelding, enz.)
De client ontvangt en verwerkt het antwoord.
- Analyseert het antwoord.
- Toont de inhoud (bijvoorbeeld, rendert de HTML-pagina).
- Voert JavaScript uit, verwerkt gegevens.

Voorbeeld van een GET-verzoek:

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

Voorbeeld van een antwoord op een GET-verzoek:

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" }
]

Andere mechanismen worden ook gebruikt voor meer interactieve interactie:

WebSocket: Permanente bidirectionele verbinding voor realtime gegevensuitwisseling (bijvoorbeeld chat).
Server-Sent Events (SSE): Eenrichtingsverbinding van server naar client voor het ontvangen van een stroom updates.
Polling: De client stuurt periodiek verzoeken naar de server om te controleren op updates.
Long Polling: De client stuurt een verzoek, de server houdt het open tot er gegevens zijn of de timeout is bereikt, en stuurt dan het antwoord.

In de context van webapplicaties laadt de browser ook resources (CSS, JS, afbeeldingen) via aparte HTTP-verzoeken nadat de initiële HTML is ontvangen. JavaScript kan ook dynamisch extra verzoeken naar de API sturen (AJAX) om gegevens te verkrijgen of te verzenden zonder de pagina te herladen.

Hoe verloopt de interactie tussen client en server?