How to detect ajax call inside php function

Question

I am trying to build a user authentication system. To protect a page I first check the login status using userIsLoggedIn() function if not logged in than show the login form. The log in form data is posted using ajax to the accessControl.php script. The ajax request starts but never completes. In Chrome devtool the ajax request is shown as pending.

What is wrong with this...

If I replace the ajax part with simple POST request the php scripts works fine with the necessary changes.

(Please, recommend some good resource to learn Ajax from.)

On protected page:

if(!userIsLoggedIn()){
    require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/loginForm.php';
    exit();
}

The Form :

<form class="form-signin" id="logInForm">
                <p id="returnMsg"></p>
                <input type="text" name="username" id="username" class="form-control" placeholder="Username" required autofocus>
                <input type="password" name="password" id="password" class="form-control" placeholder="Password" required >
                <input type="hidden" name="tokenLogInForm" id="tokenLogInForm" value="<?php if(isset($_SESSION['tokenLogInForm'])) { echo htmlout($_SESSION['tokenLogInForm']); } ?>">

                </form>
                <button class="btn btn-lg btn-primary btn-block" id="logInButton">
                    Log in</button>

The jQuery script:

$(document).ready(function(){
    $("#logInButton").click(function(e){

            var logInFormData = $("#logInForm").serialize();

            $.ajax({
                type: 'post',
                data: logInFormData,
                url: 'http://localhost/includes/accessControl.php',
                beforeSend: function(){
                    $("#logInFromSpinner").show();
                },
                conplete: function(){
                    $("#logInFromSpinner").hide();
                },
                success: function(data, status) {
                    console.log(data);
                },
                error: function(jqXHR, textStatus){
                    console.log(textStatus);
                }

            });
    });
});

The accessControl.php Script:

<?php
if(session_status() === PHP_SESSION_NONE) {
    session_start();
}
if(!isset($_SESSION['tokenLogInForm']) && empty($_SESSION['tokenLogInForm'])) {
    $_SESSION['tokenLogInForm'] = base64_encode(openssl_random_pseudo_bytes(32));
    session_regenerate_id(TRUE);
} 

function userIsLoggedIn()
{
    if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest')
    {   
        $userName = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_SPECIAL_CHARS);
        $passWordRaw = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_SPECIAL_CHARS);
        $passWord = md5($passWordRaw . 'M@there__ing@<7^9>');
        if(databaseContainsUser($userName, $passWord))
        {   
            if(session_status() === PHP_SESSION_NONE) {
                session_start();
            }
            session_regenerate_id(TRUE);
            $_SESSION['loggedIn'] = TRUE;
            $_SESSION['userName'] = $userName;
            $_SESSION['passWord'] = $passWord;
            $_SESSION['tokenLogInForm'] = base64_encode(openssl_random_pseudo_bytes(32));
            return TRUE;
        }
        else
        {
            if(session_status() === PHP_SESSION_NONE) {
                session_start();
            }
            session_regenerate_id(TRUE);
            unset($_SESSION['loggedIn']);
            unset($_SESSION['userName']);
            unset($_SESSION['passWord']);
            if(isset($_COOKIE[session_name()])) {
                setcookie(session_name(), '', time()-86400, '/');
            }
            session_destroy();
            echo 'The specified Username and Password was incorrect.';
            $_SESSION['tokenLogInForm'] = base64_encode(openssl_random_pseudo_bytes(32));
            return FALSE;
        }
    }


    if(isset($_POST['actionLogOut']) && $_POST['actionLogOut'] == 'logOut')
    {
        if(session_status() === PHP_SESSION_NONE) {
            session_start();
        }
        session_regenerate_id(TRUE);
        unset($_SESSION['loggedIn']);
        unset($_SESSION['userName']);
        unset($_SESSION['passWord']);
        $_SESSION = [];
        if(isset($_COOKIE[session_name()])) {
            setcookie(session_name(), '', time()-86400, '/');
        }
        session_destroy();
        $_SESSION['tokenLogInForm'] = base64_encode(openssl_random_pseudo_bytes(32));
        header('Location: ' . $_POST['goto']);
        exit();
    }
    if(session_status() === PHP_SESSION_NONE) {
        session_start();
    }
    session_regenerate_id(TRUE);
    if(isset($_SESSION['loggedIn']))
    {
        return databaseContainsUser($_SESSION['userName'], $_SESSION['passWord']);
    }
}


function databaseContainsUser($userName, $passWord)
{   
    include $_SERVER['DOCUMENT_ROOT'] . '/includes/dbCon.php';
    try
    {   
        $sql = 'SELECT COUNT(*) FROM admins WHERE username = :userName AND
        password = :passWord';
        $s = $dbConnect->prepare($sql);
        $s->bindValue(':userName', $userName);
        $s->bindValue(':passWord', $passWord);
        $s->execute();
    }
    catch(PDOException $e)
    {
        $error = 'Error searching User.';
        include $_SERVER['DOCUMENT_ROOT'] . '/includes/error.php';
        exit();
    }
    $row = $s->fetch();

    if($row[0] > 0)
    {
        return TRUE;
    }
    else 
    {
        return FALSE;
    }
}

Answer 1

You have a mistake in your code. Replace "conplete" with complete. Rest of the things look fine.

After the change your Javascript will look like this

 $(document).ready(function(){
  $("#logInButton").click(function(e){

        var logInFormData = $("#logInForm").serialize();

        $.ajax({
            type: 'post',
            data: logInFormData,
            url: 'http://localhost/includes/accessControl.php',
            beforeSend: function(){
                $("#logInFromSpinner").show();
            },
            complete: function(){
                $("#logInFromSpinner").hide();
            },
            success: function(data, status) {
                console.log(data);
            },
            error: function(jqXHR, textStatus){
                console.log(textStatus);
            }

        });
});
});