Wie das Web funktioniert

Clients und Server

Computer, die mit dem Internet verbunden sind, werden als Clients und Server bezeichnet. Ein vereinfachtes Diagramm, wie sie miteinander interagieren, könnte so aussehen:

• Clients sind die typischen internetverbundenen Geräte des Webnutzers (zum Beispiel Ihr Computer, der mit Ihrem WLAN verbunden ist, oder Ihr Telefon, das mit Ihrem Mobilfunknetz verbunden ist) und die auf diesen Geräten verfügbare Webzugriffssoftware (normalerweise ein Webbrowser wie Firefox oder Chrome).
• Server sind Computer, die Webseiten, Websites oder Apps speichern. Wenn ein Client auf eine Webseite zugreifen möchte, wird eine Kopie des Webseiten-Codes vom Server auf den Client heruntergeladen, wo sie vom Browser gerendert und dem Benutzer angezeigt wird.

Der folgende eingebettete Inhalt von Scrimba^{MDN Lernpartner} bietet weitere Informationen zu Clients und Servern, einschließlich eines Quiz und einer Diskussion.

Die anderen Teile des Werkzeugkastens

Die oben beschriebenen Clients und Server erzählen nicht die ganze Geschichte. Es gibt viele andere beteiligte Teile, und wir werden sie unten beschreiben.

Stellen Sie sich vor, das Internet ist eine Straße. Am einen Ende der Straße befindet sich der Client, der wie Ihr Haus ist. Am anderen Ende der Straße befindet sich der Server, der wie ein Geschäft ist, aus dem Sie etwas kaufen möchten.

Damit Daten hin und her fließen können, benötigen wir die folgenden Dinge:

• Ihre Internetverbindung: Ermöglicht es Ihnen, Daten im Internet zu senden und zu empfangen. Im Grunde ist es die Straße zwischen Ihrem Haus und dem Geschäft.

• TCP/IP: Transmission Control Protocol und Internet Protocol (TCP/IP) sind Kommunikationsprotokolle, die definieren, wie Daten über das Internet transportiert werden sollen. Dies ist wie die Transportmechanismen, die es Ihnen ermöglichen, eine Bestellung aufzugeben, zum Geschäft zu fahren und Ihre Waren zu kaufen. In unserem Beispiel ist dies wie ein Auto oder ein Fahrrad (oder wie auch immer Sie auf der Straße reisen könnten).

• DNS: Das Domain Name System (DNS) ist wie ein Adressbuch für Websites. Wenn Sie eine Webadresse in Ihren Browser eingeben, schaut der Browser im DNS nach, um die IP-Adresse der Website zu finden — die tatsächliche Adresse, an der sich der Server befindet — bevor es die Website abrufen kann (siehe DNS erklärt unten für weitere Informationen). Der Browser muss herausfinden, auf welchem Server die Website liegt, damit er HTTP-Nachrichten an den richtigen Ort senden kann (siehe unten). Dies ist wie das Nachschlagen der Adresse des Geschäfts, bevor Sie es besuchen.

• HTTP: Das Hypertext Transfer Protocol (HTTP) ist ein Anwendungsprotokoll, das eine Sprache definiert, mit der Clients und Server miteinander sprechen. Dies ist wie die Sprache, die Sie verwenden, um Ihre Waren zu bestellen. Siehe HTTP-Grundlagen unten.

• Dateien: Eine Website besteht aus vielen verschiedenen Dateien, die wie die verschiedenen Waren sind, die Sie im Geschäft kaufen. Diese Dateien gibt es in zwei Haupttypen:

  • Code: Websites bestehen hauptsächlich aus HTML, CSS und JavaScript — den verschiedenen Programmiersprachen, in denen Websites geschrieben sind, die der Browser interpretiert und zu einer Webseite zusammenstellt, um sie dem Benutzer anzuzeigen.
  • Assets: Dies ist ein Sammelbegriff für alle anderen Elemente, die auf einer Website erscheinen — wie Bilder, Musik, Videos, Word-Dokumente und PDFs — die kein Code sind, den der Browser interpretiert.

  Hinweis: Wie der Browser diese Dateien zu einer Webseite zusammenstellt, erfahren Sie später im Kurs, in Wie Browser Webseiten laden.

Was passiert also genau?

Wenn Sie eine Webadresse eingeben (die technisch Teil einer URL ist) in die Adressleiste Ihres Browsers, erfolgen die folgenden Schritte:

