Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu03:01 [2026/03/23 15:22] – vdemir
+++ de:modul:m307:learningunits:lu03:01 [2026/05/04 08:33] (aktuell) – [2. POST: Daten senden] vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU03a - POST & GET - TBD ======
+====== LU03a - POST & GET ======
 ===== Einleitung  =====
@@ Zeile 7: / Zeile 7: @@
 Nachfolgend sehen Sie das Client-Servermodell, die zwei Bestandteile, auf die Informationsaustausch im www möglich macht.
-{{:de:modul:m307:learningunits:lu03:client-server-architecture-1.png|}}
+{{:de:modul:m307:learningunits:lu03:client-server-architecture-1.png|CS-Webarchitektur}}
 In einer CS-Umgebung bedeutet das meistens:
-Client = Browser oder Frontend mit JavaScript
+  * Client = Browser oder Frontend mit JavaScript
-Server = Webserver / API, die Anfragen entgegennimmt und Antworten zurückgibt
+  * Server = Webserver / API, die Anfragen entgegennimmt und Antworten zurückgibt
+Wenn JavaScript mit einem Server kommuniziert, passiert das oft per fetch()-Methode.
+==== Theorie: HTTP-Methoden GET & POST ====
+In der Webentwicklung ist das Hypertext Transfer Protocol (HTTP) die Sprache, in der Client (Browser) und Server miteinander kommunizieren. Die beiden wichtigsten Befehle ("Verben") dieser Sprache sind GET und POST.
+Das nachfolgende Youtube-Kurzvideo ( https://www.youtube.com/shorts/7x2xhOffOdQ ) erklärt POST und GET einfach und verständlich.
+{{:de:modul:m307:learningunits:lu03:wasisteinrequestget_post.mp4|GET-POST-Kurzvideo: https://www.youtube.com/shorts/7x2xhOffOdQ}}
+==== 1. GET: Daten abrufen  ====
+Die GET-Methode wird verwendet, um Informationen vom Server anzufordern. Sie ist vergleichbar mit dem Aufschlagen einer Seite in einem Lexikon.
+  * **Sichtbarkeit:** Parameter werden direkt an die URL angehängt (z.B. search?term=javascript).
+  * **Lesezeichen:** Da die Daten in der URL stehen, können GET-Anfragen als Lesezeichen gespeichert werden.
+  * **Caching:** Browser speichern GET-Antworten oft im Zwischenspeicher, um sie beim nächsten Mal schneller zu laden.
+  * **Sicherheit: Nicht** für sensible Daten (Passwörter) geeignet, da die Parameter im Browserverlauf und in Server-Logs auftauchen.
+<code javascript>
+// Eine einfache Abfrage von Daten
+fetch('https://api.beispiel.de/users')
+  .then(response => response.json())
+  .then(data => console.log(data));
+</code>
+==== 2. POST: Daten senden ====
+Die POST-Methode wird verwendet, um Daten an den Server zu senden, damit dieser sie verarbeitet (z.B. in eine Datenbank schreibt). Dies ist vergleichbar mit dem Einwerfen eines ausgefüllten Formulars in einen Briefkasten.
+  * **Sichtbarkeit:** Die Daten werden im Body (Körper) der HTTP-Anfrage übertragen. Sie sind nicht in der URL sichtbar.
+  * **Kapazität:** POST hat keine strikte Längenbeschränkung (ideal für Datei-Uploads oder lange Texte).
+  * **Sicherheit:** Sicherer als GET für Logins, da Daten nicht im Verlauf erscheinen. Dennoch ist für echte Sicherheit eine HTTPS-Verschlüsselung zwingend erforderlich.
+<code javascript>
+// im Gegensatz zu GET, werden hier die Daten nicht in der URL, sondern im Body transportiert.
+fetch('https://api.beispiel.de/users', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ name: "Max Mustermann", beruf: "Informatiker" })
+});
+</code>
-Wenn JavaScript mit einem Server kommuniziert, passiert das oft per fetch().
+==== 3. Direkter Vergleich ====
+^Merkmal ^GET ^POST ^
+^Hauptzweck |Daten abrufen |Daten übermitteln/erstellen |
+^Datenposition | URL (Query String) | Request Body |
+^Sichtbarkeit |Für jeden in der Adresszeile sichtbar | In der Adresszeile unsichtbar |
+^Lesezeichen |Ja| Nein |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir