AJAX-запросы в Wepps Platform: Обновляем страницу без перезагрузки

Вам надоело, что каждое действие пользователя — отправка формы, загрузка контента, проверка данных — вызывает полную перезагрузку страницы? Пользователи видят белый экран, теряют введённые данные, а сайт ощущается медленным и неудобным. Каждый клик — это секунды ожидания, потеря фокуса, раздражение.

А что если страница могла бы обновляться мгновенно, без перезагрузки? Пользователь отправляет форму — и тут же видит результат. Открывает попап — контент подгружается моментально. Добавляет товар в корзину — счётчик обновляется без единого мерцания экрана.

Именно так работают современные веб-приложения. Давайте разберёмся, что такое AJAX и почему это технология, которая изменила веб-разработку навсегда.

Почта и телефон: как это понять

Представьте, что вы общаетесь с другом. У вас есть два способа:

1. Обычный HTTP-запрос — как письмо по почте. Вы пишете письмо (заполняете форму), относите на почту (отправляете), ждёте ответа несколько дней (перезагрузка страницы), получаете новое письмо (новая страница целиком). Каждое новое письмо — это отдельное путешествие на почту и обратно.

2. AJAX-запрос — как телефонный звонок. Вы уже разговариваете (страница открыта), задаёте вопрос (отправляете запрос), получаете ответ моментально (данные приходят), продолжаете разговор (страница не перезагружается). Вы можете задавать много вопросов в одном разговоре.

3. Фоновый AJAX — как СМС во время другого дела. Вы отправляете сообщение (запрос в фоне), продолжаете свои дела (пользуетесь сайтом), получаете ответ когда он придёт (асинхронно).

Или вспомните ресторан:

• Обычный способ — каждый раз, когда хотите что-то заказать, вы выходите из ресторана, идёте на кухню, забираете блюдо и возвращаетесь за свой стол
• AJAX — вы сидите за столом, официант (JavaScript) бегает на кухню (сервер) и приносит вам блюда, пока вы спокойно сидите и общаетесь

Суть в том, что AJAX позволяет обмениваться данными с сервером без перезагрузки всей страницы.

Что такое AJAX? Асинхронный обмен данными

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

Суперсилы AJAX:

• Мгновенное обновление части страницы. Вместо того чтобы перезагружать всю страницу (шапку, меню, подвал, весь HTML), обновляется только нужный блок — например, список товаров или содержимое попапа.

  • На практике: пользователь фильтрует товары, и список обновляется моментально без потери положения скролла

• Работа в фоновом режиме. Запросы выполняются асинхронно — пользователь может продолжать работать со страницей, пока данные загружаются.

  • На практике: форма отправляется на сервер, пока пользователь уже читает следующий раздел

• Экономия трафика и ресурсов. Передаются только нужные данные, а не вся страница со стилями, скриптами и разметкой.

  • На практике: вместо 500 КБ HTML загружается 2 КБ JSON

Где вы это видите на любом сайте?

• Gmail — письма загружаются и отправляются без перезагрузки страницы
• Facebook/VK — бесконечная лента, лайки, комментарии работают мгновенно
• Корзина интернет-магазина — товары добавляются без перехода на другую страницу
• Google Maps — карта двигается и подгружает новые участки плавно

Что такое Request.php? Обработчик AJAX на сервере

Request.php — это специальный PHP-файл, который обрабатывает AJAX-запросы и возвращает данные. Если AJAX — это звонок клиента, то Request.php — это оператор на том конце провода, который отвечает на вопросы.

Суперсилы Request.php:

• Изолированность. Request.php работает отдельно от основной страницы — он не загружает лишние данные, только то, что нужно для ответа.
• Быстрота. Не генерируется полная HTML-страница, возвращается только нужный фрагмент или JSON.
• Универсальность. Один файл может обрабатывать множество действий через параметр action.

Проще простого: Request.php — это мини-сервер внутри вашего расширения, который слушает AJAX-запросы и отвечает на них.

Методы layoutWepps: готовые инструменты для AJAX

В Wepps Platform есть встроенные JavaScript-методы для работы с AJAX:

layoutWepps.request() — универсальный AJAX-запрос

