i am having a problem with the below code , it whenever i would try to request a the JSON data from the website , i would always get back a response code 0. Does anyone know why? If i were to go the website i would get the data just by inputting the correct login information.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="Base64.js" type="text/javascript"></script>
<script type="text/javascript">
function alertContents(HTTPobj) {
if (HTTPobj.readyState == 4) {
// everything is good, the response is received
if ((HTTPobj.status == 200) || (HTTPobj.status == 0)) {
// FIXME: perhaps a better example is to *replace* some text in the page.
var htmlDoc = document.createElement('div'); // Create a new, empty DIV node.
htmlDoc.innerHTML = HTTPobj.responseText; // Place the returned HTML page inside the new node.
alert("The response was: " + HTTPobj.status + HTTPobj.responseText);
//var jsonData = eval('(' + HTTP.responseText + ')');
//parseJson(HTTP.responseText);
}
else {
alert('There was a problem with the request. ' + HTTPobj.status + HTTPobj.responseText);
}
}
}
}
function makeBaseAuth(user,password) {
var tok = user + ':' + password;
var hash = Base64.encode(tok);
alert(hash);
return "Basic " + hash;
}
function getInput() {
var getUser = document.input.user.value;
var getPass = document.input.pass.value;
var logData = makeBaseAuth(getUser, getPass);
var url = 'http://www.tt-galaxi.com/thubrest/login';
// var url = 'http://www.tt-galaxi.com/thubrest/users/%@/trips',username;
// var url = 'http://www.tt-galaxi.com/thubrest/parkingbays';
var HTTPobj = new XMLHttpRequest();
HTTPobj.onreadystatechange = function () { alertContents(HTTPobj); };
var test = HTTPobj.open('GET', url);
HTTPobj.setRequestHeader('Authorization', logData);
HTTPobj.send();
}
</script>
</head>
<body>
<form name="input" action="">
Username: <input type="text" name="user" />
<br />
Password:<input type="text" name="pass" />
<br />
<input id="Button1" type="button" value="Submit" onclick="getInput()"/>
</form>
</body>
</html>
Looks like you are trying to request data from a host that is of different origin than yours. To elaborate this, if you have a site called http://www.example.com running in host A and you try to make a request to wwww.somethingelse.com running in host B, you would not be able to get the data from host B because most modern browsers enforce the same origin policy that prohibits the use of AJAX request in cross-site manner. If the browser detects this kind of “illegal request”, it blocks the incoming data from that different host.
However, if you own that other host, you can explicitly pass a header to the browser which basically tells the browser to allow cross-site data from that other host. Read more about this here.