What can be the problem, I am trying to send data to server via ajax, specifically email then output a response on the browser

Question

After sending the data through ajax to a php file that processes the request, the email is successfully stored but the output response on the browser is,undefined.

The issue is here
If(xhr.readyState == 4 && xhr.status ==200){
var response = xhr.responseText;
}
else {
alert("Server error");
}
message.innerHTML = response;

The browser keeps alerting the server error even though the request is successful. The message where the response is to be appended(that last line) keeps showing me undefined.

Answer 1

Declare response outside the if condition then assign to xhr.responseText

var response = null;

If(xhr.readyState == 4 && xhr.status == 200) {
response = xhr.responseText;
} else {
alert("Server error");
}

message.innerHTML = response;

Answer 2

It seems that somehow I cannot get the response from the php file to ouptut to the browser. The response variable does not hold any value. Which is quite weird because when I check the devtools on chrome, the response from the php file is there.