Что такое AJAX?

AJAX: асинхронный обмен данными с сервером

AJAX (Asynchronous JavaScript and XML) — это подход к веб-разработке, который позволяет обновлять части веб-страницы без перезагрузки всей страницы. Несмотря на название, AJAX не обязательно использует XML — сегодня чаще используют JSON.

Суть AJAX

Традиционная веб-страница работает так:

1. Пользователь заполняет форму
2. Отправляет её
3. Страница полностью перезагружается
4. Сервер возвращает новую страницу

С AJAX всё иначе:

1. Пользователь заполняет форму
2. JavaScript отправляет данные на сервер без перезагрузки
3. Сервер обрабатывает и возвращает данные (JSON/XML)
4. JavaScript обновляет только нужные части страницы

Основной инструмент: XMLHttpRequest

Давайте посмотрим на классический пример с XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        console.log('Ответ от сервера:', response);
    }
};
xhr.send(JSON.stringify({name: 'John', email: 'john@example.com'}));

Современный подход: Fetch API

Fetch — это современная и более удобная замена XMLHttpRequest:

fetch('/api/users', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: 'John', email: 'john@example.com'})
})
.then(response => response.json())
.then(data => console.log('Получено:', data))
.catch(error => console.error('Ошибка:', error));

Роль Python-бэкенда в AJAX

Когда Python-разработчик работает с AJAX, нужно:

1. Создать REST API — endpoints, которые возвращают JSON

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class User(BaseModel):
    name: str
    email: str

@app.post("/api/users")
async def create_user(user: User):
    return {"id": 1, "name": user.name, "email": user.email, "status": "created"}

@app.get("/api/users/{user_id}")
async def get_user(user_id: int):
    return {"id": user_id, "name": "John", "email": "john@example.com"}

1. Обработать CORS — чтобы фронтенд мог обращаться к API

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],
    allow_headers=["*"],
)

1. Вернуть JSON-ответ — вместо HTML

@app.get("/api/data")
async def get_data():
    return {"status": "success", "data": [1, 2, 3]}

Преимущества AJAX

• Лучше UX — нет мигания и перезагрузок
• Быстрее — передаём только нужные данные, не переделываем весь HTML
• Интерактивность — как десктопное приложение
• Меньше трафика — не отправляем весь HTML, только JSON

Недостатки

• SEO-проблемы — поисковики медленнее индексируют динамический контент
• Сложнее отладка — нужны инструменты для отладки сетевых запросов
• История браузера — нужно вручную управлять history (History API)
• Зависимость от JavaScript — если JS отключен, страница не работает

Когда использовать AJAX

• Одностраничные приложения (SPA) — React, Vue, Angular
• Динамическая загрузка контента — бесконечная лента, фильтры
• Автосохранение — сохранение черновика без перезагрузки
• Уведомления в реальном времени — вебсокеты + AJAX

Вывод: AJAX — это фундаментальный подход современной веб-разработки. Python-разработчик должен уметь создавать REST API, который возвращает JSON для AJAX-запросов.