Отправляет данные на сервер и выводит результат в указанный блок или выполняет функцию.

layoutWepps.modal() — попап с AJAX-контентом

Открывает модальное окно и загружает в него данные через AJAX.

Магия в соединении: как это работает вместе на практике

Давайте создадим кнопку, которая загружает контент через AJAX без перезагрузки страницы:

1. Создаём кнопку в HTML/Smarty-шаблоне. Добавляем элемент, куда будет загружен ответ:

<button id="ajax-to-obj">Загрузить контент</button>
<div id="test2">Здесь появится результат</div>

2. Добавляем JavaScript-обработчик. При клике отправляем AJAX-запрос:

$('#ajax-to-obj').on('click', function () {
    layoutWepps.request({ 
        data: 'action=test', 
        url: '/ext/Popups/Request.php', 
        obj: $('#test2') 
    });
});

3. Создаём Request.php для обработки. Сервер получает запрос и возвращает HTML:

<?php
require_once '../../../configloader.php';
use WeppsCore\Request;

class RequestPopups extends Request {
    public function request($action="") {
        switch ($action) {
            case 'test':
                echo '<h1>Привет, мир!</h1>';
                break;
        }
    }
}

$request = new RequestPopups($_REQUEST);

4. Результат появляется мгновенно. Блок #test2 обновляется без перезагрузки страницы — в нём появляется <h1>Привет, мир!</h1>.

Вот и вся магия! JavaScript отправил запрос, PHP обработал его и вернул HTML, JavaScript вставил результат в нужное место. Это даёт пользователю мгновенный отклик без задержки на перезагрузку всей страницы.

Почему это круто? Выгоды для всех

🚀 Для владельца бизнеса/маркетолога:

• Выше конверсия. Пользователи не уходят со страницы во время ожидания — они видят мгновенный результат.
• Меньше отказов. Нет белых экранов и долгого ожидания — сайт ощущается быстрым и современным.
• Лучше UX. Плавное взаимодействие без рывков создаёт впечатление премиального продукта.
• Больше действий пользователя. Низкий порог для действий (лайки, фильтры, добавление в корзину) увеличивает вовлечённость.

👨‍💻 Для разработчика:

• Меньше нагрузка на сервер. Передаются только нужные данные, а не вся страница со стилями и скриптами.
• Проще отладка. Можно тестировать Request.php отдельно от основной страницы.
• Гибкость. Один Request.php может обслуживать десятки разных действий через параметр action.
• Готовые инструменты. В Wepps есть layoutWepps.request() и layoutWepps.modal() — не нужно писать AJAX с нуля.

👥 Для контент-менеджера:

• Интерактивные формы. Пользователи могут отправлять запросы и получать ответы прямо на странице.
• Динамический контент. Фильтры, вкладки, попапы работают плавно и быстро, не требуя перехода на новую страницу.
• Быстрая обратная связь. Формы обратной связи работают мгновенно, без перехода на страницу "Спасибо".

✅ Для всех вместе:

• Современный веб-сайт. AJAX — это стандарт для любого серьёзного проекта.
• Экономия времени. Один раз настроили — используете на всех страницах.
• Масштабируемость. Легко добавлять новые AJAX-функции без переделки существующих.
• Лучше SEO. Быстрые сайты ранжируются выше в поисковиках.

Реальные сценарии использования

Сценарий 1: Корзина интернет-магазина

Ситуация: Пользователь добавляет товар в корзину, но не хочет уходить со страницы каталога — он продолжает выбирать товары.

Решение: При клике на "В корзину" отправляется AJAX-запрос, сервер добавляет товар, возвращает обновлённый счётчик. Счётчик в шапке обновляется без перезагрузки.

Результат: Пользователь продолжает покупки, не теряя место в каталоге. Конверсия вырастает на 15-25%.

Сценарий 2: Фильтры товаров

Ситуация: Магазин с 500 товарами. Пользователь выбирает фильтры: цена, бренд, цвет. При каждом изменении фильтра страница перезагружается — это медленно и неудобно.

Решение: Фильтры отправляют AJAX-запрос, сервер возвращает отфильтрованный HTML-список товаров, JavaScript обновляет только блок с товарами.

