How to obtain the body response in the client-side?

Question

I am new in web, I am serving an html when a button is clicked on the client side through a request, the body response of that request is the html. How can I retrieve the html or body response from the client side?

I am trying with this code but everything is empty:

 var xhr = new XMLHttpRequest();
 xhr.open(signedRequest.method, signedRequest.url, true);
 console.log('xhr.response: ', xhr.response);
 console.log('xhr.responseText: ', xhr.responseText);
 console.log('xhr.responseXML: ', xhr.responseXML);
 document.write('<p>xhr: ' + xhr + '</p>');
 xhr.send();

Any idea on how to obtain the body response in the client-side?

Answer 1

Try to add a div or any input element with the id "demo" and try to run the code below.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = "<strong>The response from the test URL is: </strong>" + this.responseText;
        console.log(JSON.parse(this.response));
   }
};
xhttp.open("GET", "https://httpbin.org/get", true);
xhttp.send();

<div id="demo"></div>