Kurse:HTTP Code Übungen: Unterschied zwischen den Versionen

Aus ahrensburg.city
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
= HTTP-Protokoll (Hypertext Transfer Protocol) =
== HTTP Spickzettel (MediaWiki) ==


== Überblick ==
=== HTTP-Protokoll – Übersicht ===
* HTTP ist ein zustandsloses Protokoll zur Übertragung von Hypertext (z. B. HTML) im Internet.
* HTTP (Hypertext Transfer Protocol) ist ein zustandsloses Protokoll ...
* Client-Server-Modell: Der Client (z. B. Browser) sendet Anfragen, der Server antwortet.
...
* Jede Anfrage ist unabhängig von vorherigen (stateless).


== Anfragemodell ==
=== Übung: Statuscode und Header setzen ===
* '''Client Request''': Der Client sendet eine HTTP-Anfrage.
<pre>
* '''Server Response''': Der Server verarbeitet die Anfrage und antwortet mit Ressourcen oder Fehlermeldungen.
 
== HTTP-Server ==
'''Definition''': Software, die HTTP-Anfragen verarbeitet und Antworten liefert.
 
'''Beispiele''':
* Apache HTTP Server
* Nginx
* Microsoft IIS
* Kestrel (ASP.NET Core)
 
'''Kestrel''':
* Cross-Platform Webserver in ASP.NET Core
* Leichtgewichtig und leistungsfähig
 
== Ablauf von Anfrage und Antwort mit Kestrel ==
# Client sendet Anfrage
# Kestrel empfängt und leitet sie an Middleware weiter
# Middleware verarbeitet Anfrage
# Anwendung erzeugt Antwort
# Kestrel sendet Antwort zurück an den Client
 
== Browser & HTTP ==
* Browser fordern HTML, CSS, JS, Bilder über HTTP an
* Klick auf Link → HTTP-Request → Server → Response → Darstellung im Browser
 
== HTTP-Anfragen in Chrome Dev Tools beobachten ==
* Öffnen: F12 oder Ctrl+Shift+I (Cmd+Option+I auf Mac)
* Reiter „Network“ → Details zu:
** Headers
** Response
** Timing
 
== Aufbau einer HTTP-Antwort ==
'''Format''':
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 137
 
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
 
'''Wichtige Header''':
* Content-Type: Typ der Ressource (z. B. text/html)
* Content-Length: Größe der Antwort
* Server: Infos zum Server
* Set-Cookie: Setzt Cookies im Client
* Cache-Control: Caching-Strategie
 
== Kestrel Standard-Header ==
* Content-Type: z. B. text/html, application/json
* Server: „Kestrel“
* Date: Zeitstempel der Antwort
 
== HTTP-Statuscodes ==
=== Kategorien ===
* '''1xx''': Information
* '''2xx''': Erfolg
* '''3xx''': Weiterleitung
* '''4xx''': Clientfehler
* '''5xx''': Serverfehler
 
=== Gängige Codes ===
* 200 OK
* 201 Created
* 204 No Content
* 400 Bad Request
* 401 Unauthorized
* 403 Forbidden
* 404 Not Found
* 500 Internal Server Error
* 503 Service Unavailable
 
== ASP.NET Core Codebeispiele ==
=== Beispiel 1: Antwort-Header setzen ===
<syntaxhighlight lang="csharp">
var builder = WebApplication.CreateBuilder(args);
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
var app = builder.Build();
Zeile 92: Zeile 12:
app.Run(async (HttpContext context) =>
app.Run(async (HttpContext context) =>
{
{
     context.Response.Headers["MyKey"] = "my value";
     context.Response.StatusCode = 200;
    context.Response.Headers["Server"] = "My server";
     context.Response.Headers["Content-Type"] = "text/html";
     context.Response.Headers["Content-Type"] = "text/html";
     await context.Response.WriteAsync("<h1>Hello</h1>");
     await context.Response.WriteAsync("&lt;h1&gt;Übung erfolgreich&lt;/h1&gt;");
    await context.Response.WriteAsync("<h2>World</h2>");
});
});


