JSON response handling issues
Edge Browser: The response property value is sometimes briefly inserted into the DOM and then removed. Occasionally, an error message "SCRIPT5: access denied" is logged (indicating CORS). The response is fully accessible from the Debugger, but the request is not shown in the network tab.
Chrome Browser: The response is an empty string, the request is not displayed in the network tab, and there are no console messages.
Firefox Browser: A console error 'response "malformed JSON"' occurs on a breakpoint line when using `response` in `JSON.parse()`, even before its usage. Similar to Chrome, the request is not shown in the network tab.
JS Code (for modern browsers only):
var session = "";
var request;
function checkLogin()
{
if(request.readyState > 3)
{
var response = JSON.parse(request.response);
if(verify(response))
{
// do something
}
}
}
function login()
{
request = new XMLHttpRequest();
request.onreadystatechange = checkLogin;
request.open("GET", "authenticateUser.php?user=" + document.getElementById("user").value + "&credential="+md5(document.getElementById("password").value));
request.send();
}
Request detail for Edge from the network tab:
Request URL: http://*MYDOMAIN*/authenticateUser.php?user=df&credential=d41d8cd98f00b204e9800998ecf8427e
Request Method: GET
Status Code: 200 / OK
[...]
Response sample:
{"success":false,"error":"authentication failed or unauthorised"}
How can I make my PHP response usable in JavaScript code in both Chrome and Firefox, ensuring that its properties' values can be inserted into the DOM?