How to improve code to work with ajax without jquery?

Question

JavaScript

I want to completely get away from jquery, but one cannot but admit that it is convenient to work with it with ajax. Wrote the following snippet:

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

and then call it like this:

$_ajax.post({
                    url: 'res.php',
                    data: data,
                    callback: function(response) {
                        // код функции
                    },
                    prepare: function() {
                        // код функции
                    },
                    progress: function(e) {
                        // код функции
                    }
                });

As you can see, everything is decorated in newfangled es6. Advise what to change/finish/remove/optimize?
p.s readystatechange and load methods are interchangeable or not? The second, as I understand it, is a more modern option for XHR2

Answer 1

Извините, но чем, собственно, Вас не устроил jQuery?:)

Answer 2

Этот велосипед, если он не чисто для обучения, никому не нужен. Если уже использовать ES6 то можно и новый fetch (https://learn.javascript.ru/fetch). А если уж так хочется, то ajax api в jquery style уже никому не интересен пару лет, как появились Promises. Так что лучше уж очередной полифил fetch'a изобретать.