I want to retrieve json data from an other website so I tried to do a simple crossdomain request. I ran this index.php file on Wamp :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".dtd">
<html xmlns="" manifest="manifest.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<script type="text/javascript">
function getXDomainRequest() {
var xdr = null;
if (window.XDomainRequest) {
xdr = new XDomainRequest();
} else if (window.XMLHttpRequest) {
xdr = new XMLHttpRequest({mozSystem: true});
} else {
alert("Your browser does not support AJAX");
}
return xdr;
}
function sendData() {
var xdr = getXDomainRequest();
xdr.onload = function() {
alert(xdr.responseText);
}
xdr.open("GET", "");
xdr.send();
}
</script>
</head>
<body>
<p>
<input type="button" onclick="sendData();" value="Retrieve" />
</p>
</body>
</html>
But I get an error saying that cross origin request has been blocked. I'm pretty new to js and this is the first time I try to use a web API in js so I might have pletly missed something here...
Thanks a lot.
I want to retrieve json data from an other website so I tried to do a simple crossdomain request. I ran this index.php file on Wamp :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" manifest="manifest.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<script type="text/javascript">
function getXDomainRequest() {
var xdr = null;
if (window.XDomainRequest) {
xdr = new XDomainRequest();
} else if (window.XMLHttpRequest) {
xdr = new XMLHttpRequest({mozSystem: true});
} else {
alert("Your browser does not support AJAX");
}
return xdr;
}
function sendData() {
var xdr = getXDomainRequest();
xdr.onload = function() {
alert(xdr.responseText);
}
xdr.open("GET", "http://example.");
xdr.send();
}
</script>
</head>
<body>
<p>
<input type="button" onclick="sendData();" value="Retrieve" />
</p>
</body>
</html>
But I get an error saying that cross origin request has been blocked. I'm pretty new to js and this is the first time I try to use a web API in js so I might have pletly missed something here...
Thanks a lot.
Share Improve this question edited Jul 9, 2014 at 20:30 dekajoo asked Jul 9, 2014 at 20:21 dekajoodekajoo 2,1121 gold badge26 silver badges36 bronze badges 3-
2
An
XMLHttpRequestwon't work for cross-domain requests. See JSONP. – Lucas Trzesniewski Commented Jul 9, 2014 at 20:25 - Ok, but XDomainRequest does right ? I'm querying Steam API which does not support JSONP unfortunatly. – dekajoo Commented Jul 9, 2014 at 20:30
- 4 Do not make this request using the browser, otherwise your api key will be freely available to whoever(whomever?) uses your application. – Kevin B Commented Jul 9, 2014 at 20:33
1 Answer
Reset to default 5Javascript requests can only be cross-domain under certain circumstance. Below is a summary of a few techniques and work-arounds.
If the source has JSONP available, you can circumvent cross-domain restrictions. http://www.sitepoint./jsonp-examples/
Unlikely, but if the source has a origin policy, than you could do the cross domain request. Seeing as you are getting the error, I doubt the source has this policy. If I recall, this is not supported by all browsers...
If I recall, there are some iFrame methods (I would call them hacks) to transport the data. Not optimal at best.
If all else fails, you can cache the JSON file with PHP and store it on your server. No longer is it cross domain.
More details can be found at Ways to circumvent the same-origin policy
If you are attempting to pull it from a public API, than it is very likely that they have JSONP available. If they do not, it is likely that they don't want you to pull the data every time (they don't want to foot the bandwidth bill), but rather would prefer you cache it with PHP as necessary.