How do I send basic authentication headers to a webservice via vanilla JS?

See more:

Javascript

Java

HTML

I'm running a web application connecting to a Java webservice(JAX-WS). Currently I'm trying to move away from using the browser prompts as a way of authenticating a user and instead use a dedicated login page in my application.

What I have tried:

The webservice uses basic authentication, as outlined in its web.xml

<login-config>
    <auth-method>BASIC</auth-method>
    <realm-name>MyAppRealm</realm-name>
</login-config>

In my login.html I've defined a username and a password field, along with a button

<div class="form-style">
    <input class="input-field-style" type="text" id="username" name="username" placeholder="Username"> <br/>
    <input class="input-field-style" type="password" id="password" name="password" placeholder="Password"> <br/>
    <input type="button" value="Log in" onclick="login()"/>
</div>

Said button is supposed to send the authentication header to the service when clicked

function login()
{
    var user = document.getElementById("username").value;
    var pass = document.getElementById("password").value;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", MYServiceURL, true);
    xhr.setRequestHeader("Authorization", "Basic " + btoa(user+":"+pass));
    xhr.send();
}

However when I now enter my credentials and click log in one of two things happens, seemingly at random.

The first thing that might occur is, that a browser authentication prompt will pop up -- which is obviously not what I want, since I want to get rid of it in favor of this login page. The other thing that might happen is the following error thrown in the HTTP-Response

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><soap:Fault><faultcode>soap:Client</faultcode><faultstring>Error reading XMLStreamReader: Unexpected EOF in prolog
 at [row,col {unknown-source}]: [1,0]</faultstring></soap:Fault></soap:Body></soap:Envelope>

So my question is what am I doing wrong? Am I just using the wrong method in trying to send this header to my service?