beforeSend jquery ajax

Question

I am making a simple login for my website and I am using ajax to interact with database. I wanted to make it a bit safe so I search for security for ajax so I search for AJAX authentication and read a question in SO regarding this. Found this and links to this. Unfortunately I dont really understand what it does or how it works. I am hoping someone would clarify this for me. In layman's term.

$(document).on('click', '#login', function() {
    var UserName = $('#username').val();
    var PassWord = $('#password').val();
    console.log(UserName);
    if (UserName) {
        if (PassWord) {
            $.ajax({
                type: 'POST',
                url: 'ajax/Login.php',
                dataType: "json",
                data: {
                    username: UserName,
                    password: PassWord
                },
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Basic " + btoa(UserName + ":" + PassWord));
                },
                success: function(data) {
                    if (data.error == true) {
                        $("#dialog").html(data.message);
                        $("#dialog").dialog({
                            title: "Login"
                        });
                        $("#dialog").dialog("open");
                    } else {
                        window.location = 'pages/dashboard.php';
                    }
                    //window.location = 'pages/dashboard.php';
                },
                error: function(data) {
                    alert('Login Error');
                    //window.location='../login.php';
                }
            });
        } else {
            $("#dialog").html("Password is empty!");
            $("#dialog").dialog({
                title: "Owner Information"
            });
            $("#dialog").dialog("open");
        }
    } else {
        $("#dialog").html("Username is empty!");
        $("#dialog").dialog({
            title: "Login"
        });
        $("#dialog").dialog("open");
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="un" id="username" />
<input type="password" name="pw" id="password" />
<input type="button" id="login" value="Login " name="login1" style="background-color:#feaa38;width: 100px" />

This code above is my code plus the additional code I got from the link. This below is the additional code.

beforeSend: function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + btoa(UserName + ":" + PassWord));
},

I want to know.

1. What does ajax authentication do.
2. Do I really need it.
3. How do i know it is working.
4. What does it really do.

</div>

Answer 1

1. Don't get too caught up on the Ajax here. This is simply taking advantage of the "Basic" Authentication that Apache Provides. The user/pass needs to match against those in the .htpasswd file that is referenced. Apache will intercept the request and then after verifying will reroute the request to the original destination and has stored the authorized session for you now.

2. This seems like overkill. You're sending the username and password to authenticate to all future server requests (presumably) and not just to login to your software. It seems a bit much to control the user in 2 places as opposed to one.

3. If you have protected your pages in such a way that having a password and username is required to view the site, then this will ensure that every request made must follow this. However, once they're logged in it's redundant to perform this action.

4. This is explained through 1-3.

This does seem like overkill, and I don't think it adds anymore security. Once someone knows one password, they know both. Ditch it.