3

What would that code look like?

Doug Neiner
  • 65,509
  • 13
  • 109
  • 118
TIMEX
  • 259,804
  • 351
  • 777
  • 1,080

4 Answers4

5

That other domain/server needs to support JSONP, which basically wraps the JSON in a callback.

In jQuery, the call would look like this:

$.getJSON(
     'http://otherdomain.com/api/whatever?callback=?', 
     { key: 'value', otherkey: true },
     function(data){
        //handle response
     }
);

The actual response from the other server (if you looked at what was actually being sent) would look like this:

// With this url:
http://domain.com/api/method?callback=the_callback_function_name

// The response would look like this:
the_callback_function_name({ "json": "data here"});

The jQuery getJSON method automatically handles JSONP when you supply the extra callback=?. Just keep in mind some sites using different names like json_callback=?. The important part is that you include it as part of the URL and don't try to add callback: '?' to the data part of the getJSON function.

Doug Neiner
  • 65,509
  • 13
  • 109
  • 118
  • According to the tests I just ran, FF2, IE6 and IE8 (all with default security settings) blocked this method because of Same Origin Policy. FF3.5 and Safari4.0 did not. IE gave "Permission denied" error message. FF2 gave the error message I cited elsewhere on this page. –  Feb 01 '10 at 20:32
  • @fsb then you ran an incorrect test. Sorry bud, but JSONP is not blocked in ANY browser currently with any market share to speak of. – Doug Neiner Feb 01 '10 at 22:03
  • @fsb Using your default security settings, run the following page: http://jsbin.com/olixe . It will work in FF2+, Safari 3+, and IE6+ -- no errors or restrictions. – Doug Neiner Feb 01 '10 at 22:14
  • The test I ran which produced Permission denied errors in FF2 and in IE6&8 was from the code fragment to your answer to the question. My name is not Bud. –  Feb 05 '10 at 20:28
  • @fsb I am sorry I was sarcastic in my reply to you. I do find it funny you are trying to prove a proven technology doesn't work. – Doug Neiner Feb 05 '10 at 22:31
4

Only via JSONP. Whether you use jQuery or some other framework, it boils down to a script block like this:

<script type="text/javascript" src="http://path.to/your/javascript"></script>

The <script> block is immune from cross-domain restrictions. The caveat is that the service should support JSONP as well. If the script returns a JSON object like this:

{a: 0, b: 1}

The object will be evaluated but nothing happens. But JSONP services accept a callback function name something like this

<script type="text/javascript" src="http://path.to/your/javascript?callback=yourCallbackFunction"></script>

and wrap the data as a parameter to your callback like this:

yourCallbackFunction({a: 0, b: 1});

So that the function is called when the script is evaluated.

Chetan S
  • 23,637
  • 2
  • 63
  • 78
1

You can use JSONP. in jQuery, try getJSON: http://api.jquery.com/jQuery.getJSON/

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
0

Instead you should use a local proxy. Set up a asp.net/php page that will load the remote page on the back end and then use ajax to load the proxy page.

Ariel
  • 4,502
  • 2
  • 21
  • 23