1. Der Browser geht zum DNS-Server und findet die reale Adresse des Servers, auf dem die Website liegt.
2. Der Browser sendet eine HTTP-Anforderungsnachricht an den Server und bittet darum, eine Kopie der Website an den Client zu senden. Diese Nachricht und alle anderen zwischen Client und Server gesendeten Daten werden über Ihre Internetverbindung mit TCP/IP gesendet.
3. Wenn der Server die Anfrage des Clients genehmigt, sendet der Server dem Client eine "200 OK"-Nachricht, die bedeutet „Natürlich können Sie sich diese Website ansehen! Hier ist sie“, und beginnt dann, die Dateien der Website als eine Reihe kleiner Teile, genannt Pakete, an den Browser zu senden.
4. Der Browser setzt die kleinen Teile zu einer vollständigen Webseite zusammen und zeigt sie Ihnen an.

DNS erklärt

Echte Webadressen (URLs) sind nicht die netten, einprägsamen Zeichenfolgen, die Sie in die Adressleiste eingeben, um Ihre Lieblingswebsites zu finden. Es sind spezielle Zahlen, die so aussehen: 192.0.2.172.

Dies wird als IP-Adresse bezeichnet und repräsentiert einen eindeutigen Ort im Web. Es ist jedoch nicht sehr leicht zu merken, oder? Deshalb wurde das Domain Name System erfunden. Dieses System verwendet spezielle Server, die eine von Ihnen in den Browser eingegebene Webadresse (wie mozilla.org) mit der realen (IP-)Adresse der Website abgleichen. Große Websites sind häufig auf mehreren Servern verfügbar, damit sie für verschiedene Nutzer weltweit effizient geladen werden. Daher kann die IP-Adresse je nach Standort variieren.

Sie können ein DNS-Abfrage-Tool verwenden, um die IP-Adressen einer Website zu finden. Gehen Sie beispielsweise zum NsLookup.io DNS-Abfragetool, geben Sie developer.mozilla.org ein und drücken Sie den Button.

Pakete erklärt

Früher haben wir den Begriff „Pakete“ verwendet, um das Format zu beschreiben, in dem die Daten zwischen Client und Server übertragen werden. Was meinen wir damit?

Wenn Daten über das Web gesendet werden, werden sie in mehreren kleinen Stücken, den sogenannten Paketen, gesendet. Jedes Paket enthält:

• Einen Header, der Details wie die IP-Adresse von Server und Client, die Paketnummer, die Gesamtzahl der Pakete in der Übertragung und Details zu den verwendeten Protokollen enthält.
• Einen Payload, der die tatsächlich im Paket gesendeten Daten enthält.

Es gibt mehrere Gründe, warum Daten in kleinen Paketen gesendet werden, aber am bedeutendsten:

• Sie gehen manchmal verloren oder werden beschädigt, und wenn dies geschieht, ist es schneller und einfacher, dass der Client die fehlenden Pakete anfordert, anstatt eine vollständige Datei.
• Die Pakete können über verschiedene Wege geleitet werden, was die Übertragung so effizient wie möglich macht und die Möglichkeit einer Netzwerkverlangsamung verringert — insbesondere wenn viele Benutzer gleichzeitig dieselbe Ressource anfordern. Die Pakete können außer der Reihenfolge ankommen, aber der Client kann die Informationen in den Headern der Pakete verwenden, um sicherzustellen, dass sie in der richtigen Reihenfolge zusammengesetzt werden.

HTTP-Grundlagen

HTTP verwendet eine einfache Sprache von Verben, um Aktionen wie das Stellen von Anfragen auszuführen (siehe HTTP-Anfragemethoden). Die HTTP-Methode GET ist die, die normalerweise verwendet wird, um HTTP-Anfragen der oben beschriebenen Art zu stellen. Zum Beispiel könnte eine Anfrage für die MDN-Startseite so aussehen:

GET /en-US/ HTTP/2

Host: developer.mozilla.org

Die vom Server gesendete Antwort könnte so aussehen:

HTTP/2 200

date: Tue, 11 Feb 2025 11:13:30 GMT
expires: Tue, 11 Feb 2025 11:40:01 GMT
server: Google frontend
last-modified: Tue, 11 Feb 2025 00:49:32 GMT
ETag: "65f26b7f6463e2347f4e5a7a2adcee54"
content-length: 45227
content-type: text/html

<!doctype html> ... (the 45227 bytes of the requested web page HTML)

Die vollständige Antwort ist komplexer als diese, aber wir haben den größten Teil davon aus Gründen der Kürze ausgelassen. Die Hauptteile sind wie folgt:

HTTP/2 200

Die HTTP-Version, die der Server verwendet, um die Antwort zu senden, in diesem Fall HTTP/2, gefolgt von einem Statuscode, der angibt, ob die Anfrage erfolgreich war. 200 zeigt einen Erfolg an.

date, expires, etc.

