Проверка доступности имени пользователя с помощью AJAX

В настоящее время я пытаюсь разработать небольшой веб-сайт на PHP, чтобы проверить свои навыки. Тем не менее, я обнаружил, что я застрял, когда решил реализовать проверку доступности имени пользователя в реальном времени для процесса регистрации, так как мои знания JavaScript несколько базовые.

Прямо сейчас, когда я ввел имя в поле имени пользователя, я получаю только загрузочный образ и ничего больше. Это то, что я сделал:

Моя страница login.php, хранящаяся в папке /views:

<section>
    <div>
        <form action="?action=login" method="post">
            <input type="text" placeholder="username" name="username" id="username" onkeypress ="check()">
            <span id="usernameStatus"></span>
        </form>
    </div>
</section>

Мой файл js, хранящийся в /views/js:

function check () {
    var status = document.getElementById('usernameStatus');
    var u = document.getElementById('username').value;
    if(u != ""){
        status.innerHTML = '<img src="views/img/wait.gif" alt="" height="20" />';
        var hr = new XMLHttpRequest();
        hr.open("POST", "../login.php", true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                status.innerHTML = hr.responseText;
            }
        }

        var v = "checkName="+u;
        hr.send(v);

    }
}

И, наконец, loginController.php хранится в/контроллерах:

    public function run() {
        if(!empty($_POST["checkName"])){
            $name= htmlentities($_POST["checkName"]);
            if(Db::getInstance()->username_ok($name)){
                echo ("<strong>" . $name . "</strong> unavailable");
            }
            else{
                echo ("<strong>" . $name . "</strong> available");
            }
        }
        require_once('views/login.php');
    }

Может ли кто-нибудь объяснить мне, что я сделал неправильно? Благодарю!