AJAX запрос без jQuery, отправка простой формы

Скажу сразу, я вовсе не против этой библиотеки, но возникла идея написать простой AJAX запрос без jQuery. Давайте для начала попробуем,

Ajax запрос c помощью jQuery

Размещаем json-файл с такими тестовыми данными:

{
	"site": "weblab.com.ua",
	"title": "Создание сайтов",
	"type": "web",
	"description": "Разработка сайтов",
	"objectData": {
		"test1": 1,
		"test2": 2
	},
	"arrayData": [
		1,
		2
	]
}

AJAX запрос ссылается на json-файл, надо подчеркнуть необходимость установки dataType: «json», чтобы избежать проблем обработки данных в ответе сервера:

$.ajax({
    url: 'http://weblab.com.ua/wp-content/uploads/ajaxmoka/ajax-simple.json',
    method: 'POST',
    data: {message: 'hello!'},
    dataType: 'json'
});

В данном случае это простой REST-запрос и нет разницы в типе отправляемого запроса GET или POST.
Данные формы требуют сериализации в строку JSON или мы бы могли предоставить свой массив с данными.
Нам нужно получить ответ от сервера и сделать что-нибудь, например показать сообщение в зависимости от успеха / неудачи. Следуя этим шагам, мы получим что-то вроде:

$.ajax({
  url: 'http://weblab.com.ua/wp-content/uploads/ajaxmoka/ajax-simple.json',
  method: 'POST',
  data: $('#myform').serialize(),
  dataType: 'json',
  beforeSend: function() { /* подготовка данных, отправка сообщений и т.д... */ },
  success: function(data) { /* сообщение успеха... */ },
  error: function(err) { /* сообщение неудачи... */ }
});

 

Ajax запрос Без jQuery

Теперь попробуем реализовать форму, но не использовать jQuery.

Преимущество without jQuery для меня было в том, чтобы сохранить быстроту и простоту кода. Тем не менее, с точки зрения UX мне кажется, что форма AJAX нужна, поэтому я приступил к достижению результата, который мне нужен, используя старый добрый JavaScript или native JS, помня о том, что решение без jQuery не должно быть громоздким.

Обработка несогласованности браузера

Это область, в которой jQuery “лучше всех”, надо учитывать, когда вы планируете отказаться от изящества кода. Это действительно нужно обрабатывать в каждом конкретном случае, но решение здесь действительно просто – мы можем обернуть наш код в условной инструкции, проверяющей поддержку того, что нам нужно, и если какая-либо проблема здесь, форма будет отбрасываться на ее основную Выполнение POST. Вы можете рассматривать использование AJAX как прогрессивное усовершенствование или возврат к POST как изящное деградация, это действительно не имеет значения здесь.

То, что мы собираемся проверить, это интерфейс FormData. Это упрощает работу, но не поддерживается в IE 9 или ниже.

Проверяя поддержку FormData, мы также проверим, есть ли форма в коллекции форм документа. Обратите внимание, что

document.forms[0]

ищет только первый экземпляр формы – вам нужно будет его адаптировать, если на странице, вероятно, будет больше одной формы.

if (document.forms[0] && window.FormData) { ... }

На самом деле это можно разделить на три простые части:

1. Некоторые простые назначения (определение сообщений о статусе и создание контейнера для них)
2. Создание нового экземпляра XMLHttpRequest, задающего тип запроса с его методами .open и .setRequestHeader
3. Прослушивание события отправки, а затем:
   • Предотвращение отправки по умолчанию
   • Присоединение контейнера, который мы создали ранее для наших сообщений о статусе
   • Схват данных из нашей формы с помощью объекта FormData. Отправка данных с помощью метода .send XMLHttpRequest.
   • Прослушивание ответа с помощью метода .onreadystatechange и отображение соответствующего сообщения о статусе.

Весь код:

if (document.forms[0] && window.FormData) {

	var message = new Object();
	message.loading = 'Загрузка...';
	message.success = 'Спасибо! У Вас все получилось';
	message.failure = 'Ээххх! Что-то пошло не так...';

	var form = document.forms[0];

	var statusMessage = document.createElement('div');
	statusMessage.className = 'status';

	// Настройка AJAX запроса
	var request = new XMLHttpRequest();
	request.open('POST', 'http://weblab.com.ua/wp-content/uploads/ajaxmoka/ajax-simple.json', true);
	request.setRequestHeader('accept', 'application/json');

	// Добавляем обработчик на событие `submit`
	form.addEventListener('submit', function(event) {
	    event.preventDefault();
	    form.appendChild(statusMessage);

	    // Это простой способ подготавливить данные для отправки (все браузеры и IE > 9)
	    var formData = new FormData(form);

	    // Отправляем данные
	    request.send(formData);

	    // Функция для наблюдения изменения состояния request.readyState обновления statusMessage соответственно
	    request.onreadystatechange = function () {
	        // <4 =  ожидаем ответ от сервера
	        if (request.readyState < 4)
	            statusMessage.innerHTML = message.loading;
	        // 4 = Ответ от сервера полностью загружен
	        else if (request.readyState === 4) {
	            // 200 - 299 = успешная отправка данных!
	            if (request.status == 200 && request.status < 300)
	                statusMessage.innerHTML = message.success;
	            else
	                form.insertAdjacentHTML('beforeend', message.failure);
	        }
	    }
	});

}

 

Результат

На изображении ниже вы можете увидеть заполненную форму слева, и ответ будет отображаться, если передача будет выполнена справа.