MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Hoe werkt het Web biedt een vereenvoudigde kijk op wat er gebeurt als je een webpagina in je browser op je computer of telefoon bekijkt.

Op korte termijn is deze theorie niet van essentieel belang maar als je webcode wil schrijven, is het echt beter om te begrijpen wat er in de achtergrond gebeurt. Het zal niet lang duren voor je echt van die kennis begint te profiteren.

Clienten en servers

Computers die met het web verbonden zijn, noemen we clienten eservers. Zo ziet een eenvoudig diagram van de interactie tussen hen beiden er uit:

  • Clienten zijn de typische toestellen van een webgebruiker die met het internet verbonden zijn. (Je computer is bijvoorbeeld verbonden met je Wi-Fi, of je telefoon met je mobiele netwerk). De term slaat ook op de software die deze apparaten gebruiken om zich met het web te verbinden (meestal een webbrowser zoals Firefox of Chrome).
  • Servers zijn computers waarop zich webpaginas, sites of apps bevinden. Als een een client een webpagina wil openen (dat is het verzoek of request in het Engels), wordt een kopie van de webpagina van de webserver naar de client gedownload en vervolgens weergegeven in de browser van de gebruiker (dat is het antwoord of de response). 

De andere instrumenten in de gereedschapskist

De client en de server die we hierboven hebben beschreven vertellen niet het volledige verhaal. Er zijn nog vele andere gereedschappen bij betrokken en die beschrijven we hieronder.

Voorlopig kunnen we het web voorstellen als een weg. Aan het einde van de weg is de client en die ziet eruit als je huis. Aan de andere kant is de server en die is een winkel waar je iets wil kopen.

 Behalve de client en de server moeten we ook hallo zeggen aan: 

  • Je internetverbinding: Die laat je data versturen en ontvangen op het web. Die kan je voorstellen als de straat tussen je huis en de winkel. 
  • TCP/IP: Transmission Control Protocol and Internet Protocol zijn communicatieprotocollen die bepalen hoe data door het web moet reizen. Ze zijn als de transportmechanismen die je een bestelling laten plaatsen, je naar de winkel laten gaan en inkopen doen. In ons voorbeeld zijn ze als een auto of een fiets of eender welk vervoermiddel dat je van A naar B helpt.
  • DNS: Domain Name System Servers zijn de adresboeken van websites. Als je een webadres in je browser typt, kijkt de browser eerst in de DNS voor hij de website ophaalt. De browser moet er eerst achterkomen op welke server de website bestaat, zodat hij HTTP-berichten naar de juiste plaats kan versturen (zie hieronder). Het is alsof hij het adres van de winkel opzoekt, zodat jij ernaar toe kan gaan. 
  • HTTP: Hypertext Transfer Protocol is een applicatie protocol die een taal voor clienten en servers definiëert zodat ze met elkaar kunnen praten. Het is als de taal die je gebruikt om je artikelen te bestellen.
  • Component files: (componentbestanden) Een website bestaat uit vele verschillende bestanden, die lijken op de artikelen die je in de winkel koopt. Deze bestanden bestaan voornamelijk uit deze twee  types:
    • Codebestanden: Websites worden voornamelijk van HTML, CSS en JavaScript gebouwd, hoewel je later nog andere technologieën zal tegenkomen.
    • Assets: Dit is een verzamelnaam voor al de andere onderdelen die samen een website maken. Het zijn afbeeldingen, muziek, video, Word documenten en PDFs. (Ik heb lang naar een geschikte vertaling voor het woord 'assets' gezocht. In het Nederlands betekent assets 'activa', 'vermogen', 'aanwinsten'.)

Dus wat er gebeurt er nu precies?

Stel dat je een webadres in je browser typt (analoog met: stel dat jij naar de winkel stapt), wat gebeurt er dan?

  1. De browser gaat naar de DNS-server en vindt het echte adres van de server waar de website op leeft  (je vindt het adres van de winkel).
  2. De browser zendt een bericht met HTTP-verzoek erin naar de server en vraagt om een kopie van de website naar de client te sturen (je gaat naar de winkel en je bestelt je artikelen). Dit bericht en alle andere data die is verstuurd tussen de client en de server, wordt langs je internetverbinding met TCP/IP verstuurt.
  3. Als de server het verzoek van de client goedkeurt, stuurt de server een "200 OK" boodschap. Die betekent zoiets als: "maar natuurlijk kan je die website bekijken! Hier is hij.". Dan begint de website bestanden te versturen die in een serie kleine brokken (chunks in het Engels) worden verdeeld. Die brokken noemen we data packets (datapaketjes). (De winkel geeft je je artikelen en je neemt ze mee naar huis).
  4. De browser stelt de kleine brokken samen tot een volledige website en toont die aan jou. (de goederen arriveren aan je deur  — nieuw blinkend materiaal, mega!).

DNS uitgelegd

Echte webaddressen zijn niet de leuke makkelijk te onhouden strings die je in je adresbalk typt om je favoriete websites te vinden. Een webadres is een serie getallen zoals deze hier : 63.245.217.105.

Zo'n getallenreeks noemen we een IP address en het staat voor een unieke locatie op het web. Maar het is niet echt gemakkelijk om te onthouden en daarom zijn Domain Name Servers uitgevonden. Dat zijn speciale servers die het webadres dat je in je browser intypt (zoals "mozilla.org") aan het echte (IP)-adres van de website vastkoppelen.

Websites kunnen via hun echte IP-adres worden bereikt. Probeer de website van Mozilla te openen door 63.245.217.105 in de adresbalk van een nieuwe tabpagina in je browser te typen.

A domain name is just another form of an IP address

Paketten uitgelegd

Eerder hebben we de term "paketten" gebruikt om het formaat te beschrijven waarin de data van de server naar de client worden verstuurd. Wat bedoelen we hier? Het komt erop neer dat data die doorheen het web worden verstuurd, als duizenden kleine brokken worden verzonden zodat vele verschillende webgebruikers tegelijkertijd dezelfde website kunnen downloaden. Als een website als een enkele brok zou worden verstuurd, zou slechts één gebruiker de website kunnen downloaden en zou de rest zijn beurt moeten afwachten. Dat zou het web heel inefficiënt maken en niet erg aangenaam in het gebruik.

Zie ook

Illustratie

Straatfoto: Street composing, door Kevin D.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: mientje
 Laatst bijgewerkt door: mientje,