HTTP-Anfragen/-Antworten verstehen 📡

Wenn Sie eine Website besuchen oder eine App verwenden, wie kommunizieren Computer und Server miteinander? Sie verwenden eine Regel namens HTTP! Lassen Sie mich es auf einfache Weise erklären, auch für Anfänger.

HTTP mit dem Alltag vergleichen?

Vergleichen wir HTTP mit einer Restaurantbestellung.

Die Geschichte des Restaurants 🍽️

1. Kunde: "Pasta bitte!" (Anfrage)
2. Kellner: Übermittelt an die Küche
3. Küche: Bereitet Pasta zu
4. Kellner: "Hier ist Ihre Pasta!" (Antwort)
5. Kunde: Erhält die Pasta

HTTP funktioniert genauso:

1. Browser: "index.html bitte!" (HTTP-Anfrage)
2. Server: Findet die Datei
3. Server: "Hier ist sie!" (HTTP-Antwort)
4. Browser: Zeigt die Seite an

Definition von HTTP

HTTP (HyperText Transfer Protocol)

• Regeln für den Datenaustausch zwischen Webbrowser und Server
• Protokoll = vereinbarte Regeln
• Grundlegende Kommunikationsmethode des Webs

HTTP-Anfrage/-Antwort-Ablauf

┌─────────┐                                ┌─────────┐
│         │   ── HTTP-Anfrage (Request) →  │         │
│ Browser │                                │  Server │
│         │   ← HTTP-Antwort (Response) ── │         │
└─────────┘                                └─────────┘

Gesamter Prozess

1. Anfrage (Request): Der Browser fordert etwas vom Server an
2. Verarbeitung (Processing): Der Server verarbeitet die Anfrage
3. Antwort (Response): Der Server sendet das Ergebnis an den Browser
4. Rendering (Rendering): Der Browser zeigt es auf dem Bildschirm an

HTTP-Methoden (Anfragemethoden)

Dies sind Verben, die dem Server sagen, "wie" etwas zu tun ist.

1. GET 📖

"Abrufen" - Daten anfordern

GET /products/123

Beispiele:

• Webseite ansehen
• Suchergebnisse abrufen
• Produktliste ansehen

Merkmale:

• Ruft nur Daten ab
• Ändert keine Serverdaten
• Daten sind in der URL sichtbar
• Kann als Lesezeichen gespeichert werden

Tatsächliche Verwendung:

https://google.com/search?q=javascript
                         └───────┬──────┘
                         GET-Parameter

2. POST 📝

"Erstellen" - Neue Daten an den Server senden

POST /users
{
  "name": "Max Müller",
  "email": "max@example.com"
}

Beispiele:

• Mitgliederregistrierung
• Beitrag schreiben
• Bestellung aufgeben

Merkmale:

• Erstellt Daten auf dem Server
• Daten im Körper (Body)
• Daten nicht in der URL sichtbar
• Kann nicht als Lesezeichen gespeichert werden

3. PUT ✏️

"Ändern" - Vorhandene Daten vollständig ersetzen

PUT /users/123
{
  "name": "Anna Schmidt",
  "email": "anna@example.com"
}

Beispiele:

• Gesamtes Profil ändern
• Gesamten Beitrag ändern

4. PATCH 🔧

"Teilweise ändern" - Nur einen Teil der vorhandenen Daten ändern

PATCH /users/123
{
  "email": "newemail@example.com"
}

Beispiele:

• Nur E-Mail ändern
• Nur Passwort ändern

5. DELETE 🗑️

"Löschen" - Daten löschen

DELETE /users/123

Beispiele:

• Konto löschen
• Beitrag löschen
• Produkt löschen

HTTP-Methoden-Vergleichstabelle

Methode	Verwendung	Datenänderung	Datenposition
GET	Abfrage	❌	URL
POST	Erstellung	✅	Body
PUT	Vollständige Änderung	✅	Body
PATCH	Teilweise Änderung	✅	Body
DELETE	Löschung	✅	URL

HTTP-Anfragestruktur

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{Body-Daten (bei POST, PUT, PATCH)}

Komponenten

1. Anfragezeile: GET /api/users HTTP/1.1

   • Methode: GET
   • Pfad: /api/users
   • HTTP-Version: 1.1

2. Header (Headers): Zusätzliche Informationen

   Host: Welcher Server?
   User-Agent: Welcher Browser?
   Accept: Welches Format empfangen?
   Authorization: Authentifizierungsinformationen

3. Body (Body): Tatsächliche Daten (POST, PUT, PATCH)

HTTP-Antwortstruktur

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 1234

{
  "id": 1,
  "name": "Max Müller"
}

Komponenten

1. Statuszeile: HTTP/1.1 200 OK

   • HTTP-Version: 1.1
   • Statuscode: 200
   • Statusnachricht: OK

2. Header (Headers): Antwortinformationen

   Content-Type: Welches Format?
   Content-Length: Datengröße

3. Body (Body): Tatsächliche Daten

HTTP-Statuscodes 🚦

Der Server teilt mit einer Zahl "was passiert ist" mit.

2xx - Erfolg ✅

Code	Bedeutung	Beschreibung
200	OK	Erfolg!
201	Created	Neu erstellt
204	No Content	Erfolg, aber nichts zu senden

3xx - Umleitung 🔄

Code	Bedeutung	Beschreibung
301	Moved Permanently	Dauerhaft verschoben
302	Found	Vorübergehend woanders
304	Not Modified	Nicht geändert, Cache verwenden

4xx - Client-Fehler ❌