Результат: Фильтрация работает мгновенно, пользователь не теряет положение скролла. Время до покупки сокращается на 40%.

Сценарий 3: Попап с формой заказа

Ситуация: На главной странице кнопка "Заказать звонок". Нужно показать форму, не уводя пользователя на другую страницу.

Решение: Клик открывает попап через layoutWepps.modal() с AJAX-загрузкой формы. Пользователь заполняет, отправляет — форма обрабатывается через AJAX, выводится сообщение "Спасибо".

Результат: Пользователь остаётся на главной странице, не теряет контекст. Конверсия формы выше на 30%.

Частые вопросы и заблуждения

❓ AJAX — это только для больших проектов?

Заблуждение: "AJAX сложный, нужен только для Facebook и Gmail"

Реальность: В Wepps Platform AJAX настраивается в 3 строки кода. Даже простая форма обратной связи с AJAX работает лучше, чем с перезагрузкой страницы. Пример: layoutWepps.request({ data: 'action=send', url: '/ext/Contacts/Request.php' }).

❓ SEO страдает от AJAX?

Заблуждение: "Поисковики не индексируют AJAX-контент"

Реальность: Основной контент загружается на сервере (SSR), AJAX используется для интерактивных элементов (попапы, фильтры, корзина). Google и Яндекс прекрасно индексируют такие сайты. Более того, быстрые сайты ранжируются выше.

❓ Что если JavaScript отключён у пользователя?

Ответ: В 2025 году менее 0.2% пользователей работают без JavaScript. Для критически важных форм (заказ, контакты) можно сделать fallback — если AJAX не сработал, форма отправится обычным способом с перезагрузкой.

Сравнение: традиционный подход vs AJAX

Пошаговое руководство для начинающих

Шаг 1: Создайте Request.php в расширении

В папке вашего расширения (например, WeppsExtensions/MyExtension/) создайте файл:

<?php
require_once '../../../configloader.php';
use WeppsCore\Request;

class RequestMyExtension extends Request {
    public function request($action="") {
        switch ($action) {
            case 'hello':
                echo '<p>Привет из AJAX!</p>';
                break;
            case 'time':
                echo '<p>Сейчас: ' . date('H:i:s') . '</p>';
                break;
        }
    }
}

$request = new RequestMyExtension($_REQUEST);

Шаг 2: Добавьте HTML-элементы

В вашем Smarty-шаблоне (.tpl) добавьте кнопку и блок для вывода:

<button id="btn-hello">Получить приветствие</button>
<div id="result"></div>

Шаг 3: Напишите JavaScript-обработчик

В файле .js вашего расширения:

$(document).ready(function() {
    $('#btn-hello').on('click', function() {
        layoutWepps.request({ 
            data: 'action=hello', 
            url: '/ext/MyExtension/Request.php', 
            obj: $('#result') 
        });
    });
});

Шаг 4: Подключите скрипт в Extension-классе

В MyExtension.php добавьте загрузку JS:

$this->headers->js("/ext/MyExtension/MyExtension.{$this->rand}.js");

Шаг 5: Протестируйте

Откройте страницу с расширением, нажмите кнопку — в блоке #result должен появиться текст "Привет из AJAX!" без перезагрузки страницы.

Совет: Откройте DevTools (F12) → вкладка Network, чтобы видеть AJAX-запросы в реальном времени.

Принципы работы с AJAX

✅ Делайте так:

• Используйте layoutWepps.request() вместо чистого XMLHttpRequest — готовый метод обрабатывает ошибки, показывает лоадеры
• Передавайте только нужные данные — если нужно обновить счётчик, возвращайте число, а не весь HTML-блок
• Показывайте индикатор загрузки — пользователь должен видеть, что запрос выполняется
• Обрабатывайте ошибки — если сервер не ответил, покажите дружелюбное сообщение, а не оставляйте пользователя в недоумении

❌ Не делайте так:

• Не грузите через AJAX то, что должно быть в HTML — основной контент для SEO загружайте на сервере, AJAX для интерактива
• Не игнорируйте безопасность — проверяйте данные в Request.php, используйте CSRF-токены для форм
• Не делайте AJAX-запросы в цикле — если нужно обновить 10 элементов, сделайте один запрос и обработайте массив

