Не разрешать отправку формы, а вместо этого отправлять xmlHttpRequest

this - это ссылка на объект формы, в котором нет метода preventDefault. Вместо этого передайте event в функции login:

<form action = "http://localhost/cn/account_test/index.php" method = "post" onsubmit = "login(event);">
  ...
</form>

В вашем коде 2 вещи:

1. У кнопки <button>Submit</button> отсутствует свойство типа:

<button type = "submit">Submit</button>

2. this в функции login(this) не имеет свойства preventDefault. Относится к элементу form.

Вы можете попробовать установить идентификатор для формы и написать прослушиватель событий следующим образом:

document.getElementById("myForm").addEventListener("submit", login);

function login(e) {
    e.preventDefault();
    console.info('caught!');

    // more code goes here...
}

<form action = "http://localhost/cn/account_test/index.php" method = "post" id = "myForm">
    <label>Username</label><br>
    <input type = "text" id = "username" name = "username"><br>
    <label>Password</label><br>
    <input type = "password" id = "password" name = "password">
    <br>
    <button type = "submit">Submit</button>
</form>

закончил использование

document.querySelector('#form').addEventListener('click',function(e){

e.preventDefault();

});

спасибо за помощь, все работает.

Вместо использования встроенного JavaScript вам следует настроить прослушиватель событий с помощью JavaScript.

Шаг 1. Удалите встроенный JS и добавьте идентификатор в форму:

<form action = "http://localhost/cn/account_test/index.php" method = "post" id = "form">

Шаг 2. Добавьте прослушиватель событий, исправьте некорректное использование XMLHttpRequest

Например, xhttp.params($data); не является допустимой функцией, вместо этого используйте:

document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var $data = [];

    $data.push({ username : document.getElementById('username').value });
    $data.push({ password : document.getElementById('password').value });

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText;
        }
    };

    xhttp.open("POST", this.getAttribute('action'), true);
    xhttp.send($data);
});