Leistungsstarke asynchrone Kommunikation mit dem Server mühelos implementieren

HTMX ermöglicht die Implementierung leistungsstarker asynchroner Funktionen in serverseitigen Webentwicklungs-Frameworks wie Django, ohne die Komplexität von JavaScript. In diesem Teil werden wir das interne Funktionsprinzip von HTMX bei der Verarbeitung von Ajax-Anfragen und die Kommunikationsweise mit Django-Views anhand konkreter Beispiele näher beleuchten.

Konzeptdiagramm der Ajax-Kommunikation von HTMX

Der Kern von HTMX: HTML ist die Botschaft

Die grundlegende Ajax-Kommunikation (z. B. mit axios, fetch) empfängt JSON-Daten vom Server, die dann von JavaScript interpretiert und zur Aktualisierung der Anzeige verwendet werden. HTMX hingegen folgt dem Prinzip 'Hypermedia as the Engine of Application State (HATEOAS)'. Das bedeutet, der Server sendet anstelle von Daten (JSON) fertige HTML-Fragmente, und HTMX 'ersetzt' diese einfach an der vorgesehenen Stelle.

Die 4 Phasen der HTMX-Ajax-Kommunikation

  1. Ereignisauslösung: Der Benutzer interagiert mit einem HTML-Element (z. B. einem Button).
  2. Ajax-Anfrage: HTMX ruft die fetch-API des Browsers auf, um eine Anfrage an den Server zu senden.
  3. HTML-Antwort: Der Server verarbeitet die Logik und gibt dann nicht die gesamte Seite, sondern nur das erforderliche HTML-Fragment zurück.
  4. DOM-Ersetzung (Swap): HTMX fügt das empfangene HTML sofort in das durch hx-target angegebene Element ein.

Praxisbeispiel: Implementierung eines „Gefällt mir“-Buttons

Lassen Sie uns untersuchen, wie HTML-Fragmente zwischen Server und Client ausgetauscht werden, nicht nur eine einfache Zahländerung.

1. Frontend (Template)

Hierbei wird eine Anfrage mit hx-post gesendet, und die Antwort des Servers ersetzt das gesamte #like-section.

<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML">
        ❤️ 좋아요 ({{ likes_count }})
    </button>
</div>

Wenn hx-target und hx-swap wie in diesem Beispiel direkt im HTML-Tag angegeben sind, kann man beim späteren Lesen des Codes sofort erkennen, "wo und wie sich etwas ändert, wenn dieser Button geklickt wird", ohne JavaScript-Dateien durchsuchen zu müssen. Persönlich empfinde ich es zwar als etwas umständlich, die Backend-View-Funktion durchsuchen zu müssen, um den Code zu verstehen, aber da die hx- Attribute direkt im HTML-Tag eingebettet sind, ist dies aus Sicht der Locality of Behavior möglicherweise besser als Inline-JavaScript.

2. Backend (Django View)

Wichtig ist hierbei, dass render anstelle von JsonResponse verwendet wird.

from django.shortcuts import render

def like_post(request):
    # Logik für "Gefällt mir" verarbeiten (z. B. Datenbank-Update)
    new_count = 10 

    # Gibt ein kleines Template-Fragment zurück, das nur den Button-Bereich enthält, nicht die gesamte Seite.
    return render(request, 'partials/_like_button.html', {
        'likes_count': new_count
    })

3. Partial-Template für die Antwort

Dies ist das 'HTML-Fragment', das der Server an den Client sendet. Da hx-swap="outerHTML" eingestellt wurde, ersetzt dieser Inhalt das gesamte bestehende #like-section.

<!-- partials/_like_button.html -->
<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML"
            class="btn-liked">
        ❤️ 좋아요 ({{ likes_count }})
    </button>
</div>

Warum dieser Ansatz? (Verständnis des Prinzips)

Beim traditionellen Ansatz musste nach dem Empfang von JsonResponse({'likes': 10}) in JavaScript Code wie document.getElementById('count').innerText = data.likes geschrieben werden.

Der HTMX-Ansatz hingegen bietet: 1. Vermeidung von Logikfragmentierung: Die Definition, "wie sich der Bildschirm ändern soll, wenn 'Gefällt mir' gedrückt wird", wird vom Server (Django-Template) verwaltet. 2. Daten-Ansichts-Synchronisation: Da das vom Server gesendete HTML direkt in der Anzeige erscheint, werden Fehler, die bei der clientseitigen Datenverarbeitung auftreten können, eliminiert.

Fazit dieses Teils

Die Verwendung von HTMX ist nicht nur eine Reduzierung des Codes, sondern eine Rückbesinnung auf die ursprüngliche Funktion des Webs, indem 'Hypermedia (HTML)' optimal genutzt wird. Dies ermöglicht es Entwicklern, sich vom Albtraum der JavaScript-Zustandsverwaltung zu befreien und sich stärker auf die Serverlogik zu konzentrieren.

Verwandte Artikel :