Термин «AJAX» является аббревиатурой английских слов Asynchronous JavaScript And XML. Называть его отдельной технологией не совсем корректно, скорее это особый подход к построению web-страниц, который позволяет обновлять их содержимое без перезагрузки. Изначально его использование позволяло экономить трафик и сокращать время загрузки страниц, а в наши дни главным преимуществом стало удобство взаимодействия пользователя с сайтом.
История развития AJAX
Попытки реализовать динамическое изменение страниц предпринимались еще в 90-е годы прошлого века. Так компания Microsoft в браузере Internet Explorer версии 3.0 вводит новый элемент разметки – IFRAME, а впоследствии реализует новый подход построения web-страниц – Remote Scripting. Однако рассматриваемый в этом материале термин появился в веке XXI – в 2005 году свет увидела статья Джесси Джеймса Гарретта. Её название было достаточно амбициозным – «Новый подход к разработке web-приложений». По сути своей это был набор ряда новых технологий, позволяющих обновлять содержимое web-страниц «на лету». На материал обратила внимание компания Google – и с тех пор началось шествие AJAX по всему миру. Gmail и Google Maps – классические примеры использования AJAX, известные практически каждому пользователю Сети.
Принцип работы
Условно в работе AJAX можно выделить четыре ключевых этапа:
- Определенным действием (например, нажатием кнопки в форме обратной связи) пользователь осуществляет вызов AJAX;
- Браузер отправляет на сервер запрос с нужными данными. Именно запрос формирует пакет информации, которая будет загружена на частично обновленной странице. Это могут быть сведения из определенной базы данных, медийные материалы (изображения, видеоролики и т. д.);
- Сервер формирует пакет информации и пересылает её в браузер пользователя;
- Браузер использует технологию JavaScript для отображения полученной информации и обновляет на странице нужные поля данных.
Если говорить более конкретно – AJAX создает новый объект XMLHttpRequest, выступающий в качестве «посредника» между пользовательским браузером и сервером. Для небольших объемов данных используется запрос типа GET, если же на сервер нужно передать значительный объем информации, то используется запрос типа POST. AJAX использует асинхронную передачу, так что хорошим тоном считается оповещать пользователя об обработке запроса – дабы не возникало чувство «зависания» браузера.
Преимущества AJAX
Одно из главных преимуществ подхода – сокращение размеров трафика между пользователем и сайтом. Второй важный момент – снижение нагрузки на сервер. В результате увеличивается скорость работы онлайновых сервисов – будь то классический ящик электронной почты или клиент браузерной игры. Применительно к современным реалиям – использование AJAX не вызывает остановки онлайновых плееров, что особенно ценно для сайтов с хостингом медийного контента (видео и аудио).
Применимость AJAX не ограничивается одними лишь формами – например, такой подход может быть использован для проверки занятости логина при создании аккаунта на различных онлайновых площадках. А еще Google использует AJAX для формирования запросов по первым буквам или словам, которые пользователь вводит в строке поиска.
Недостатки AJAX
Выше было сказано, что подход базируется на использовании JavaScript – это значит, что данный функционал должен быть всегда включен в вашем браузере. Функционал обновления «на лету» не слишком хорошо взаимодействует с остальными средствами браузера – например, может перестать работать кнопка «Назад» (это вполне логично, ведь с точки зрения браузера страница осталась прежней). Не всегда страница, полученная с помощью AJAX, может быть добавлена в закладки – в ряде случаев необходимо использование специальных плагинов.
Использование JavaScript сказывается на уровне безопасности – возможность перехвата запроса или ответа на него чревата утечкой конфиденциальной информации. Но самая главная проблема заключается во взаимодействии с поисковыми системами. Страницы сайта с поддержкой AJAX крайне неохотно индексируются поисковыми ботами – динамическая подгрузка данных искажает статистику посещаемости. В результате может возникнуть ситуация, при которой часть содержимое сайта будет просто «не видна» поисковой системе – с предсказуемым результатом. В Сети представлен ряд методик, позволяющих минимизировать этот недостаток, но говорить об их 100% эффективности пока не приходится.
Примеры работы
Предположим у нас в корне сайта находится файл test.php и содержит такой php код:
if($_GET['name'] == 'яблоки'){
echo 'Текст про яблоки.';
}
К примеру сейчас мы находимся на главной странице сайта. Чтобы нам получить информацию о яблоках нам нужно перейти в файл test.php и передать get параметр name равный значению "яблоки" т.е. У нас получится такая конструкция https://адрессайта.рф/test.php?name=яблоки
Получается совсем не динамично 😐
Попробуем добавить динамики - получим информацию со страницы test.php и выведем её на главной странице сайта.
Загруженную информацию из файла test.php будем выводить в div блоке с классом load__content
<html>
<head>
<title> Тест ajax </title>
</head>
<body>
<div class="load__content"> </div>
</body>
</html>
Следующий код будет содержать полный html код и ajax запрос к файлу test.php. Обратите внимание на head В него мы добавили подключили библиотеку jQuery для удобной работы с ajax и DOM элементами. Эта библиотека может очень многое, более подробно разберём немного позже, а пока выполним первый ajax запрос.
type Может принимать как GET и POST значение. В данном случаем мы использовали GET Если использовать POST, то и в файле test.php нужно будет заменить $_GET['name'] на $_POST['name']
<html> <head> <title> Тест ajax </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> </head> <body> <div class="load__content"> </div> </body> <script> let value_name = 'яблоки'; // значение которое отправим в test.php $.ajax({ type: "GET", url: "/test.php", data: {name:value_name}, success: function(data){ $(".load__content").html(data); // загрузим результат работы test.php в div блок } }); </script> </html>
Может быть интересно
Комментарии (47)