Как сделать ссылку без перезагрузки страницы

Вы замечали, что на некоторых сайтах (например, на wdcb.ru/mining/sprav) при клике по ссылке страница не перезагружается, а контент обновляется мгновенно? Это реализовано с помощью технологии AJAX (Asynchronous JavaScript and XML). В этой статье мы разберём, как работает такой механизм, и покажем, как сделать ссылку без перехода на новую страницу.

Что такое AJAX и как он работает

AJAX позволяет браузеру отправлять запросы на сервер и получать ответ без полной перезагрузки страницы. Вместо того чтобы переходить по ссылке, JavaScript перехватывает клик, отправляет запрос на сервер, а затем динамически обновляет часть HTML-кода на странице. Это создаёт эффект плавного обновления контента.

Простой пример реализации

Для создания ссылки без перезагрузки страницы нужно:

• Написать HTML-ссылку с атрибутом href, но предотвратить стандартный переход.
• Использовать JavaScript (например, fetch или XMLHttpRequest) для загрузки данных.
• Обновить содержимое блока на странице с помощью innerHTML.

Код на JavaScript

Вот минимальный пример:

<a href='#' onclick='loadContent("page.html"); return false;'>Нажми меня</a><div id='content'></div><script>function loadContent(url) { fetch(url) .then(response => response.text()) .then(data => { document.getElementById('content').innerHTML = data; }); }</script>

Популярные библиотеки для упрощения

Вместо написания кода с нуля можно использовать готовые решения. jQuery упрощает AJAX-запросы методом .load(). HTMX позволяет добавлять динамику без написания JavaScript - достаточно указать атрибуты hx-get или hx-trigger. Turbo (из Hotwire) автоматически превращает все ссылки в AJAX-ссылки.

Преимущества и недостатки

Плюсы: улучшенный пользовательский опыт (нет мерцания страницы), экономия трафика (загружается только часть контента), возможность создавать одностраничные приложения (SPA). Минусы: усложнение разработки, проблемы с SEO (поисковые системы могут не индексировать динамический контент), необходимость обрабатывать историю браузера (кнопки «Назад» и «Вперёд»).

Советы по SEO для AJAX-ссылок

Чтобы поисковики корректно индексировали сайт с динамической загрузкой, используйте:

• Правильные URL с хэшами (#!) или History API.
• Прогрессивное улучшение (ссылка работает как обычная без JavaScript).
• Серверный рендеринг (SSR) для важных страниц.

Теперь вы знаете, как сделать ссылку без перезагрузки страницы. Начните с простого примера на fetch и постепенно внедряйте библиотеки для более сложных проектов.