app.Run();
app.Run();
</syntaxhighlight>
</pre>
'''Ziel:''' Einen eigenen HTTP-Header setzen und eine HTML-Antwort senden.


=== Beispiel 2: Statuscode setzen ===
=== Übung: Abfrage von Query-Parametern ===
<syntaxhighlight lang="csharp">
<pre>
app.Run(async (HttpContext context) =>
app.Run(async (HttpContext context) =>
{
{
     context.Response.StatusCode = 200;
     if (context.Request.Method == "GET" && context.Request.Query.ContainsKey("name"))
    await context.Response.WriteAsync("Hello");
    {
    await context.Response.WriteAsync(" World");
        string name = context.Request.Query["name"];
});
        await context.Response.WriteAsync($"&lt;p&gt;Hallo {name}!&lt;/p&gt;");
</syntaxhighlight>
     }
 
    else
== HTTP-Request-Aufbau ==
    {
* '''Startzeile''': Methode, URI, HTTP-Version
        await context.Response.WriteAsync("&lt;p&gt;Bitte gib einen Namen per Query an (z.B. ?name=Max)&lt;/p&gt;");
* '''Header''': z. B. User-Agent, Accept, Authorization
    }
* '''Leerzeile'''
* '''Body (optional)''': z. B. JSON, Formulardaten
 
=== Beispiel: GET-Anfrage ===
GET /products?category=electronics&brand=apple HTTP/1.1
Host: example.com
 
=== Beispiel: POST-Anfrage ===
POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
 
username=john&password=secret
 
== Query Strings ==
* Parameter in URL übergeben
* Beispiel:
https://example.com/products?category=electronics&brand=apple
 
== Zugriff auf Request-Details in ASP.NET Core ==
=== Beispiel: Pfad und Methode auslesen ===
<syntaxhighlight lang="csharp">
app.Run(async (HttpContext context) =>
{
    string path = context.Request.Path;
    string method = context.Request.Method;
    context.Response.Headers["Content-type"] = "text/html";
    await context.Response.WriteAsync($"<p>{path}</p>");
     await context.Response.WriteAsync($"<p>{method}</p>");
});
});
</syntaxhighlight>
</pre>
'''Ziel:''' Umgang mit Query-Strings (z. B. ?name=Max) trainieren.


=== Beispiel: Query-Parameter auslesen ===
=== Übung: User-Agent anzeigen ===
<syntaxhighlight lang="csharp">
<pre>
app.Run(async (HttpContext context) =>
app.Run(async (HttpContext context) =>
{
{
     if (context.Request.Method == "GET" &&
     string agent = context.Request.Headers["User-Agent"];
        context.Request.Query.ContainsKey("id"))
    await context.Response.WriteAsync($"&lt;p&gt;Dein Browser: {agent}&lt;/p&gt;");
    {
        string id = context.Request.Query["id"];
        await context.Response.WriteAsync($"<p>ID: {id}</p>");
    }
});
});
</syntaxhighlight>
</pre>
'''Ziel:''' HTTP-Header auslesen und anzeigen.


=== Beispiel: User-Agent anzeigen ===
=== Übung: HTTP-Request analysieren ===
<syntaxhighlight lang="csharp">
<pre>
app.Run(async (HttpContext context) =>
app.Run(async (HttpContext context) =>
{
{
     if (context.Request.Headers.ContainsKey("User-Agent"))
     var path = context.Request.Path;
     {
     var method = context.Request.Method;
        string agent = context.Request.Headers["User-Agent"];
    await context.Response.WriteAsync($"&lt;p&gt;Pfad: {path}&lt;/p&gt;");
        await context.Response.WriteAsync($"<p>{agent}</p>");
     await context.Response.WriteAsync($"&lt;p&gt;Methode: {method}&lt;/p&gt;");
     }
});
});
</syntaxhighlight>
</pre>
 
