Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Ajax

Пример AJAX на Vanilla JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Introduction to AJAX for Front-End Designers
A Beginner’s Guide to AJAX With jQuery

Russian (Pусский) translation by Andrey Bernatskiy (you can also view the original English article)

Данная статья – это продолжение нашего знакомства с AJAX. Ниже мы рассмотрим пример, в котором используется XMLHttpRequest API для инициализации AJAX запроса.

AJAX пример

Давайте рассмотрим вот такую базовую структуру:

И ее визуализацию:

Example

Мы хотим, чтобы по клику на кнопку срабатывал AJAX запрос. Потом, появлялся элемент с ID bio и заполнялся данными из ответа. Данные статичны и хранятся в файле Bio.txt.

Обратите внимание: файл загружен на сервер Codepen. То есть проблемы с ограничением домена у нас не возникнет.

Ниже представлен AJAX код:

Разбираем все по шагам

Давайте разберем код выше:

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

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

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

  • Задаем тип запроса с помощью метода open. Этот метод принимает два обязательных параметра и 3 опциональных. Первый параметр задает HTTP метод (GET или POST). Во втором параметре указывается URL страницы, куда мы посылаем запрос. В третьем параметре можно указать тип запроса синхронный или асинхронный (значение по-умолчанию true). Для аутентификации можно использовать два дополнительных параметра.

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

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

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

AJAX_Body

Итоговое демо выглядит так:

Success

В другом случае, если же запросить файл, которого нет, то будет показано сообщение:

Error

Обратите внимание: Если вы запустили этот пример на локальном компьютере (и файл Bio.txt хранится на нем), то у вас будет другое сообщение об ошибке. К примеру, вы можете увидеть следующее:

Error_Local

Ниже представлено демо на Codepen:

Заключение

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

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.