{ 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.

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

02 · SVARET

En response innehåller

02 · STATUSKODER

Första siffran säger mest

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?

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.

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 async och await.
• 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.