Ga naar hoofdinhoud

JSON, REST & clientverzoeken

Tot nu bestudeerden we HTTP als protocol: de structuur van requests en responses. In dit hoofdstuk kijken we hoe JSON als body-formaat en REST als architectuurstijl samen met HTTP gebruikt worden. We sluiten af met hoe een client (browser, app of curl) een volledig verzoek opbouwt.

JSON

JSON is de standaard voor data-uitwisseling in HTTP-API's. Ter opfrissing de syntax:

{
"naam": "Robin",
"leeftijd": 21,
"actief": true,
"rollen": ["student", "beheerder"],
"adres": {
"stad": "Antwerpen",
"postcode": "2000"
}
}
TypeVoorbeeld
String"Hallo" (altijd dubbele aanhalingstekens)
Getal42, 3.14
Booleantrue, false
Nullnull
Array[1, 2, 3]
Object{"sleutel": "waarde"}
Content-Type bij JSON

Als je een JSON-body meestuurt in een request, moet je de header Content-Type: application/json toevoegen, anders weet de server niet hoe hij de bytes moet interpreteren.

REST

REST (Representational State Transfer) is een architectuurstijl voor het ontwerpen van web-API's. Een REST-API gebruikt HTTP zo als het bedoeld is: resource-gebaseerde URL's, de juiste HTTP-methoden voor elke actie, en statuscodes om het resultaat aan te geven.

Resource-gebaseerde URL's

In REST stelt een URL een zelfstandig naamwoord voor, een resource (ding), geen actie:

Goed (REST)Fout (niet-REST)
GET /gebruikersGET /getGebruikers
POST /gebruikersPOST /maakGebruikerAan
DELETE /gebruikers/42POST /verwijderGebruiker?id=42

CRUD op resources

ActieMethodeURLStatuscode
Alle gebruikers opvragenGET/gebruikers200 OK
Nieuwe gebruiker aanmakenPOST/gebruikers201 Created
Eén gebruiker opvragenGET/gebruikers/42200 OK
Gebruiker bijwerkenPUT / PATCH/gebruikers/42200 OK
Gebruiker verwijderenDELETE/gebruikers/42204 No Content

Query-parameters voor filtering en paginering

Query-parameters worden niet gebruikt voor CRUD-acties, maar voor filtering, sortering en paginering van een collectie:

GET /producten?categorie=laptops&prijs_max=1000&pagina=2&per_pagina=20

Een clientverzoek in de praktijk

curl: GET-request

curl https://jsonplaceholder.typicode.com/users/1

curl: POST-request met JSON-body

curl -X POST https://jsonplaceholder.typicode.com/posts \
-H "Content-Type: application/json" \
-d '{"title": "Mijn post", "body": "Inhoud hier.", "userId": 1}'
  • -X POST: methode instellen
  • -H "Content-Type: application/json": verplichte header voor JSON
  • -d '…': de request-body

Hoe een browser of fetch een verzoek opbouwt

Conceptueel doet fetch() in JavaScript (of eender welke HTTP-client) hetzelfde als curl:

  1. URL opbouwen (scheme + host + pad + query)
  2. Methode kiezen
  3. Headers toevoegen (Content-Type, Authorization, …)
  4. Body serialiseren (JSON-object → JSON-string)
  5. Request versturen over een TCP-verbinding

De server ziet een gewoon HTTP-request, of het nu van een browser, curl of een mobiele app komt, maakt niet uit. Dat is de kracht van het protocol: alle clients spreken dezelfde taal.

httpbin.org en jsonplaceholder
  • httpbin.org: een echo-API die je request terugkaatst. Handig om te zien wat je verstuurt: curl https://httpbin.org/get, curl -X POST https://httpbin.org/post -d 'test'.
  • jsonplaceholder.typicode.com: gesimuleerde REST-API voor oefening (/posts, /users, /todos).

Alles samen: een volledig verzoek ontleed

Je hebt nu alle bouwstenen gezien. Hieronder staat een volledig HTTP-uitwisselingsvoorbeeld: een POST-request met een JSON-body en de bijhorende response. Elk onderdeel is gelinkt aan het hoofdstuk waar het uitgelegd werd.

Request (client → server)

POST /api/gebruikers HTTP/1.1 ← methode (methoden) + URL/pad (uri-en-url) + versie (intro)
Host: api.example.com ← verplichte header: domein (headers)
Content-Type: application/json ← header: formaat van de body (headers)
Content-Length: 47 ← header: grootte van de body in bytes (headers)
Authorization: Bearer mijntoken ← header: identificatie bij elk request (headers, stateless → cors)

{"naam": "Robin", "email": "r@ap.be"} ← body in JSON-formaat (dit hoofdstuk)

Response (server → client)

HTTP/1.1 201 Created ← statuslijn: versie (intro) + statuscode (statuscodes)
Content-Type: application/json ← header: formaat van de response-body (headers)
Content-Length: 72 ← header: grootte van de body (headers)

{"id": 5, "naam": "Robin", "email": "r@ap.be"} ← body: de aangemaakte resource in JSON (dit hoofdstuk)

Dit is wat er gebeurt telkens als een app, browser of curl een API-call maakt, elke keer opnieuw, want HTTP is stateless.

Onthoud
  • JSON is het standaardformaat voor HTTP-API-data: sleutel-waardeparen met dubbele aanhalingstekens; Content-Type: application/json is verplicht bij een JSON-body.
  • REST gebruikt resource-gebaseerde URL's (zelfstandig naamwoorden) en de juiste HTTP-methoden voor elke CRUD-actie.
  • Query-parameters zijn voor filtering en paginering, niet voor CRUD-acties.
  • curl -X POST -H "Content-Type: application/json" -d '…' stuurt een JSON-body naar een API.