Fyrirlestur – HTTP og form

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Villumeðhöndlun

JavaScript hefur ekki eins villumeðhöndlun og HTML og CSS
Ef eitthvað brotnar eru líkur á að það hafi áhrif á allt
Verðum að hafa í huga

Has the page loaded yet? Did the HTTP request for the JavaScript succeed? Did the HTTP request for the JavaScript complete? Does the corporate firewall block JavaScript? Does their ISP or mobile operator interfere with downloaded JavaScript? Have they switched off JavaScript? Do they have add‐ons or plug‐ins installed which inject script or alter the DOM in ways you didn’t anticipate? Is the Content Delivery Network up?

—Everyone has JavaScript, right?

Unobtrusive JavaScript

Alveg eins og við aðskiljum útlit frá efni viljum við aðskilja forrit frá efni.

Tengt progressive enhancement er hugtakið unobtrusive JavaScript.

Aðskilnaður hegðunar frá markupi
Sem minnst fótspor — ekki skilgreina í global scope
Athuga hvort virkni sé studd og þá bæta henni við

Bæta hegðun við og virka án hennar – ekki festa atburð við element
- <a href="..." class="enhance" ~~onclick=”handleClick()~~">
- document.querySelector('enhance'). addEventListener('click', handleClick)

1. Identify core functionality.

2. Make that functionality available using the simplest possible technology.

3. Enhance!

—Resilient Web Design, chapter 6: Steps

Some designers have misunderstood progressive enhancement to mean that all functionality must be provided to everyone. It’s the opposite. Progressive enhancement means providing core functionality to everyone. After that, it’s every browser for itself.

—Resilient Web Design, chapter 5: Layers

Verkefni

Í verkefnum sem við leysum með JavaScript erum við stundum að setja upp efni eftir að vefur hleðst inn
Ef svona verkefni væru leyst í raunveruleikanum myndum við hafa server-side rendering
- Höfum efni til staðar í HTML í byrjun—krefjumst ekki JavaScript
Viðfangsefni í vefforritun 2

Framendi VS bakendi

Mynd af framendi vs bakenda

Sagan

Búið til af Tim Berners-Lee í sambandi við HTML
Fyrst skjalað sem útgáfa 0.9 1991
RFC 1945 skilgreinir HTTP 1.0 árið 1996
RFC 2616 skilgreinir HTTP 1.1 árið 1999

HTTP 1.1 ennþá mikið notað í dag
- HTTP 2 þó að sækja í sig veðrið, er um 49% af traffík í okt 2020!
Notar TCP/IP fyrir gagnafluttning
DNS (Domain Name System) þýðir IP-tölur í lén

Request—response

HTTP byggir á request—response milli client og server
Client sendir request á server
Server framkvæmir aðgerðir og sendir response á client

Server

Server getur einfaldlega sent til baka HTML, CSS og JavaScript skrár sem finnast, t.d. eins og á heimasvæði HÍ
Eða framkvæmt flóknari aðgerðir, sótt gögn í gagnagrunn, sett saman vef með forriti
- t.d. haus, efni og fótur síðu dýnamískt búið til

Request

Request er:
- Request line: aðferð (method) sem notuð er, auðlind og útgáfu af HTTP
- Headers fyrir aðgerð, a.m.k. Host
- Tóm lína
- Hugsanlega gögn

Request – dæmi

GET / HTTP/1.1
Host: example.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive

Response

Response er:
- Status lína: útgáfa af HTTP, staða sem tala og staða sem texti
- Headers frá þjóni
- Tóm lína
- Hugsanlega gögn

Response – dæmi

HTTP/1.1 200 OK
Content-Encoding: gzip
Accept-Ranges: bytes
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Mon, 25 Oct 2021 08:39:07 GMT
Expires: Mon, 01 Nov 2021 08:39:07 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Vary: Accept-Encoding
Content-Length: 648

<html>
...

HTTP aðferðir

HTTP Request þarf að hafa aðferð (method) tilgreinda
- Stundum kölluð sögn
HTTP 1.0 og 1.1 skilgreina þær flestar sem notaðar eru í dag

GET – biður um síðu, lang mest notaða aðferðin!
POST – Biður server um að taka við gögnum í request sem nýrri einingu. T.d. nýtt svar við umræðuþræði eða ný gögn í gagnagrunni
PUT, DELETE o.fl. notað í vefþjónustum, ekki á vefnum

Hausar – headers

Sendir bæði í request og response
Heiti og gildi í texta, aðskilið með tvípunkt
- Connection: close

Dæmi um request hausa

Accept – efnistýpur, content-types, sem eru samþykktar fyrir svar
Accept-Charset – Charset sem eru samþykkt í svari
Host – domain nafn sem beðið er um

Dæmi um response hausa

Date – Dagstími sem svar var sent
Server – Nafn þjóns
Content-Length – lengd svars í bætum
Content-Type – MIME týpa efnis og stafasett

Stateless

HTTP er hannað sem stöðulaus prótókoll
Server þarf ekki að geyma neinar upplýsingar á milli beiðna
Stöður geta þó verið geymdar á nokkra máta, förum ekki nánar í það

Stöðukóðar — status codes

Þegar þjónn svarar með response gefur hann upp stöðukóða, sem tölu og lesanlegan texta

1xx – Til upplýsinga
2xx – Gekk, success
3xx – Áframsending, redirection
4xx – Villa hjá client
5xx – Villa hjá server

Dæmi um stöðukóða

200 OK – staðlað svar fyrir HTTP request sem gengur upp
201 Created – request gekk upp og ný auðlind var búin til
301 Moved Permanently – þessi og allar frekari requests eiga að fara á nýtt URI

400 Bad Request – Einhver villa í syntax hjá client
404 Not Found – Fannst ekki en gæti birst í framtíðinni
500 Internal Server Error – Almenn villa

URL

Staðsetja og skilgreina hvernig við sækjum vefsíður yfir HTTP
Samanstanda af nokkrum pörtum
http://example.org/example.html?start=true#kafli2
Stundum er talað um URI, en í nýjum staðli er URL og URI það sama

HTTP aðferðir og `<form>`

Þegar við búum til <form> getum við skilgreint hvort við notum GET eða POST með method attribute
<form method="get"> sendir gögn með GET og setur allar breytur í query-string, t.d. http://example.org/?foo=bar
<form method="post"> sendir gögn með POST og setur allar breytur í request body

`<form method="get">`

<form method="get" action="">
  <label>
    Nafn: <input type="text" name="name">
  </label>
  <button>Senda</button>
</form>

`<form method="post">`

<form method="post" action="">
  <label>
    Name: <input type="text" name="name">
  </label>
  <button>Senda</button>
</form>

form