Теория и практика AJAX-запросов

В этой статье мы разберем основы AJAX запросов. Научимся настраивать и отправлять запрос, а также получать ответ от сервера.

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

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

AJAX – это асихронный JavaScript и XML и он не является языком программирования.

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

AJAX позволяет снизить объем передаваемых данных, а также обеспечивает плавность веб-страниц. В запросах AJAX, обязательно присутствуют три участника: браузер, JavaScript и сервер.

Что делает браузер?

• отображает веб-страницу
• выполняет JavaScript код
• содержит объект XMLHttpRequest

Какая роль у JavaScript?

• инициирует обращение к серверу
• обрабатывает ответ
• добавляет новые данные на страницу

Чем занимается веб-сервер?

• принимает запрос от браузера
• отправляет ему информацию обратно

Как на практике происходит AJAX запрос?

1) Создается объект XMLHttpRequest

Благодаря этому объекту мы посылаем запрос и получаем ответ.

2) Пользователь отправляет запрос на сервер

С помощью методов open() и send(), объекта XMLHttpRequest, можно отправлять AJAX запросы. В методе open() первым параметром, мы должны указать способ отправки. Вторым параметром, указывается URL, куда будет отправлен запрос.

Непосредственно посылает на сервер запрос – метод send(). При GET запросе тело запроса остается пустым.

3) Сервер обрабатывает запрос

В большинстве случаев, сервер обрабатывает и возвращает запрос на языке PHP.

4) Принятие и обработка ответа

С помощью свойства readyState, можно узнать состояние запроса. При изменении состояния, срабатывает событие onreadystatechange.

Применим, полученные знания на практике.

Пример

Вместо текста в параграфе, загрузить другой текст, в фоновом режиме.

Вешаем функцию loadTxt(), на кнопку, при нажатии на которую произойдет замена текста.

Будет вызван обработчик события 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.