Possible Duplicate:
Why is cross-domain Ajax a security concern?
I’m having a huge issue with jQuery. I’m trying to get jQuery to load HTML that gets generated from a PHP page on a remote web server. But whenever I try to run this locally, nothing happens at all. However, for whatever reason, when its on my web host, it’ll run just fine.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Decisive Shoutbox</title>
<style type="text/css">
body
{
margin: 0;
width: 288;
height: 160;
font-family: verdana;
font-size: 20px;
}
#gadgetContent
{
height: 160;
overflow: auto;
vertical-align: middle;
}
.shout
{
font-size: 8px;
}
.date
{
font-size: 6px;
font-color: #010101;
}
</style>
<link href="flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type="text/jscript" src="scripts/flexcroll.js"></script>
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" language="jscript">
$(document).ready(function() {
$.get("http://decisive-media.net/gameguy/gadgets/shouts.php", function(data) {
$('#gadgetContent').html(data);
//fleXenv.fleXcrollMain('gadgetContent');
alert("done");
});
});
</script>
</head>
<body>
<div id="gadgetContent">
</div>
</body>
</html>
Browsers restrict ajax calls to the same origin for security reasons prohibiting you from connecting to remote servers on a different domain than your web page. You can read about the same origin policy on MDN.
A potential work-around is JSONP which accomplishes a request using
<script>tags which are not subject to the same original policy, but it requires server cooperation to implement JSONP because it has to generate the right kind of response to work from a<script>tag.I have a web component I’ve built (an HTML5 slideshow that queries a server via ajax to get the list of slides) that I test locally and run on the web. When it’s being tested locally in my test environment (HTML file on my hard disk), I use JSONP to fetch the data from the remote server to get around the security limitations, but when it’s being run in the real environment, I use regular ajax and my app automatically detects which is needed based on the environment.