Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- kommunikation:www:start [2024/02/17 17:13] – [Die wichtigsten Responseparameter] Martin Pabst
+++ kommunikation:www:start [2024/02/18 12:28] (aktuell) – Martin Pabst
@@ Zeile 12: / Zeile 12: @@
 Das Grundprinzip des WWW wird Ihnen allen vertraut sein. In den folgenden Abschnitten werden wir auf wichtige Details und aktuelle technische Entwicklungen näher eingehen.
-===== HTTP =====
+===== "Web 2.0" =====
-<WRAP center round info 60%>
+Klassische statische Webseiten können den Inhalt des Browserfensters nur ändern, indem der Nutzer auf einen Link klickt und daraufhin eine neue Seite geladen wird. Das ist ineffizient und langsam, denn in vielen Fällen ist erwünscht, dass sich die Seite bei User-Interaktion nur geringfügig ändert. Klickt der User besipielsweise auf den "Kaufen"-Button neben einer Ware, so ist es sehr ineffizient, deswegen gleich die ganze Seite neu zu laden. \\ \\
-HTTP (HyperText Transfer Protocol) ist das Standardübertragungsprotokoll im WWW. Es baut in der Regel auf TCP auf. Jede HTTP-Interaktion zwischen Client und Server besteht aus einer Anfrage des Clients und einer Antwort des Servers.
+Seit den frühen 2000'er Jahren ist es üblich, Webseiten mit Programmen in der Sprache Javascript anzureichern, die im Kontext der Webseite innerhalb des Browsers ausgeführt werden und weitreichende Möglichkeiten zur Veränderung der dargestellten Webseite im Browser und zur Interaktion mit dem Nutzer haben. Bei jeder Interaktion mit den Nutzer wird dann eine Javascript-Methode aufgerufen, die Darstellung der Webseite im Browser verändert und gegebenenfalls im Hintergrund Requests an den Webserver senden kann, damit dieser über die User-Aktion unterrichtet wird. Im obigen Beispiel (User klickt auf den "Kaufen"-Button neben einer Ware) würde ein Javascript-Programm aufgerufen, das beispielsweise die Darstellung des Warenkorbs rechts oben auf der Seite verändert und im Hintergrund einen Request an den Server sendet um ihm mitzuteilen, welche Ware der Nutzer gerade in seinen Warenkorb gelegt hat. \\ \\
-</WRAP>
+Viele Webseiten werden inzwischen nur noch ein Mal (nämlich beim Aufrufen) geladen, danach erfolgt jede Veränderung über Javascript-Programme. Man nennt diese Webseiten **single page applications**. Mit dieser Technik ist es möglich, Textverarbeitungen, Tabellenkalkulationen, Zeichenprogramme, Spiele usw. zu entwickeln, die komplett im Browser laufen.
-==== Struktur der Anfragen (requests) und Antworten (responses) ====
-{{ :kommunikation:www:http.png?600 |}}
-==== Die wichtigsten Requestparameter ====
-  * **User-Agent**: Hier kann der Client mitteilen, welcher Browser die Anfrage sendet und in welchem Betriebssystem dieser läuft. Diese Information ist für Website-Betreiber wichtig, da sie so statistische Erkenntnisse darüber gewinnen, welche Browser/Betriebsssteme ihre User wie häufig verwenden und ihre Seite speziell für diese optimieren können.
-  * **Host**: Das ist die Domain des Servers. Zusammen mit dem "Datei"namen bildet sie die Adresse der Seite. Der Server benötigt dieses Feld, da oft ein Server für mehrere Domains zuständig ist.
-  * **Accept-Language**: Damit teilt der Browser dem Server mit, welche Sprache der User vorzugsweise spricht. Hat der Server mehrere Sprachversionen derselben Seite, so kann er mit dieser Information die für den User am besten passende auswählen oder ihn ggf. auch auf einen anderen Server umleiten.
-  * **Accept-Encoding**: Der Client teilt dem Server mit, ob dieser die Antwort komprimieren darf und welche Algorithmen der ggf. einsetzen darf.
-  * **Connection**: Früher wurde nach jedem HTTP-Resonse die darunterliegende TCP-Verbindung geschlossen. Das ging zulasten der Performance, da das Öffnen einer TCP-Verbindung jedesmal Zeit kostet. Geht der Client davon aus, dass nach dem aktuellen Request noch weitere folgen (z.B. um Bilder einer Website nachzuladen), so setzt er ''Connection: Keep-Alive'' und signalisiert so dem Server, dass er die TCP-Verbindung aus Performancegründen offenhalten möchte.
-  * **Cookie**: Der Client kann dem Server sogenannte Cookies (das sind Schlüssel-Wert-Paare) übermitteln, die der Server bei einem vorhergehenden Request beim Client hinterlegt hat. Näheres dazu siehe unten.
-==== Die wichtigsten Responseparameter ====
-  * **Date**: Datum und Uhrzeit der Antwort
-  * **Server**: Hier kann der Server angeben, welches Server-Programm zum Einsatz kommt und auf welchem Betriebssystem es läuft.
-  * **Last-Modified**: Das ist der Zeitpunkt, an dem die übermittelte Datei zum letzten Mal verändert wurde. Der Client kann die Anfrage an den Server so senden, dass dieser zunächst nur den Response-Header (aber noch nicht die Datei) sendet. Liegt im Cache des Clients (siehe unten) die Datei vor und ist sie nicht älter als ''Last-Modified'', so kann der Client die Datei aus dem Cache verwenden und muss sie nicht zeitaufwändig vom Server holen. Das spart überdies Netzwerk-Bandbreite und Energie ( -> Umwelt!).
-  * **Content-Length**: Das ist die Länge der nach dem Response-Header folgenden Daten in Byte. Der Client kann sie nutzen, um z.B. bei größeren Downloads einen Fortschrittsbalken anzuzeigen.
-  * **Content-Type**: Per HTTP werden nicht nur Webseiten übertragen, sondern auch Bilder, pdf-Dateien, Sound, Videos usw. Mit diesem Parameter teilt der Server dem Client mit, welche Art von Daten er sendet.
-  * **Set-Cookie**: Der Server bittet den Client, ein Cookie zu setzen und mit jedem nachfolgenden Request mitzusenden. Mit dem expires-Attribut kann er die Lebensdauer des Cookies einschränken. Mehr zu Cookie siehe unten.
-==== Aufgabe 1: Developer Tools nutzen ====
-Jeder Browser hat sogenannte //Devloper Tools// integriert, die es Website-Entwicklern ermöglichen, das Document Object Model einer Website zu analysieren und Einblick in die Kommunikation des Browsers zu nehmen.
-  - Öffnen Sie Ihren Browser und gehen Sie auf eine beliebige Webseite.
-  - Drücken Sie die F12-Taste. Es öffnet sich ein zweites Fenster mit den Developer-Tools des Browsers.
-  - Öffnen Sie dort den Reiter "Netzwerk".
-  - Drücken Sie die F5-Taste, damit der Browser die Webseite erneut lädt. Sie sehen im Netzwerk-Reiter eine Auflistung aller HTTP-Requests, die zum Laden der Webseite nötig waren.
-  * a) Wozu sind all die Requests nötig? Sie haben doch nur eine einzige Webseite geladen!
-  * b) Klicken Sie auf einen Request. Der Browser zeigt Ihnen auf der rechten Seite die Details des Requests und des Response an. Wo sind die Request/Response-Parameter zu sehen? Interpretieren Sie sie mithilfe der obigen Beschreibung! Welche zusätzlichen Parameter finden Sie?
-{{ :kommunikation:www:pasted:20240217-180527.png?600 }}
-===== Zustandslose (stateless) Protokolle vs. Zustandsbehaftete (stateful) Protokolle =====
-<WRAP center round info 60%>
-Bei zustandsbehafteten (stateful) Protokollen verwalten die Kommunikationspartner während der Kommunikation einen Zustand, bei zustandslosen (stateless) Protokollen nicht.  \\ \\
-**Beispiele:**
-  * IP ist zustandslos: Jedes IP-Paket wird unabhängig von allen anderen Paketen versandt und auch empfangen. Vor dem Empfang eines IP-Pakets weiß die IP-Schicht des Empfängerrs nicht, dass es kommen wird und nach dem Empfang weiß sie nicht, ob noch weitere kommen werden.
-  * TCP ist zustandsbehaftet: Die TCP-Schicht hat die Aufgabe, sicherzustellen, dass alle Pakete, die den Empfänger nicht erreichen, nochmals versandt werden. Dazu müssen Sender und Empfänger speichern, welcher Teil der Daten bereits versandt/empfangen wurde.
-  * HTTP ist zustandslos: Der Client sendet einen HTTP-Request, der Server antwortet mit einer HTTP-Response. Danach "vergisst" der Server den Client wieder.
-</WRAP>
-===== Cookies =====