Хочу полностью уйти от 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
