Как улучшить код для работы с ajax без jquery? Хочу полностью уйти от jquery, однако нельзя не признать, что с ней удобно работать с ajax. Написал следующий сниппет:"use strict";
let $_ajax = (function(){
class Ajax {
constructor() {
this.XHR = new XMLHttpRequest();
}
_send(params) {
if(params.sync === undefined) params.sync = true;
let x = this.XHR;
x.open(params.method, params.url, params.sync);
x.onreadystatechange = function() {
if (x.readyState == 4)
params.callback(x.responseText)
};
if (params.method == 'POST')
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
if(params.prepare)
this.prepare(params.prepare);
if(params.progress)
this.progress(params.progress);
x.send(params.data);
}
prepare(callback) { //метод, который вызывается перед отправкой запроса, если указан params.prepare
callback();
}
progress(callback) { //метод-обертка для события onprogress; вызывается если указан параметр params.progress
this.XHR.onprogress = function(e) {
callback(e)
}
}
/*
в следующие методы будем передавать единственный аргумент вида:
params = {
url: string, - адрес, по которому идет запрос
data: object, - объек, содержащий данные
callback: function, - функция обратного вызова
sync: bulean, - параметр, определяющий ассинхронность
prepare: function, - функция перед отправкой запроса
progress: function - функция индикатор прогресса
}
*/
get(params) {
let query = [];
for (let key in params.data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(params.data[key]));
}
this._send({
url: params.url + (query.length ? '?' + query.join('&') : ''),
callback: params.callback,
method: 'GET',
data: null,
sync: params.sync,
prepare: params.prepare,
progress: params.progress
});
};
post(params) {
let query = [];
for (let key in params.data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(params.data[key]));
}

this._send({
url: params.url,
callback: params.callback,
method: 'POST',
data: query.join('&'),
sync: params.sync,
prepare: params.prepare,
progress: params.progress
});
};
}
return new Ajax();
})();
и потом вызываем так:$_ajax.post({
url: 'res.php',
data: data,
callback: function(response) {
// код функции
},
prepare: function() {
// код функции
},
progress: function(e) {
// код функции
}
});
Как видите, всё оформлено в новомодном es6. Посоветуйте, что изменить/доработать/убрать/оптимизировать?
p.s. методы readystatechange и load взаимозаменяемы или нет? Второй как я понял является более современным вариантом для XHR2

21 Авг 2019 в 07:05
203 +1
0
Ответы
1

В вашем коде уже присутствуют методы для работы с GET и POST запросами, однако можно добавить поддержку других типов запросов, таких как PUT, DELETE и т. д.

Предлагаю добавить обработку ошибок в запросах, чтобы было возможно обрабатывать случаи, когда сервер возвращает ошибку.

Можно добавить возможность передавать заголовки запроса в аргументах методов GET и POST.

Вы можете оптимизировать код, например, вынести общую функциональность из методов GET и POST в отдельную функцию для повторного использования.

Относительно вашего вопроса о readystatechange и load: событие load будет запускаться только в случае успешного завершения запроса, в то время как событие readystatechange будет запускаться на различных этапах выполнения запроса (0 – запрос не инициализирован, 1- инициализирован, 2- отправлен, 3- в процессе обработки запроса, 4- запрос завершен). В зависимости от вашей логики, вам нужно выбрать, какое событие лучше использовать.

20 Апр в 13:07
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Название заказа не должно быть пустым
Введите email
Бесплатные доработки
Гарантированные бесплатные доработки
Быстрое выполнение
Быстрое выполнение от 2 часов
Проверка работы
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Название заказа не должно быть пустым
Введите email
Доверьте свою работу экспертам
Разместите заказ
Наша система отправит ваш заказ на оценку 92 588 авторам
Первые отклики появятся уже в течение 10 минут
Прямой эфир