'''Ziel:''' Grundlagen zu Methode und Pfad aus Requests üben.
== HTTP-Methoden ==
* '''GET''': Daten abfragen, sichtbar in URL, cachebar, sicher
* '''POST''': Daten senden (z. B. Formulare), im Body, nicht idempotent
 
== GET vs POST ==
'''GET''':
* Daten in URL
* cachebar, idempotent
* nicht für sensible Daten
 
'''POST''':
* Daten im Body
* sicherer für Passwörter
* nicht idempotent
 
== Tool: Postman ==
'''Verwendung''':
* HTTP-Requests (GET, POST, usw.) erstellen
* Header & Body anpassen
* Antwort inspizieren: Statuscode, Header, Body


'''Ablauf''':
=== Übung: GET vs. POST Test mit Postman ===
# Öffnen → Neue Anfrage
'''Anleitung:'''
# Methode + URL eingeben (z. B. https://localhost:7070/api/products)
# Starte deine ASP.NET Core App lokal.
# Optional: Header / Body hinzufügen
# Öffne Postman.
# "Send" klicken → Antwort wird unten angezeigt
# Sende GET- und POST-Anfragen an http://localhost:7070 mit passenden Inhalten.
# Beobachte Verhalten bei:
  * GET mit Query
  * POST mit Body (JSON oder Form-Daten)


== Zusammenfassung ==
'''Ziel:''' Unterschiede zwischen GET- und POST-Anfragen erfahren und testen.
* HTTP = Grundlage der Webkommunikation
* Zustandslos, Anfrage-Antwort-Modell
* Statuscodes geben Antwortstatus an
* ASP.NET Core erlaubt präzise Steuerung von Anfragen & Antworten
* Tools wie Postman helfen beim Testen von APIs

Aktuelle Version vom 23. Juni 2025, 21:19 Uhr

HTTP Spickzettel (MediaWiki)

HTTP-Protokoll – Übersicht

  • HTTP (Hypertext Transfer Protocol) ist ein zustandsloses Protokoll ...

...

Übung: Statuscode und Header setzen

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.Run(async (HttpContext context) =>
{
    context.Response.StatusCode = 200;
    context.Response.Headers["Content-Type"] = "text/html";
    await context.Response.WriteAsync("<h1>Übung erfolgreich</h1>");
});

app.Run();

Ziel: Einen eigenen HTTP-Header setzen und eine HTML-Antwort senden.

Übung: Abfrage von Query-Parametern

app.Run(async (HttpContext context) =>
{
    if (context.Request.Method == "GET" && context.Request.Query.ContainsKey("name"))
    {
        string name = context.Request.Query["name"];
        await context.Response.WriteAsync($"<p>Hallo {name}!</p>");
    }
    else
    {
        await context.Response.WriteAsync("<p>Bitte gib einen Namen per Query an (z.B. ?name=Max)</p>");
    }
});

Ziel: Umgang mit Query-Strings (z. B. ?name=Max) trainieren.

Übung: User-Agent anzeigen

app.Run(async (HttpContext context) =>
{
    string agent = context.Request.Headers["User-Agent"];
    await context.Response.WriteAsync($"<p>Dein Browser: {agent}</p>");
});

Ziel: HTTP-Header auslesen und anzeigen.

Übung: HTTP-Request analysieren

app.Run(async (HttpContext context) =>
{
    var path = context.Request.Path;
    var method = context.Request.Method;
    await context.Response.WriteAsync($"<p>Pfad: {path}</p>");
    await context.Response.WriteAsync($"<p>Methode: {method}</p>");
});

Ziel: Grundlagen zu Methode und Pfad aus Requests üben.

Übung: GET vs. POST Test mit Postman

Anleitung:

  1. Starte deine ASP.NET Core App lokal.
  2. Öffne Postman.
  3. Sende GET- und POST-Anfragen an http://localhost:7070 mit passenden Inhalten.
  4. Beobachte Verhalten bei:
 * GET mit Query
 * POST mit Body (JSON oder Form-Daten)

Ziel: Unterschiede zwischen GET- und POST-Anfragen erfahren und testen.