getting response issue
The code below enables to detect the facial features. I’m having an issue with getting the response when the request is sent. Please help troubleshoot such issue.
<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Facerect</title>
</head>
<body>
<script>
//chnage this url
var image_location=“http://apicloud.me/assets/facerect/image4.jpg”;
var url ="https://apicloud-facerect.p.mashape.com/process-file.json?";
url += “url=” + encodeURI(image_location);
url += “&features=true”;
alert(url);
var xmlhttp=new XMLHttpRequest();
xmlhttp.open(“GET”,url,true);
xmlhttp.setRequestHeader(“X-Mashape-Authorization”, “zVNNYMfznlE1LpqFTWDjx7Ddt3yD51oy”);
xmlhttp.onreadystatechange=function(){
alert(xmlhttp.readyState + "," + xmlhttp.status);
alert(xmlhttp.statusText);
alert(xmlhttp.responseText);
if(xmlhttp.readyState==4) {
alert ("response text = " + xmlhttp.responseText);
var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.nose.x);
//var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.nose.y);
//var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.mouth.x);
//var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.mouth.y);
alert (response.faces[0].features.eyes[0].x);
alert (response.faces[0].features.eyes[0].y);
alert (response.faces[0].features.eyes[1].x);
alert (response.faces[0].features.eyes[1].y);
var x1 = response.faces[0].features.eyes[0].x;
var y1 = response.faces[0].features.eyes[0].y;
var x2 = response.faces[0].features.eyes[1].x;
var y2 = response.faces[0].features.eyes[1].y;
var dist = Math.sqrt(((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)));
alert(dist);
}
}
xmlhttp.send(null);
</script>
</body>
</html>
Join in the discussion - add comment below:
Hi there!
Seems like you are trying to perform a cross-domain HTTP request which is blocked by most browsers. Please see the following StackOverflow question:
http://stackoverflow.com/questions/1941340/empty-responsetext-from-xmlhttprequest
A possible solution would be to perform server-side calls to the API instead of using JS and XMLHttpRequest. Hope that helps!
Best regards,
Andy