Преобразовать код JQuery Ajax в простой JavaScript

Question

Это код Ajax в моем приложении, он добавляет объект в модель без обновления страницы и не показывает ошибок:

$(document).on('submit', '#addbookform', function (e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: "{% url 'books:home' %}",
        data: {
            name: $('#name').val(),
            price: $('#price').val(),
            num_of_pages: $('#num_of_pages').val(),
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function () {
            alert('Form submitted successfully!!');
        }
    })
})

Я пытался преобразовать его в JavaScript, однако он добавляет объекты для моделирования, но он обновляет страницу и, кроме того, показывает ошибку 403 в консоли, а затем исчезает.

document.querySelector('#addbookform').onsubmit = savebook;

function savebook() {
    const name = document.querySelector('#name').value;
    const price = document.querySelector('#price').value;
    const num_of_pages = document.querySelector('#num_of_pages').value;

    const url = "{% url 'books:home' %}"
    const xhr = new XMLHttpRequest();

    xhr.onload = function () {
        if (this.status == 200) {
            alert("Saved!");
        }
    }

    xhr.open('POST', url, true);
    xhr.send();
}

Не могли бы вы помочь мне решить эту проблему?