AJAX на чистом JavaScript

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

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

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

XMLHttpRequest API

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

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

1. Создать XMLHttpRequest.

let trueRequest = new XMLHttpRequest();

2. Инициализировать его. Обычно этот код идёт сразу после создания XMLHttpRequest и содержит параметры

trueRequest.open(method, URL, [async, user, password])

method

HTTP-метод запроса – POST или GET.

URL

URL-адрес обработчика запроса, может быть и строкой и объектом URL. В целом тут можно также передать и параметр экшен ?action=truemisha (кстати, если не передать или передать экшен неправильно, то есть риск словить ошибку 400).

async

true – асинхронный запрос (то, что нам нужно), false – синхронный.

user, password

В случае, если обработчик запроса закрыт базовой HTTP-авторизацией, то можно передать сюда логин и пароль от неё.

3. Послать запрос.

trueRequest.send( data );

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

4. Получить ответ.

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();

Список уроков

• Пишем AJAX-запрос28:09
• AJAX на чистом JS09:00
• AJAX в админке. Безопасность17:42
• Загрузка постов. Пагинация38:26
• Фильтры на AJAX30:01
• AJAX комментарии23:00
• AJAX поиск14:06