Типичные ошибки и как их избежать

Ошибка 1: Путь к Request.php неправильный

Что происходит: Запрос возвращает 404, контент не загружается
Как исправить: Проверьте путь — должен быть /ext/ИмяРасширения/Request.php (а не /packages/WeppsExtensions/...)
Как избежать: Копируйте пути из работающих примеров, проверяйте в DevTools → Network

Ошибка 2: Забыли require_once в Request.php

Что происходит: Fatal error — классы не найдены
Как исправить: В начале Request.php всегда добавляйте: require_once '../../../configloader.php';
Как избежать: Используйте готовый шаблон Request.php из существующих расширений

Ошибка 3: Не обработали action в switch

Что происходит: Запрос приходит, но ничего не возвращается или ошибка 404
Как исправить: Убедитесь, что case 'ваш_action': есть в switch($action) в методе request()
Как избежать: Логируйте $action в начале метода: error_log("Action: $action");

Следующие шаги

Теперь, когда вы понимаете AJAX, вы готовы:

1. Создать свой первый Request.php — начните с простого вывода текста
2. Сделать форму обратной связи без перезагрузки — используйте layoutWepps.request()
3. Добавить попап с динамическим контентом — попробуйте layoutWepps.modal()
4. Реализовать фильтры товаров через AJAX — объедините навыки работы с БД и AJAX

Итоги: что нужно запомнить

🎯 Ключевые моменты:

• AJAX — это технология обмена данными с сервером без перезагрузки страницы
• Request.php — специальный файл для обработки AJAX-запросов в расширениях
• layoutWepps.request() — готовый метод для отправки AJAX в Wepps Platform
• AJAX ускоряет сайт, улучшает UX и повышает конверсию
• Реализация занимает 3-5 строк кода (HTML, JS, PHP)

💡 Главный вывод:

AJAX превращает обычный веб-сайт в современное интерактивное приложение. В Wepps Platform это не сложная технология для избранных, а простой инструмент, доступный каждому разработчику. Начните с малого — одна AJAX-форма, один попап — и вы увидите, как меняется восприятие вашего сайта пользователями.

Полезные ресурсы

Примеры кода из Wepps Platform

Три способа использования AJAX в Popups:

// 1. AJAX в попап
$('#ajax-popup').on('click', function () {
    layoutWepps.modal({ 
        size: 'medium', 
        data: 'action=test', 
        url: '/ext/Popups/Request.php' 
    });
});

// 2. AJAX в существующий блок
$('#ajax-to-obj').on('click', function () {
    layoutWepps.request({ 
        data: 'action=test', 
        url: '/ext/Popups/Request.php', 
        obj: $('#test2') 
    });
});

// 3. AJAX в фоне (без вывода результата)
$('#ajax-hidden').on('click', function () {
    layoutWepps.request({ 
        data: 'action=test', 
        url: '/ext/Popups/Request.php' 
    });
});

Шаблон Request.php

<?php
require_once '../../../configloader.php';

use WeppsCore\Exception;
use WeppsCore\Request;

class RequestИмяРасширения extends Request {
    public function request($action="") {
        switch ($action) {
            case 'action1':
                // Ваш код
                echo '<p>Результат действия 1</p>';
                break;
            case 'action2':
                // Другой код
                echo json_encode(['status' => 'ok', 'data' => []]);
                break;
            default:
                Exception::error(404);
                break;
        }
    }
}

$request = new RequestИмяРасширения($_REQUEST);
$smarty->assign('get', $request->get);
$smarty->display($request->tpl);

Параметры layoutWepps.request()

layoutWepps.request({
    url: '/ext/Extension/Request.php',  // Путь к Request.php
    data: 'action=test&id=123',         // Данные для отправки
    obj: $('#result'),                  // Блок для вывода (опционально)
    callback: function(response) {      // Функция после успеха (опционально)
        console.log(response);
    }
});

Параметры layoutWepps.modal()

layoutWepps.modal({
    size: 'medium',                     // small, medium, large
    url: '/ext/Extension/Request.php',  // AJAX-загрузка (опционально)
    data: 'action=test',                // Данные для AJAX (опционально)
    content: $('#existing-block')       // Готовый контент (опционально)
});