First, you can ignore that this is sending credentials in an unsafe manner. I'm supposed to handle that after.

My problem is with reading the 'response' or 'responseText' from a HttpRequest to an API. I can see in the console the request is succesful and the response I want is there, but I am not able to retrieve it. I must be missing something basic probably.

This is the response as I can see in the console:

Chrome console

I can see the "web.html" that I want to retrieve and also the status 200. But the console log is empty. This is how I am trying to do this.

const request = new XMLHttpRequest();
request.open('POST', 'https://someurl.net/api/user/login');
const form = document.getElementById('login')
form.addEventListener('submit', callbackFunction);

function callbackFunction(event) {
    event.preventDefault();

    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
    request.send(JSON.stringify(formJson(event)));
    console.log(request)

    console.log("Status: "   request.status);
    console.log("Response: "   request.response);
    console.log("ResponseText: "   request.responseText);
};

function formJson(event) {
    const credentialsDto = {};
    const myFormData = new FormData(event.target);
    console.log(myFormData);
    myFormData.forEach((value, key) => (credentialsDto[key] = value));

    return credentialsDto;
}

For some more details, this is calling my Api in .NET which returns 401 Unauthorized if the credentials are wrong, and 200 OK with a string as in Ok("web.html") if the credentials are correct.

Thank you.

I tried printing the request and trying with all its attributes I could think of. I can see the request is working and the server is sending the response I want, but I am clueless as how to retrieve it properly.

I also tried this thinking that the response might be asynchronous but it didn't work:

    while (true)
    {
    if (request.readyState == 1)
        {
        console.log("Status: "   request.status);
        console.log("Response: "   request.response);
        console.log("ResponseText: "   request.responseText);
        break;
    }
    }

CodePudding user response：

The console is empty because the readyState property state 1 merely means that the connection with the server is established.

Furthermore, the XMLHttpRequest object you print to the console is updated immediately when the http-response file is received, which gives the false assumption that it can't be accessed.

This is more or less a boilerplate code-snippet for waiting for the http-response

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

Now let's tailor it with the code you submitted:

const request = new XMLHttpRequest();
const form = document.getElementById('login')
form.addEventListener('submit', callbackFunction);

function callbackFunction(e) {
    event.preventDefault();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
             console.log("Status: "   request.status);
             console.log("Response: "   request.response);
             console.log("ResponseText: "   request.responseText);
        }
    };
    request.open('POST', 'https://someurl.net/api/user/login');
    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
    request.send(JSON.stringify(formJson(e)));
    console.log(request)
};

function formJson(e) {
    const credentialsDto = {};
    const myFormData = new FormData(e.target);
    console.log(myFormData);
    myFormData.forEach((value, key) => (credentialsDto[key] = value));

    return credentialsDto;
}

This should do it. Notice that event is deprecated and that you would continue using e instead.

Instead of depending on the onreadystatechange property, you could also choose for:

request.onload = function(e) {/*Your code*/};

An eventlistener which automatically looks for the succes denoting parameters and is a hack of a lot shorter.

I hope this helps.