Теория и практика AJAX-запросов
В этой статье мы разберем основы AJAX запросов. Научимся настраивать и отправлять запрос, а также получать ответ от сервера.
Классическая модель запросов к базе данных или например при отправке формы, неизбежно перезагружала страницу. Это значило, что мы принудительно уходили с текущей страницы и получали от сервера новую страницу.
Такой подход очень мешает эффективному взаимодействию с веб-сайтом. Поэтому при создании по настоящему интерактивных и динамических страниц, никак не обойтись без технологии AJAX.
AJAX – это асихронный JavaScript и XML и он не является языком программирования.
Полезность AJAX состоит в том, что он позволяет обращаться к серверу, делать новые http запросы, без перезагрузки страницы. Именно благодаря его асинхронности, взаимодействие пользователя со страницей, никогда не прекращается.
AJAX позволяет снизить объем передаваемых данных, а также обеспечивает плавность веб-страниц. В запросах AJAX, обязательно присутствуют три участника: браузер, JavaScript и сервер.
Что делает браузер?
- отображает веб-страницу
- выполняет JavaScript код
- содержит объект XMLHttpRequest
Какая роль у JavaScript?
- инициирует обращение к серверу
- обрабатывает ответ
- добавляет новые данные на страницу
Чем занимается веб-сервер?
- принимает запрос от браузера
- отправляет ему информацию обратно
Как на практике происходит AJAX запрос?
1) Создается объект XMLHttpRequest
Благодаря этому объекту мы посылаем запрос и получаем ответ.
var xhttp = new XMLHttpRequest();
2) Пользователь отправляет запрос на сервер
С помощью методов open() и send(), объекта XMLHttpRequest, можно отправлять AJAX запросы. В методе open() первым параметром, мы должны указать способ отправки. Вторым параметром, указывается URL, куда будет отправлен запрос.
xhttp.open("способ_отправки", "URL");
Непосредственно посылает на сервер запрос – метод send(). При GET запросе тело запроса остается пустым.
xhttp.send();
3) Сервер обрабатывает запрос
В большинстве случаев, сервер обрабатывает и возвращает запрос на языке PHP.
4) Принятие и обработка ответа
С помощью свойства readyState, можно узнать состояние запроса. При изменении состояния, срабатывает событие onreadystatechange.
xhttp.onreadystatechange
Применим, полученные знания на практике.
Пример
Вместо текста в параграфе, загрузить другой текст, в фоновом режиме.
<p id="out">Позвольте AJAX изменить этот текст.</p>
Вешаем функцию loadTxt(), на кнопку, при нажатии на которую произойдет замена текста.
<button type="button" onclick="loadTxt()">Изменить контент</button>
Будет вызван обработчик события onreadystatechange, если состояние готовности запроса readyState равно 4 (прием ответа завершен) и код статуса HTTP, возвращенный сервером соответствует 200. Сервер возвращает новые данные в responseText, которые будут выведены внутри параграфа с идентификатором out. Open() настраивает запрос, send() открывает соединение и отправляет запрос на сервер. Новые данные подгружаются из текстового или XML файла.
See the Pen ajax-request by porsake (@porsake) on CodePen.
Заключение
AJAX – это более продвинутая реализация запросов клиентов к серверу. В чем разница? В традиционном вебе, при обращении к серверу, происходит перезагрузка страницы и документ подгружается полностью. Технология AJAX позволяет подгрузить часть этого документа, обратившись к серверу в фоновом режиме, без перезагрузки страницы.
AJAX технологии на примере социальных сетей
Например, вы зашли на страницу фейсбука и видите только три новости, при прокрутке страницы вниз, будут подгружаться новые посты. Как это работает?
JavaScript по протоколу HTTP посылает запрос на сервер. На сервере PHP формирует ответ с новыми постами, отдает их на сторону клиента и браузер отображает их на странице, используя HTML и CSS. Не существует отдельной технологии AJAX, это просто совместная работа нескольких технологий, где ведущая роль отведена JavaScript.
-
- Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.