AJAX на чистом JavaScript

27.07.2025 - 17:50

1566

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

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

XMLHttpRequest API

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

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

Создать XMLHttpRequest.

let skRequest = new XMLHttpRequest();

let skRequest = new XMLHttpRequest();

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

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

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

method

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

URL

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

async

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

user, password

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

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

skRequest.send( data );

skRequest.send( data );

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

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

skRequest.onload = function() {
	var result = this.response;
};

skRequest.onload = function() {
	var result = this.response;
};

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

Пример 1

С jQuery:

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

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

Без jQuery:

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

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

Пример 2

С jQuery:

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

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

Без jQuery:

var skRequest = new XMLHttpRequest();
skRequest.open('GET', 'admin-ajax.php', true);
skRequest.onload = function() {
	var result = this.response;
};
skRequest.send();

var skRequest = new XMLHttpRequest();
skRequest.open('GET', 'admin-ajax.php', true);
skRequest.onload = function() {
	var result = this.response;
};
skRequest.send();