TYPO3 Core

hello I used the bookmark extension which uses ajax but with jquery

ajax (url, data = {}) {
            data = {...data, 'tx_bookmarkpages_bookmarks[localBookmarks]': storage.list}
            $.ajax({
                url: url,
                type: 'post',
                data: data
            }).done($.proxy(this.listQueryHandler, this));
        },

this is a code that is used in bookmark extension
I try to translate this code to javascript

with fetch
async ajax (url, data = {}) {
data = {...data, 'tx_bookmarkpages_bookmarks[localBookmarks]: storage.list}
var $this=this;
let response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: data
});
let result = await response.json();
$this.listQueryHandler(result);
},

or just with XMLHttpRequest

ajax (url, data = {}) {
        data = {...data, 'tx_bookmarkpages_bookmarks[localBookmarks]': storage.list};

var xhttp = new XMLHttpRequest(),
                $this=this;
        xhttp.open("POST", url, true); 
        xhttp.onreadystatechange = function() {
           if (this.readyState  4 && this.status  200) {
             $this.listQueryHandler(JSON.parse( this.responseText));
           }
        };
        xhttp.send(JSON.stringify(data));

},

I think these codes don't send data as a parameter like in jquery

and when I log in with a user I can add pages as a bookmark but I can't remove it ..... when I don't log in with any user it works well just for one page
how can fix this bug?