JQuery $.ajax Request works in IE but not FF and Chrome

Question

The following JQuery Request works fine in IE but not in FF and Chrome.

I am running the following page from its file location e.g. file:///C:/Test/json.htm and requesting a page running on localhost.

What is the reason for this?

And how can I get it to work for FF and Chrome?

<body>
<input type="button" value="Search" id="search-button" />
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() {

    $('#search-button').click(function() {

    var parms = {
            id: 27  
        };

        $.ajax({
            type: 'POST',
            url: 'http://localhost:51621/Test/GetJSONMessage/',
            async: false,
            data: parms,
            dataType: 'json',
            success: function(data, testStatus) {
                alert(data.message);
        }
    });

   });

});
</script>
</body>

Where GetJSONMessage is supplied by an ASP.Net MVC JSonResult :

[HttpPost]
public JsonResult GetJSONMessage(int id)
{
    return Json(new { message = ("hello world " + id.ToString()) });
}

score 3 · Accepted Answer · answered Sep 05 '10 at 22:32

3

Because you're hosting from the filesystem, and making a request to localhost, Chrome and FF will see this as a cross domain request, and therefore a security issue.

If you type the URL directly into the location bar, you'll probably get your response.

Safari is a little more easy going about those "security issues" when you're hosting from the filesystem.

answered Sep 05 '10 at 22:32

user113716

318,772
63
451
440

@patrick - ok, its a cross domain issue - so how do I deal with this? How do other sites that supply/consume json data from other domains work around this? – Nicholas Murray Sep 05 '10 at 22:40
@Nicholas - If in your actual site, the request will be made to the same domain, it is a non issue. Otherwise, you could try setting datatype to `jsonp`, which is a way of allowing cross-domain json requests. Not entirely sure what tweaks need to be made to work with `jsonp`, though. – user113716 Sep 05 '10 at 22:46
@patrick - would changing the request and JsonResult to GET resolve this issue and be better practice? – Nicholas Murray Sep 05 '10 at 23:06
@Nicholas - No, you'll have the same cross-domain issues. Is the final site going to be posting to a different domain? – user113716 Sep 05 '10 at 23:19
@patrick - Yes - I would like to, if possible, make json data available available to and consumable from another domain either by POST or GET. – Nicholas Murray Sep 06 '10 at 07:52
@Nicholas - Try this. Wrap your json response with a function call. So if the response was `{"my":"data"}`, you would do `someFunction({"my":"data"})`. Then create `someFunction(data){ }` in global namespace and be sure to specify `jsonp` as the dataType of your ajax call. This should let you receive the response. There still may be trouble with Chrome when hosting from `localhost`. There's some way to turn off its security, but I don't remember how right now. I don't know much about `jsonp` requests. Here's a helpful link: http://stackoverflow.com/questions/2067472/please-explain-jsonp – user113716 Sep 06 '10 at 11:19
@patrick - thanks! Looks like supplying JSON data cross domain is not feasible. I'll have to look into another way of supplying data. – Nicholas Murray Sep 06 '10 at 13:04
@Nicolas - This isn't just a JSON issue. It is a security feature of AJAX requests. I suppose they want the end user to know that any data coming to the page is from the same place that gave them the page they're viewing. If you're controlling the *source* of the data, I'd think you should be able to make `jsonp` work for you. Or maybe there's some workaround using an `iframe`? Not sure. – user113716 Sep 06 '10 at 13:19
@patrick - I'll look into JSONP - I was trying to create a widget that could read some JSON data from the 'Master' site. – Nicholas Murray Sep 06 '10 at 13:57

JQuery $.ajax Request works in IE but not FF and Chrome

1 Answers1