Error 400 when sending data via ajax, what could be wrong in the code?

Question

AJAX

Here is the code, please look... swears at xhr.send(data);

var URL = 'https://js.dump.academy/keksobooking';

  var request = function (onLoad, onError) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'json';

    xhr.addEventListener('load', function () {
      if (xhr.status === 200) {
        onLoad(xhr.response);
      } 
    });    

    return xhr;
  };

  window.backend = {
    upload: function (data, onLoad, onError) {
      var xhr = request(onLoad, onError);

      xhr.open('POST', URL);
      xhr.send(data);
    }
  };

  window.onSuccessHandler = function (evt) {
    var data = new FormData();

    var firstName = document.getElementsByName('fname')[0].value;
    var secondName = document.getElementsByName('sname')[0].value;
    var bDay = document.getElementsByName('dbirth')[0].value;
    var country = document.getElementsByName('country')[0].value;
    var city = document.getElementsByName('city')[0].value;
    var exp = document.getElementsByName('experience')[0].value;
    var salary = document.getElementsByName('salary')[0].value;
    var currency = document.getElementsByName('currency')[0].value;
  
    data.append('fname', firstName);
    data.append('sname', secondName);
    data.append('dbirth', bDay);
    data.append('country', country);
    data.append('city', city);
    data.append('experience', exp);
    data.append('salary', salary);
    data.append('currency', currency);
    
    window.backend.upload(data, function() {
      console.log('good');
    });

    evt.preventDefault();
  }

  var button = document.querySelector('.button--profile-change'); 
  
  button.addEventListener('click', function(e) {
    if (button.textContent === 'save') {
      window.onSuccessHandler(e);
    }
  });

Answer 1

so it won’t work
itself, look and render
here you throw: trace of the webmaster tools network of your site (Chrome - F12)
and a working example site