Webbserverprogrammering 1 · område 1 · lektion 2

Klient och server: vad händer vid en förfrågan

Sidan du behöver när du skriver inlämningen. Här står det som gicks igenom på lektionen, i den form du kan slå upp: adressens delar, statuskoderna och skillnaden mellan en fil som skickas och en sida som byggs.

Missade du lektionen?

Passet var en genomgång utan eget kodande. Allt som sades finns här. Räkna med en och en halv timme:

Läs avsnitt 1 till 5 i ordning. De bygger på varandra.
Öppna nätverksfliken med F12 på en riktig sajt och läs en förfrågan och dess svar rad för rad, som avsnitt 3 visar. Det gjorde klassen tillsammans i tjugo minuter, och det går inte att ersätta med att läsa om det.
Framkalla en 404 själv: lägg till skräp sist i en adress och ladda om. Raden i nätverksfliken blir röd.
Läs igenom uppgiften. Den delades ut på det här passet.

Uppgiften kräver en egen exempeladress med både frågesträng och fragment. Börja leta redan nu — det tar längre tid än man tror.

1. Adressens fem delar

En webbadress är inte en sträng utan fem delar, och varje del har ett jobb.

Del	I exemplet	Vad den gör
Protokoll	`https://`	Hur samtalet ska föras. `s` betyder krypterat — utan det kan vem som helst på nätverket läsa allt som skickas.
Domännamn	`www.scb.se`	Vilken server som ska svara.
Sökväg	`/hitta-statistik/`	Vad på den servern du frågar efter.
Frågesträng	`?fraga=befolkning`	Extra värden till servern. Börjar med `?` och flera delas med `&`.
Fragment	`#resultat`	Var på sidan webbläsaren ska hoppa.

Fragmentet skickas aldrig till servern

Allt efter # stannar i webbläsaren. Servern får bara sökvägen och frågesträngen. Du kan se det själv: öppna nätverksfliken, ladda om en sida med fragment i adressen och titta på vad förfrågan faktiskt innehåller.

Till inlämningen

Du ska använda en egen exempeladress som har både frågesträng och fragment, och förklara varje del. Hittar du ingen: sök på något på en sajt du använder, så får du en frågesträng.

2. DNS

Datorn kan inte skicka något till ett namn — den behöver en IP-adress. DNS är översättningen från det ena till det andra. Prova själv i terminalen:

System	Kommando
De flesta	`nslookup www.scb.se`
PowerShell, om nslookup saknas	`Resolve-DnsName www.scb.se`

Svaret sparas en stund på din dator. Därför är första besöket på en ny domän långsammare än nästa.

3. Förfrågan och svar

HTTP är text. Det är hela hemligheten — du skulle kunna skriva det för hand.

Så här ser en förfrågan ut:

Rad	Vad den betyder
`GET /hitta-statistik/ HTTP/1.1`	Metoden först. `GET` betyder ge mig, `POST` betyder här kommer data.
`Host: www.scb.se`	Vilken sajt som avses. Många sajter kan ligga på samma IP-adress.
`Accept: text/html`	Vad webbläsaren helst vill ha tillbaka.
`User-Agent: Mozilla/5.0`	Vilken webbläsare som frågar.

Och så här ser svaret ut:

Rad	Vad den betyder
`HTTP/1.1 200 OK`	Statuskoden. Hur det gick.
`Content-Type: text/html; charset=utf-8`	Vad innehållet är, och vilken teckenkodning det använder.

Prova själv

Öppna DevTools med F12, gå till fliken Network och ladda om sidan. Klicka på det första anropet. Räkna sedan raderna i listan — en sida är sällan ett anrop. Det är ett för HTML:en, och sedan ett till för varje bild, stilmall och skript.

4. Statuskoder

Tre siffror i svaret som säger hur det gick. Första siffran avgör sorten. Sök i tabellen, eller läs den rakt igenom.

Sök bland statuskoderna

12 rader

