AJAX на чистом JS

Урок 2

  Получите бесплатный доступ к первому уроку курса, для этого зарегистрируйтесь или войдите.

Урок 2

AJAX на чистом JavaScript

В этом видеоуроке покажу, как писать AJAX-запросы для WordPress без использования jQuery.

Иногда бывает так, что ваша тема WordPress не использует jQuery и возможно, что ради вашего AJAX-запроса его подключать и не нужно.

Чтобы скачать готовый код из этого урока, вам нужно купить курс.

XMLHttpRequest API

Конечно, когда мы отключим jQuery, нам придётся переписать не только код, связанный с AJAX-запросами, но и целиком весь остальной тоже. Обо всём этом подробно рассказываю в видео, тут же хотел чуть подробнее остановиться на том, как работает XMLHttpRequest.

Итак, для того, чтобы совершить запрос при помощи XMLHttpRequest, нужно выполнить следующие шаги:

  1. Создать XMLHttpRequest.
let trueRequest = new XMLHttpRequest();
  1. Инициализировать его. Обычно этот код идёт сразу после создания XMLHttpRequest и содержит параметры
trueRequest.open(method, URL, [async, user, password])
method
HTTP-метод запроса – POST или GET.
URL
URL-адрес обработчика запроса, может быть и строкой и объектом URL.
async
true – асинхронный запрос (то, что нам нужно), false – синхронный.
user, password
В случае, если обработчик запроса закрыт базовой HTTP-авторизацией, то можно передать сюда логин и пароль от неё.
  1. Послать запрос.
trueRequest.send( data );

В data мы можем передать какие-нибудь данные в AJAX-обработчик, но это делать не обязательно. Подробнее про передачу данных из формы в видеоуроке.

  1. Получить ответ.
trueRequest.onload = function() {
 
	var result = this.response;
 
};

Тут мы слушаем событие onload, которое срабатывает при получении какого-либо ответа. Обратите внимание, что сюда также приходят и ответы с HTTP-ошибками, например ошибки 404 или 503, которые можно проверить через this.status.

Пример 1

С jQuery:

$.ajax({
	type: 'POST',
	url: 'admin-ajax.php',
	data: data
});

Без jQuery:

var trueRequest = new XMLHttpRequest();
trueRequest.open( 'POST', 'admin-ajax.php', true );
trueRequest.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' );
trueRequest.send( data );

Пример 2

С jQuery:

$.ajax({
	type: 'GET',
	url: 'admin-ajax.php',
	success: function( result ) {
		// выполняем что-то в случае успеха
	}
});

Без jQuery:

var trueRequest = new XMLHttpRequest();
trueRequest.open('GET', 'admin-ajax.php', true);
 
trueRequest.onload = function() {
 
	var result = this.response;
 
};
 
trueRequest.send();
Купить курс
2800 ₽
  • 7 видеоуроков
  • Доступ к теме курса с готовым кодом после каждого урока
  • Доступ навсегда
Ваш email будет использоваться только для регистрации на сайте. На него придёт письмо с логином и паролем. Войдите, если уже зарегистрированы.