views:

50

answers:

1

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"&gt;&lt;/script&gt;

<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()) });
}
+2  A: 

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.

patrick dw
@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
@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.
patrick dw
@patrick - would changing the request and JsonResult to GET resolve this issue and be better practice?
Nicholas Murray
@Nicholas - No, you'll have the same cross-domain issues. Is the final site going to be posting to a different domain?
patrick dw
@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
@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
patrick dw
@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
@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.
patrick dw
@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