как конвертировать Jquery и Ajax скрипт в чистый Javascript

Question

Я хочу преобразовать следующий jquery и ajax сценарий в чистый javascript

var cart = {
    'add': function(product_id, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },
            success: function(json) {

                if (json['redirect']) {
                    location = json['redirect'];
                }

                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    }
}

Я пробовал это, но я думаю, что я делаю все неправильно

I После https://github.com/nefe/You-Dont-Need-jQuery и http://youmightnotneedjquery.com/ для моих рекомендаций

любой может помочь мне в решении этой проблемы

 var cart = {
    'add': function(product_id, quantity) {
        var request = new XMLHttpRequest();
        request.open('POST', 'index.php?route=checkout/cart/add', true);

        request.onload = function() {
            if (this.status >= 200 && this.status < 400) {

                if (json['redirect']) {
                    location = json['redirect'];
                }

                fetch('index.php?route=common/cart/info ul li').then(data => data.text()).then(data => {
                    document.querySelector('#cart > ul').innerHTML = data
                }).then(completeCallback)



                var json = this.response;
            }
        };

        request.onerror = function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        };

        request.send('product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1));
    }
}