Read response from HttpRequest in JavaScript

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;
    }
    }

Answer

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.