## Простая реализация мощной асинхронной связи с сервером {#sec-b77e387924b4}

[[HTMX]] позволяет реализовать мощные асинхронные функции в серверно-ориентированных фреймворках веб-разработки, таких как Django, без сложности [[JavaScript]]. В этой части мы рассмотрим **внутренний принцип обработки запросов Ajax в HTMX** и **способ взаимодействия с реальными представлениями Django** на конкретных примерах.

![Концептуальная схема Ajax-связи HTMX](/media/whitedec/blog_img/bd86a3db8e1c4c409a777cf86a8047f7.webp)

## Суть [[HTMX]]: HTML — это сообщение {#sec-fcb60a4b40b4}

Обычная Ajax-связь (например, с использованием axios, fetch) включает получение данных JSON от сервера, их интерпретацию JavaScript и перерисовку экрана. Однако HTMX следует принципу **«Hypermedia as the Engine of Application State (HATEOAS)»**. Это означает, что сервер отправляет не данные (JSON), а **готовые фрагменты HTML**, и HTMX просто «заменяет» их в указанном месте.

**4 этапа Ajax-связи в HTMX**

1.  **Возникновение события:** Пользователь взаимодействует с элементом HTML (например, кнопкой).
2.  **Ajax-запрос:** HTMX вызывает API `fetch` браузера для отправки запроса на сервер.
3.  **HTML-ответ:** Сервер обрабатывает логику и возвращает не всю страницу, а только **необходимый фрагмент HTML**.
4.  **Замена DOM (Swap):** HTMX немедленно вставляет полученный HTML в элемент, указанный `hx-target`.



## Практический пример: Реализация кнопки "Нравится" {#sec-5eb5b07b3b51}

Давайте рассмотрим, как происходит обмен HTML-фрагментами с сервером, а не просто изменение числа.

### 1. Фронтенд (Шаблон) {#sec-cad7db10ba2b}

Это метод отправки запроса с помощью `hx-post` и замены всего `#like-section` ответом от сервера.

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

Если, как в этом примере, `hx-target` и `hx-swap` указаны прямо в HTML-теге, то при повторном чтении кода сразу понятно, "где и как изменится страница при нажатии этой кнопки", без необходимости искать в JavaScript файлах. Лично мне кажется, что хотя может быть немного неудобно просматривать функции View бэкенда для понимания кода, наличие `hx-` атрибутов прямо в HTML-тегах, как в примере выше, лучше с точки зрения **Locality of Behavior**, чем встроенный JavaScript. 


### 2. Бэкенд (Представление Django) {#sec-1fda4c57da3b}

Важно отметить, что здесь используется **`render` вместо `JsonResponse`**.

```python
from django.shortcuts import render

def like_post(request):
    # Обработка логики "Нравится" (например, обновление БД)
    new_count = 10 
    
    # Возвращает небольшой фрагмент шаблона, содержащий только часть кнопки, а не всю страницу.
    return render(request, 'partials/_like_button.html', {
        'likes_count': new_count
    })
```

## 3. Частичный шаблон для ответа {#sec-ce5390bdc052}

Это «фрагмент HTML», который сервер передаст клиенту. Поскольку установлено `hx-swap="outerHTML"`, это содержимое заменит весь существующий `#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>
```

### Почему так? (Понимание принципа) {#sec-67af112c65f1}

В традиционном подходе после получения `JsonResponse({'likes': 10})` необходимо было писать код на JavaScript, такой как `document.getElementById('count').innerText = data.likes`.

Однако подход [[HTMX]]:
1.  **Предотвращение фрагментации логики:** Определение того, "как должен измениться экран при нажатии кнопки 'Нравится'", управляется сервером (шаблоном Django).
2.  **Синхронизация данных и представления:** Поскольку HTML, отправленный сервером, вставляется на экран без изменений, исключаются ошибки, возникающие при обработке данных на стороне клиента.

 
## В завершение этой части {#sec-b28d1b5245c5}

Использование [[HTMX]] — это не просто сокращение кода, а возвращение к максимальному использованию встроенных функций веба, таких как «Hypermedia (HTML)». Это позволяет разработчикам избавиться от сложностей управления состоянием JavaScript и сосредоточиться на серверной логике.


**Читайте также** :

- [Упрощение динамической веб-разработки с Django и HTMX (Часть 1)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/)  
- [Упрощение динамической веб-разработки с Django и HTMX (Часть 3)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-3/)  
- [Упрощение динамической веб-разработки с Django и HTMX (Часть 4): Интеграция CSRF-токена](/ko/whitedec/2025/1/27/django-htmx-csrf-token-integration/)  
- [Упрощение динамической веб-разработки с Django и HTMX (Часть 5): Расширенные функции](/ko/whitedec/2025/1/27/django-htmx-advanced-features/)  
- [Упрощение динамической веб-разработки с Django и HTMX (Часть 6): Метод возврата HTML](/ko/whitedec/2025/1/27/django-htmx-html-response/)  
- [Упрощение динамической веб-разработки с Django и HTMX (Часть 7): Метод возврата JSON](/ko/whitedec/2025/1/27/django-htmx-json-response/)