HTTP-Header, die zusätzliche Informationen über die Antwort enthalten (beachten Sie, dass Anfragen auch Header haben können), die zusätzliche Informationen liefern und/oder ihr Verhalten modifizieren.

<!doctype html>, etc.

Der Antwortkörper, der in diesem Fall das HTML-Dokument der MDN-Startseite enthält.

Andere Statuscodes

Oben haben wir den 200 Statuscode kennengelernt, der anzeigt, dass die HTTP-Anfrage erfolgreich war. Es gibt viele HTTP-Statuscodes mit spezifischen Bedeutungen und Verwendungen, aber Sie werden nur einige häufig sehen:

301

Die angeforderte Ressource wurde dauerhaft an einen neuen Ort verschoben, der in der Antwort angegeben ist. Dies wird verwendet, um Inhalte umzuleiten, wenn sie verschoben werden.

400

Der Server kann die Anfrage nicht verarbeiten. Dies geschieht normalerweise, wenn die Anfrage nicht in einem Format vorliegt, das der Server versteht, oder Fehler enthält.

403

Der Server gibt dem Client keinen Zugriff auf die angeforderte Ressource. Dies geschieht normalerweise, wenn der Server weiß, wer der Client ist, aber er keine Berechtigung hat, auf die angeforderte Seite zuzugreifen.

404

Der Server kann die angeforderte Ressource nicht finden. Dieser Status wird häufig zurückgegeben, wenn die URL falsch ist oder wenn Inhalte gelöscht werden, ohne eine Umleitung einzurichten.

503

Die Anfrage kann aufgrund eines Problems mit dem Server nicht bearbeitet werden. Dies ist häufig der Fall, wenn Server wegen Wartungsarbeiten offline sind, und es wird erwartet, dass es vorübergehend ist.

Bestandteile einer URL

Technisch gesehen bilden Webadressen, die Sie in die Adressleiste des Browsers eingeben, einen Teil von Uniform Resource Locators (URLs). URLs definieren die Standorte einzigartiger Ressourcen im Internet.

Eine URL ist eine Webadresse plus ein Protokoll: Wenn Sie beispielsweise einen neuen Tab in Ihrem Browser öffnen, developer.mozilla.org in die Adressleiste eingeben und Eingabe/Return drücken, werden Sie zu einer URL wie der folgenden umgeleitet:

https://mdn.go-mizu.dev/en-US/

Die Hauptbestandteile der URL sind:

https

Das verwendete Protokoll, um die Anfrage zu senden. In diesem Fall verwenden wir HTTPS, ein sicheres Version von HTTP, das verhindert, dass schlechte Menschen Ihre Daten lesen, während sie transportiert werden. Im modernen Web benutzt praktisch jeder Server HTTPS, sodass, wenn Sie es nicht explizit hinzufügen, der Browser davon ausgeht, dass Sie es verwenden, und fügt es für Sie hinzu.

developer.mozilla.org

Der Domainname der URL, der den übergeordneten Standort des Servers repräsentiert, zu dem Sie sich verbinden. In diesem Fall ist die von Ihnen eingegebene Webadresse gleich dem Domainnamen, aber das ist nicht immer der Fall — Sie könnten eine kompliziertere Webadresse eingeben. Beachten Sie, dass der Teil developer eine Subdomain (ein eigenständiger Inhaltsbereich) der Mozilla-Domain mozilla.org ist. Es gibt andere Subdomains auf der Mozilla-Website, die eigenständige Inhalte hosten — siehe zum Beispiel support.mozilla.org und bugzilla.mozilla.org.

/en-US/

Der Pfad zur Ressource auf dem Server, auf den Sie zugreifen. MDN hält alle seine US-englischen Inhalte in einem Ordner namens en-US, auf den diese URL zeigt.

Wenn Ihr Browser standardmäßig auf Englisch einstellen ist, dann ist dies die URL, zu der Sie weitergeleitet werden, wenn Sie developer.mozilla.org eingeben. Wenn Ihr Browser so eingestellt ist, dass er standardmäßig eine andere Sprache bevorzugt, die von MDN unterstützt wird, wie zum Beispiel Französisch, werden Sie stattdessen zu einer anderen URL umgeleitet, wie https://mdn.go-mizu.dev/fr/. Dies ist nicht standardmäßig für jede Website verfügbar; die MDN-Entwickler haben MDN so eingerichtet, dass es den Menschen ermöglicht wird, leicht auf die von ihnen bevorzugte Sprache zuzugreifen.

Siehe auch

• Wie das Internet funktioniert

Credit

Straßenfoto: Street composing, von Kevin Digga.

• Übersicht: Webstandards
• Weiter