{ FJS26 · v43 }
Hur webben
hämtar data
Klient och server, request och response, och varför vi börjar med GET
20 oktober 2026 · 9.15–12.00 · Distans via Zoom
ÖVERSIKT
Innehåll
Klient och server
Vem som frågar, och vem som svarar.
Varje gång en sida laddas har någon frågat, och någon har svarat.
01 · TVÅ PARTER
Klient och server
Två datorer med var sitt jobb.
Klienten
Den som frågar. Oftast webbläsaren. Det är här vår JavaScript körs.
Servern
Den som svarar. En dator någon annanstans som har det vi vill ha: HTML, bilder, data.
01 · ETT VARV
Vad händer när du skriver en URL?
- Webbläsaren (klienten) skickar en request till servern.
- Servern tar emot den och tar reda på vad som efterfrågas.
- Servern skickar tillbaka en response.
- Webbläsaren visar svaret. Hänvisar HTML:en till CSS, bilder eller skript blir det en ny request för varje fil.
HTTP
HyperText Transfer Protocol. Reglerna för hur klienten frågar och hur servern svarar.
- Ett gemensamt språk, så att vilken webbläsare som helst kan prata med vilken server som helst.
- HTTPS är samma sak, fast krypterat. Det är det ni ser i nästan alla URL:er.
Request och response
Vad som faktiskt skickas fram och tillbaka.
02 · FRÅGAN
En request innehåller
Metod
Vad vi vill göra. Till exempel GET: ge mig det här.
URL
Vart frågan ska, och vad vi vill ha.
Headers
Extra information om frågan, till exempel vilket format vi förstår.
Body
Data vi skickar med. Tom vid GET, vi skickar inget, vi hämtar.
02 · SVARET
En response innehåller
Statuskod
Hur det gick, som ett tal. 200 betyder att allt gick bra.
Headers
Information om svaret, till exempel att det är JSON.
Body
Själva innehållet. HTML, en bild eller den data vi bad om.
02 · STATUSKODER
Första siffran säger mest
2xx · Det gick bra
200 OK. Här är det du bad om.
3xx · Titta någon annanstans
301. Det du söker har flyttat.
4xx · Fel hos klienten
404 Not Found. Fel URL, eller så finns det inte.
5xx · Fel hos servern
500. Frågan var rätt, men servern klarade inte av den.
Titta själv
< Nätverksfliken >
Öppna DevTools och fliken Network. Ladda om en sida. Klicka på ett anrop och leta upp metoden, URL:en och statuskoden. Hitta ni något som inte är 200?
Tid
[ ca 10 min ]
Mål
Ni har sett en riktig request och response med egna ögon.
Metoderna
Metoden säger vad vi vill att servern ska göra.
GET
Ge mig det här. Klienten hämtar något och ändrar ingenting på servern.
- Det är det webbläsaren gör när du skriver en URL eller klickar på en länk.
- Det är också det
fetch()gör om du inte säger något annat. - Det är den enda metoden vi använder nu.
03 · DE ANDRA
Det finns fler metoder
De vanligaste, och vad de betyder.
GET
Hämta. Läs data, ändra inget.
POST
Skapa. Skicka ny data, till exempel ett formulär eller en ny användare.
PUT / PATCH
Uppdatera. Ändra något som redan finns.
DELETE
Ta bort. Radera något på servern.
03 · VARFÖR BARA GET NU?
Vi börjar med att läsa
- Publika API:er låter vem som helst läsa, men sällan skriva.
- För att skapa, ändra eller ta bort behövs oftast inloggning och en server som är vår egen.
- GET räcker för allt vi bygger i u02 och quiz-appen.
- POST, PUT och DELETE kommer vi till i nästa kurs, men främst i kursen Fullstackutveckling.
Nu: bara GET. Resten kommer.
Vidare till fetch()
Samma request, fast från vår egen kod.
04 · KOPPLINGEN
fetch() är en GET-request
Det webbläsaren gör åt oss när vi skriver en URL kan vi göra själva från JavaScript.
fetch(url)skickar en GET-request till URL:en.- Servern svarar med statuskod, headers och body, precis som i nätverksfliken.
- Svaret kommer inte direkt. Därför behöver vi
asyncochawait. - Bodyn är oftast JSON. Det är nästa sak vi tittar på.
SAMMANFATTNING
Det här tar vi med oss
- Klienten frågar, servern svarar. Klienten tar alltid initiativet.
- En request har metod, URL, headers och ibland en body.
- En response har statuskod, headers och body.
- 2xx gick bra, 4xx är fel hos klienten, 5xx är fel hos servern.
- Vi använder GET nu. POST, PUT och DELETE kommer senare.