jQuery "get" method not working locally

Question

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>

Your browser will refuse to load content from a different domain than that of the source of the loading page. It's called the "Same Origin Policy". Furthermore, some/most/all newer browsers consider every separate "file://" URL to be a separate domain. — Pointy, Mar 10 '12 at 22:59

score 0 · Accepted Answer · answered Mar 10 '12 at 23:01

0

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.

answered Mar 10 '12 at 23:01

jfriend00

683,504
96
985
979

Ah, thanks so much. There goes my widget idea. Thanks for the answer. ^.^ – Drislen Mar 10 '12 at 23:07
@Drislen - If it's your PHP server page/app, then it's no big deal to support JSONP and accomplish your task that way. It works just as well as an ajax call once you understand how it works. – jfriend00 Mar 10 '12 at 23:10
I've ran into slight confusion while going through the jQuery api. In the example here. http://api.jquery.com/jQuery.getJSON/ It calls upon a file outside of the domain name, yet it still functions properly. How does that work? I though the browsers blocked that? – Drislen Mar 11 '12 at 21:36
See [info about JSONP](http://en.wikipedia.org/wiki/JSONP). Then, from the `getJSON()` doc: JSONP - If the URL includes the string `"callback=?"` (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details. JSONP uses dynamically generated ` – jfriend00 Mar 11 '12 at 23:35
Ah okay, I was looking into JSONP and I guess that was the part I didn't understand. Thanks so much for all of your help. ^.^ – Drislen Mar 12 '12 at 00:59

score 0 · Answer 2 · answered Mar 10 '12 at 23:01

If you do a AJAX request, the Same origin policy applies. You can read more about the Same origin policy here.

If you run it localy, you are only allowed to run local ajax requests, if you run it on your domain you are only allowed to do requests on your domain.

jQuery "get" method not working locally

2 Answers2