Kod	Namn	Vad den betyder
2xx	Lyckades	Servern gjorde det du bad om.
200	OK	Här är det du bad om. Den vanligaste koden på webben.
201	Created	Något nytt skapades, till exempel efter en POST. Kommer i område 6.
3xx	Omdirigering	Det du sökte finns någon annanstans.
301	Moved Permanently	Har flyttat för gott. Webbläsaren kommer ihåg det.
302	Found	Ligger tillfälligt någon annanstans. Fråga här igen nästa gång.
4xx	Fel av den som frågar	Förfrågan var något fel på.
400	Bad Request	Servern förstod inte förfrågan.
403	Forbidden	Du får inte se det här, även om det finns.
404	Not Found	Ingenting hittades på den sökvägen.
5xx	Serverfel	Servern misslyckades. Som utvecklare är det ditt fel.
500	Internal Server Error	Serverfel: koden kraschade under körningen.

Prova själv

Lägg till skräp sist i adressen till en sajt och ladda om med nätverksfliken öppen. Raden blir röd och statuskoden står i listan.

Till inlämningen

Du ska förklara minst fyra statuskoder, varav minst två som inte finns i guiden. Tabellen ovan räcker för att välja — men skriv förklaringen med egna ord och ta med vad koden betyder för besökaren.

5. Statiskt och dynamiskt

Skillnaden hela kursen står på.

	Statiskt	Dynamiskt
Vad du frågar efter	`om-oss.html`	`/mina-sidor`
Vad servern gör	Läser filen från disk och skickar den	Kör kod, hämtar data, bygger HTML och skickar
Finns sidan innan?	Ja, som en fil	Nej. Den uppstod i samma stund
Ser alla samma sak?	Ja, samma fil varje gång	Nej, innehållet kan skilja per besökare och tillfälle

Webbläsaren märker ingen skillnad. Den får HTML i båda fallen — jobbet gjordes på servern, och det syns inte i sidkällan att något räknades ut.

Till inlämningen

Minst en av dina sidor ska skapa sitt innehåll på servern vid varje förfrågan, så att det ändras när du laddar om. Ett klockslag du skrivit in för hand är inte ett bevis — ladda om fem gånger och kontrollera att värdet faktiskt ändras.

6. Andra språk gör samma jobb

C# är inte det enda sättet. Poängen är inte att välja rätt, utan att veta att valet finns — och att det du lär dig går att flytta med sig.

Språk	Var det används	Karaktär
PHP	WordPress och en stor del av webben	Låg tröskel, väldigt spritt
Node.js	Startups, API:er	Samma språk som i webbläsaren
Python	Django, Flask, mycket data och AI	Läsbar syntax
Java	Bank och stora system	Stort och stabilt
C# / .NET	Offentlig sektor, industri, spel	Kompilerat, typat, stort ramverk

Kursen använder C# och Blazor för att kompilatorn hittar felen innan koden körs, verktygen är bra, och samma språk bär hela vägen från sida till databas.

7. Orden

Orden från det här passet. De används i uppgiften utan förklaring.

Ordträning

Ord	Betyder
klient	Den som frågar. Oftast webbläsaren.
server	Den som svarar. Programmet som lyssnar och skickar tillbaka en sida.
HTTP	Reglerna för hur frågan och svaret ska se ut. Ren text.
HTTPS	Samma sak, men krypterat så att ingen på vägen kan läsa med.
request	Förfrågan från klienten till servern.
response	Serverns svar: statuskod, headers och innehåll.
header	Rad med extra information i en förfrågan eller ett svar.
GET	Metoden som betyder ge mig det här.
POST	Metoden som betyder här kommer data att ta emot.
statuskod	Tresiffrigt tal i svaret som säger hur det gick.
DNS	Översättningen från domännamn till IP-adress.
IP-adress	Numret som pekar ut en dator på nätet.
frågesträng	Delen av adressen efter `?`. Extra värden till servern.
fragment	Delen efter `#`. Stannar i webbläsaren, skickas aldrig.
teckenkodning	Hur bokstäver blir till bytes. `utf-8` är den som klarar åäö.
statisk sida	En färdig fil som skickas som den är.
dynamisk sida	En sida som byggs av kod i samma stund som någon frågar.