Code	Bedeutung	Beschreibung
400	Bad Request	Fehlerhafte Anfrage
401	Unauthorized	Anmeldung erforderlich
403	Forbidden	Keine Berechtigung
404	Not Found	Nicht gefunden
429	Too Many Requests	Zu viele Anfragen

5xx - Server-Fehler 🔥

Code	Bedeutung	Beschreibung
500	Internal Server Error	Serverproblem
502	Bad Gateway	Gateway-Fehler
503	Service Unavailable	Dienst nicht verfügbar

Tipp

Überprüfen Sie alle Statuscodes im HTTP Status Guide!

Praktische Beispiele

Beispiel 1: Suche 🔍

Anfrage:

GET https://google.com/search?q=javascript

Antwort:

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>Suchergebnisse...</body>
</html>

Beispiel 2: Anmeldung 🔐

Anfrage:

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

Antwort (Erfolg):

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "Max Müller"
  }
}

Antwort (Fehler):

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

Beispiel 3: Beitrag erstellen ✍️

Anfrage:

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "Erster Beitrag",
  "content": "Hallo!"
}

Antwort:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "title": "Erster Beitrag",
  "content": "Hallo!",
  "createdAt": "2025-01-23T10:30:00Z"
}

Beispiel 4: Profil ändern ✏️

Anfrage:

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

Antwort:

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "Max Müller",
  "email": "newemail@example.com"
}

Beispiel 5: Beitrag löschen 🗑️

Anfrage:

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

Antwort:

HTTP/1.1 204 No Content

HTTP-Header verstehen

Häufig verwendete Anfrage-Header

Content-Type: application/json    # Format der gesendeten Daten
Accept: application/json           # Format der gewünschten Daten
Authorization: Bearer token123     # Authentifizierungstoken
User-Agent: Mozilla/5.0...         # Browserinformationen
Cookie: session=abc123             # Cookie

Häufig verwendete Antwort-Header

Content-Type: application/json    # Format der Antwortdaten
Content-Length: 1234               # Datengröße
Set-Cookie: session=abc123         # Cookie setzen
Cache-Control: no-cache            # Cache-Einstellungen
Access-Control-Allow-Origin: *     # CORS-Einstellungen

HTTP-Tools verwenden

Mit API Tester üben

Im API Tester:

1. URL eingeben
2. Methode auswählen (GET, POST, PUT, DELETE)
3. Header hinzufügen
4. Body schreiben (POST, PUT, PATCH)
5. Send-Button klicken!

Übungsbeispiel

GET-Anfragetest:

URL: https://api.github.com/users/github
Method: GET

Ergebnis:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

Häufig gestellte Fragen (FAQ)

F1: Wann GET und POST verwenden?

A:

• GET: Datenabfrage (nur lesen)
• POST: Datenerstellung (schreiben)

F2: Was ist der Unterschied zwischen PUT und PATCH?

A:

• PUT: Ersetzt alles

  PUT /users/1
  {"name": "Anna Schmidt", "email": "anna@example.com", "age": 25}

• PATCH: Ändert nur einen Teil

  PATCH /users/1
  {"email": "newemail@example.com"}

F3: Warum tritt der 404-Fehler auf?

A: Wenn die angeforderte Seite oder Daten nicht gefunden werden!

• URL-Rechtschreibfehler
• Gelöschte Seite
• Falscher Pfad

F4: Was ist der 500-Fehler?

A: Der Server hat ein Problem!

• Server-Code-Fehler
• Datenbankverbindungsfehler
• Serverüberlastung

F5: Was ist der Unterschied zwischen HTTPS und HTTP?

A: Sicherheit wurde hinzugefügt!

• HTTP: Klartext-Übertragung (jeder kann sehen)
• HTTPS: Verschlüsselte Übertragung (sicher) 🔒

CRUD und HTTP-Methoden

CRUD = Grundlegende Datenoperationen

CRUD	Bedeutung	HTTP-Methode
Create	Erstellen	POST
Read	Lesen	GET
Update	Aktualisieren	PUT / PATCH
Delete	Löschen	DELETE

Beispiel: Blog-Beiträge

Beitragsliste anzeigen:  GET /posts
Beitrag lesen:           GET /posts/123
Beitrag erstellen:       POST /posts
Beitrag ändern:          PUT /posts/123
Beitrag löschen:         DELETE /posts/123

RESTful API

REST = Entwurfsmethode zur effektiven Nutzung von HTTP

Gutes API-Design ✅

GET    /users          # Benutzerliste
GET    /users/123      # Bestimmter Benutzer
POST   /users          # Benutzer erstellen
PUT    /users/123      # Benutzer ändern
DELETE /users/123      # Benutzer löschen

Schlechtes API-Design ❌

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

Nächste Schritte 🚀

Wenn Sie HTTP verstanden haben:

1. ✅ API Tester - HTTP-Anfragen direkt senden
2. ✅ HTTP Status Guide - Alle Statuscodes lernen
3. ✅ cURL Converter - cURL-Befehle konvertieren
4. ✅ Was ist eine API? - API-Konzept überprüfen
5. ✅ JSON-Datenformat verstehen - Über HTTP ausgetauschte Daten

Zusammenfassung

HTTP ist die Grundlage des Webs! 🌐

Wichtige Punkte:

• GET: Abfrage (lesen)
• POST: Erstellung (schreiben)
• PUT/PATCH: Änderung
• DELETE: Löschung
• Statuscodes: 2xx (Erfolg), 4xx (Client-Fehler), 5xx (Server-Fehler)

Durch Experimentieren mit API Tester werden Sie schnell vertraut! 🎉

Verstehen Sie jetzt, wie Websites und Server kommunizieren?