## Leistungsstarke asynchrone Kommunikation mit dem Server mühelos implementieren {#sec-b77e387924b4}

[[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](/media/whitedec/blog_img/bd86a3db8e1c4c409a777cf86a8047f7.webp)

## Der Kern von [[HTMX]]: HTML ist die Botschaft {#sec-fcb60a4b40b4}

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 {#sec-5eb5b07b3b51}

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

### 1. Frontend (Template) {#sec-cad7db10ba2b}

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

```html
<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) {#sec-1fda4c57da3b}

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

```python
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 {#sec-ce5390bdc052}

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`.

```HTML
<!-- 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) {#sec-67af112c65f1}

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 {#sec-b28d1b5245c5}

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** :

- [Dynamische Webentwicklung vereinfachen mit Django und HTMX (Teil 1)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/)  
- [Dynamische Webentwicklung vereinfachen mit Django und HTMX (Teil 3)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-3/)  
- [Dynamische Webentwicklung vereinfachen mit Django und HTMX (Teil 4): CSRF-Token-Integration](/ko/whitedec/2025/1/27/django-htmx-csrf-token-integration/)  
- [Dynamische Webentwicklung vereinfachen mit Django und HTMX (Teil 5): Erweiterte Funktionen](/ko/whitedec/2025/1/27/django-htmx-advanced-features/)  
- [Dynamische Webentwicklung vereinfachen mit Django und HTMX (Teil 6): HTML-Antwortverfahren](/ko/whitedec/2025/1/27/django-htmx-html-response/)  
- [Dynamische Webentwicklung vereinfachen mit Django und HTMX (Teil 7): JSON-Antwortverfahren](/ko/whitedec/2025/1/27/django-htmx-json-response/)