Пример использования AJAX с Vanilla Javascript

0
1348

Эта статья является частью из серии под названием «AJAX для веб-разработчиков». Предыдущая статья: Введение в AJAX для front-end разработчиков.

В этой мы рассмотрим пример, в котором будем использовать XMLHttpRequest API для инициализации AJAX запроса.

AJAX пример

Взгляните на следующую структуру, которая будет основой для нашего примера:

Соответственно выглядеть это будет примерно так:

ajax_1

Чего мы хотим добиться? Мы хотим, чтобы при нажатии на кнопку выполнялся AJAX запрос. Затем появлялся элемент, имеющий id="bio" и заполнялся данными из ответа. Данные статичны и хранятся в файле biog.txt

Ниже вы видите используемый AJAX код:

Разбираем по частям.

Ниже описаны основные шаги для данного запроса.

—  Создается объект XMLHttpRequest.

— Пишем функцию, которая запускается, когда сервер возвращает данные. Объект XMLHttpRequest имеет свойство onreadystatechange, в котором хранится эта функция. Каждый раз, когда состояние запроса изменяется, вызывается эта функция.

— посмотрим на другие свойства объекта XMLHttpRequest. Первое свойство – readyState, определяет состояние запроса. На протяжении всего AJAX запроса значение изменяется и может быть от 0 до 4 (Например, значение 4 означает, что все данные получены). Второе свойство – status. Указывает, успешно ли запрос выполнен или нет (например, 200 значит, что запрос выполнен успешно). В этом примере предполагается, что если мы успешно извлекли данные и запрос AJAX прошел успешно, то мы обновляем содержимое необходимого элемента. Иначе же выводим соответствующее сообщение об ошибке из объекта XMLHttpRequest.

— определяем тип запроса с помощью метода open. Этот метод принимает 2 обязательных и три необязательных аргумента. Первый обязательный параметр определяет HTTP метод (get или post). Второй параметр определяет URL страницы, куда мы отправляем запрос. Так же мы можем указать третий булевый параметр, что запрос либо асинхронный (стоит по умолчанию – true) или синхронный, но это необязательно. Остальные 2 необязательных параметра могут использоваться для аутентификации.

— отправляем запрос при нажатии на кнопку с помощью метода send. Так же скрываем кнопку.

Обратите внимание: Если вам действительно нужна поддержка старой версии Internet Explorer, вы можете создать объект ActiveXObject (См. Шаг1)

Следующая визуализация показывает наш запрос в консоли браузера.

ajax_4

Окончательный вариант выглядит следующим образом:

ajax_2

Если же мы запросим несуществующий файл, то мы увидим сообщение об ошибке:

ajax_3

 

А вот и итоговый пример в песочнице:

Заключение.

В этом уроке мы рассмотрели, как можно реализовать простой AJAX запрос с помощью vanilla JavaScript.

В следующем уроке данной серии мы сфокусируемся на jQuery функциях и методах для AJAX. А в последнем уроке данной серии мы разберем более сложный пример. Следите за обновлениями!

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя