Skip to content
ICT Fusion Knowledgebase

HTTP: De Taal van het Web

Wanneer een Client en Server communiceren, gebruiken ze het HTTP-protocol. Dit werkt met een Request (vraag) en een Response (antwoord).

GET vs POST

  • GET: Wordt gebruikt om data op te halen. Parameters staan vaak in de URL (bijv. google.com/search?q=hbo-ict).
  • POST: Wordt gebruikt om data te sturen. De data zit verstopt in de Body van het bericht. Dit is wat we gebruiken voor LLM’s, omdat prompts erg lang kunnen zijn.

POST zonder browser

Bij een POST request stuur je data in de body. Dit kan niet zomaar via een browser, maar gelukkig hebben we tools zoals curl en httpie om dit te doen.

cURL

curl is een command-line tool die al jaren bestaat. Als je een terminal hebt, heb je waarschijnlijk al curl geïnstalleerd. Windows gebruikers kunnen curl gebruiken via git bash of powershell.

Probeer cURL eens uit. Copy-paste dit in je terminal of command prompt:

curl -X GET https://fusion.hbo-ict-hva.nl

of met een POST request:

curl -X POST https://jsonplaceholder.typicode.com/posts -H "Content-Type: application/json" -d '{"title": "foo", "body": "bar", "userId": 1}'

Status Codes

De server geeft altijd een nummertje terug om te laten weten hoe het ging:

  • 200: Success!
  • 401: Unauthorized (Je bent je API-key vergeten).
  • 404: Not Found (Verkeerde URL/Endpoint).
  • 500: Server Error (De AI is gecrasht).

Interactief oefenen

Ga naar turlte.nl en probeer verschillende requests te maken. Lees de documentatie en probeer een GET en een POST request te maken. Bekijk de status codes die terugkomen en wat er in de response body staat.

Je merkt dat veel API’s JSON teruggeven. JSON is een gestructureerde manier om data te organiseren en het is makkelijk te lezen voor zowel mensen als machines.

JSON

JSON (JavaScript Object Notation) is een formaat om data te organiseren. Het gebruikt key-value pairs en is erg populair voor API’s.

{
  "name": "Alice",
  "age": 30,
  "city": "Amsterdam"
}

In dit voorbeeld is “name” een key en “Alice” is de value. JSON kan ook genest zijn, wat betekent dat een value zelf weer een object kan zijn:

{
  "name": "Bob",
  "age": 25,
  "address": {
    "street": "Main St",
    "city": "Rotterdam"
  }
}

JSON is de standaardtaal voor API’s omdat het lichtgewicht is en gemakkelijk te verwerken in verschillende programmeertalen. Wanneer je een API aanroept, krijg je vaak een JSON response terug die je kunt gebruiken in je applicatie.

Authenticatie

Voor veel websites heb je een gebruikersnaam en wachtwoord nodig. Voor API’s gebruiken we meestal een API-key. Dit is een lange, unieke code die je aan de server geeft om te bewijzen dat jij toestemming hebt om de API te gebruiken. Zonder een geldige API-key zal de server meestal een 401 Unauthorized status code teruggeven. Het is belangrijk om je API-key geheim te houden, want als iemand anders hem gebruikt, kunnen ze jouw quota opmaken of zelfs schade aanrichten.

Veiligheidstip

Deel je API-key nooit met anderen en zet hem niet in openbare code repositories zoals GitHub. Gebruik omgevingsvariabelen of geheime opslag om je API-keys veilig te bewaren.

Maak nooit direct vanuit je frontend code een API-aanroep naar een AI, omdat dit je API-key blootstelt aan iedereen die de broncode kan zien. Gebruik altijd een backend server, zoals python-flask of FastAPI als tussenpersoon om je API-key veilig te houden.

API’s gebruiken in je browser

Een API is eigenlijk “een website voor computers”. Sommige API calls kan je gewoon in je browser plakken, maar voor meer complexe requests (zoals POST met een body) heb je tools nodig zoals cURL of Postman.

Vanuit je eigen webpagina kan je ook API calls maken met JavaScript. Hier is een voorbeeld van hoe je een POST request maakt naar de Ollama API:

fetch('http://localhost:11434/api/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'gemma4:e2b',
    messages: [{ role: 'user', content: 'Hallo AI!' }],
    stream: false
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Let op CORS

Als je een API call maakt vanuit een webpagina, kan je tegen CORS (Cross-Origin Resource Sharing) problemen aanlopen. Dit is een beveiligingsmaatregel in browsers die voorkomt dat een webpagina zomaar verbinding maakt met een andere server. Om dit op te lossen, moet de server CORS-headers toestaan of moet je een proxy gebruiken.