AJAX

AJAX – это технология, позволяющая обращаться к серверу и не перезагружать при этом страницу. Обычно используется для динамической подгрузки содержимого странички, к примеру в интернет-магазинах или на маркетплейсах. С ее помощью пользоваться ресурсом становится удобнее, вырастает скорость взаимодействия. Аббревиатура расшифровывается как Asynchronous JavaScript and XML, из названия очевидно, что для работы технологии необходим JS.

История технологии

Идеи, отдаленно напоминающие AJAX, использовались в веб-разработке еще в 90-х годах. К ним можно отнести Remote Scripting – инструмент Microsoft для удаленного вызова серверных процедур с помощью клиентского скрипта. Механизм был придуман еще в 1998 году, а тег iframe, позволяющий встраивать один HTML-документ в другой, появился даже раньше – в 1996-м. Но эти способы не давали тех широких возможностей, которые обеспечила разработчикам технология AJAX. В 2005 году глава компании Adaptive Path Джесси Джеймс Гарретт написал книгу о принципе, который на тот момент использовали почтовые клиенты, дал ему название AJAX и подробно описал его работу. С тех пор технология стала инструментом широкого использования: она дает возможность работать с интернет-страницей как с обычным приложением, не обновляя ее. Это удобно и для владельца сайта, и для пользователя.

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

Узнать, что на сайте используется AJAX, можно даже по его внешнему виду. Если ресурс позволяет подгрузить новую информацию без обновления страницы и генерирует какой-то контент динамически, значит, он работает по этой технологии.

Этапы. Понять, что такое AJAX и как он функционирует, поможет алгоритм действий – четкий список этапов его работы:

• пользователь совершает на странице действие, которое вызывает AJAX. Обычно это нажатие кнопки «Узнать больше», «Загрузить еще» и других похожих;
• запрос отправляется на сервер, с ним передаются необходимые сведения;
• сервер обращается к базе данных, получает необходимую информацию, отправляет эти сведения браузеру;
• тот расшифровывает ответ с помощью JavaScript и выводит новую информацию пользователю.

Обмен данными. Он происходит за счет объекта XMLHttpRequest, своеобразного буфера между сервером и браузером. К серверной части обращается POST- или GET-запрос. Первый используется для больших объемов данных, второй обращается к конкретному документу на сервере и передает как аргумент ссылку на страницу. После того как сервер получит запрос, он формирует ответ в формате XML или JSON.

• XML сразу переводится в HTML;
• в случае с JSON браузер запускает полученный код, создается объект JavaScript;
• иногда ответ – простой текст, тогда он сразу же выводится на странице без лишних преобразований.

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

Преимущества технологии AJAX

Снижение нагрузки. Благодаря тому, что пользователь не обновляет страницу, нагрузка на сайт серьезно снижается. Иногда человек может выполнить целый комплекс действий, и это не потребует перезагрузки: к серверу обращаются только за конкретными данными, а не за огромным количеством сведений сразу.

Увеличение скорости. Взаимодействовать с AJAX намного быстрее, чем обновлять всю страницу. Когда пользователь только заходит на сайт, ему подгружается только часть информации, остальную он получает динамически, а подгрузить условные 50 товаров намного быстрее, чем 500. Вдобавок пользователь быстро видит результат действий: для получения новой информации не нужно ждать, пока обновится страница.

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

Гибкие возможности. Настроить AJAX можно не только для отображения оставшегося текста или списка товаров. С помощью технологии создаются формы и опросы с быстрым получением результатов, она же упрощает регистрацию на сервисах: можно ввести логин и сразу узнать, свободен ли он. Онлайн-банкинги динамически отслеживают цифры номера карты, которые ввел пользователь, и в режиме реального времени вычисляют, какой платежной системой он пользуется. Используют AJAX и поисковые системы: если ввести часть запроса, поисковая строка показывает возможные варианты его продолжения. Это тоже реализуется с помощью AJAX. Для пользователя такая система крайне удобна.

Недостатки AJAX

Ни одна система не лишена недочетов и недостатков, и в случае с технологией динамической подгрузки основная сложность – оптимизация и связанные с ней факторы. Существует и еще несколько минусов.

Снижение безопасности. Исходный код открыт в браузере, злоумышленники могут этим воспользоваться, поэтому AJAX упрекают в возможном уменьшении защищенности сайта.

Отсутствие интеграции. Если подгружать новую информацию, перелистывая страницы, можно в любой момент вернуться назад с помощью специальной кнопки в браузере или установить на определенный контент закладку. Интеграции с этими возможностями браузера у AJAX нет, потому что подгруженная информация не кешируется и не остается в истории посещений. Правда, в случае с кнопкой «Назад» проблему можно решить, составив специальный скрипт.

Искажение статистики. AJAX серьезно мешает составлять достоверную статистику посещений. Пользователь листает страницы, но переход не регистрируется, так как это происходит динамически, без обновления страничек, поэтому количество просмотров занижается. Этот недостаток несущественен, если сайт не слишком большой, но для проектов с высоким трафиком разница с реальной посещаемостью может быть огромной.

Необходимость в JavaScript. Без включенного в браузере JavaScript технология просто не будет работать. JS поддерживают все современные браузеры, но, если пользователь решил отключить его выполнение, он не сможет нормально пользоваться сайтом. Это мешает и поисковым системам: из-за того что часть содержимого показывается только при выполнении запроса, поисковик не может ее проиндексировать.

Сложности с индексированием. Проблемы с SEO-продвижением – существенный недостаток технологии. Из-за того что часть контента доступна только после вызова AJAX, она не индексируется поисковиками: робот просто ее не замечает. В результате страдают показатели ранжирования и, следовательно, позиции.

Как снизить влияние AJAX на ранжирование

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

• Ключевую часть, которая особенно важна для индексирования, лучше сделать статической и размещать в самом начале страницы.
• Еще один прием – кеширование динамических страниц, что позволяет отображать их в качестве статических.
• Вызывать AJAX лучше не событием onClick, а якорем.
• Иметь на сайте sitemap.xml практически обязательно, это ускоряет и облегчает индексацию.

Как переписать ссылки. Динамическую подгрузку контента лучше дублировать ссылками. Так у пользователей, отключивших JavaScript, и поисковых роботов содержимое будет отображаться корректно.

• URL-адреса динамических страниц содержат в себе символ #. Их следует переписать, добавив после каждого восклицательный знак. Вот так: «#!».
• После этого нужно прописать для каждой такой страницы HTML-версию, доступную по определенному адресу. Адреса создаются с помощью замены сочетаний «#!» на «?_escaped_fragment_=».
• На каждой странице AJAX следует прописать метатег ' meta name="fragment" content="!" '.

Обязательно сверяйте сохраненные версии сайта с его AJAX-версиями, чтобы убедиться, что все страницы отображаются нормально и без ошибок. Правильное использование технологии поможет обеспечить пользователям комфорт при работе с сайтом и одновременно не потерять позиции в поисковой выдаче.