getJSON: why does the 1 example work, but the other not?

Question

I have 2 examples of a function that retrieves json-data and gives an alert.

In this example, everything goes fine: http://jsbin.com/uwupa3/edit

$(document).ready(function(){
  var timeService = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?";

  $.getJSON(timeService, function(data) {
    alert(data);
  });
});

But in the second example, there is no alert displayed. Why? The only difference is the service where the json is retrieved. The json-object looks perfectly valid to me: http://jsbin.com/uwupa3/2/edit

$(document).ready(function(){
  var timeService = "http://json-time.appspot.com/time.json?tz=Europe/Brussels";

  $.getJSON(timeService, function(data) {
    alert(data);
  });
});

I get no JS-errors. I also tried this local (so not on JSbin but with a htm-file on my pc) and this doesn't work either.

Can someone explain what I am doing wrong?

Answer 1

You are using an URL that's outside your domain, which means $.getJSON will not use an XmlHttpRequest, but some JSONP -- see the documentation of $.getJSON :

If the specified URL is on a remote server, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

And if you take a look on the documentation of the jsonp option for $.ajax, you'll see :

Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url for a GET or the data for a POST. So {jsonp:'onJsonPLoad'} would result in 'onJsonPLoad=?' passed to the server.

And for the jsonpCallback option :

Specify the callback function name for a jsonp request. This value will be used instead of the random name automatically generated by jQuery.

For your first request, there is a jsoncallback parameter in the URL ; for your second request, there is no such parameter :

• First URL : http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
• Second URL : http://json-time.appspot.com/time.json?tz=Europe/Brussels

I suppose this has something to do with the fact the second request doesn't do what you want ?

Answer 2

You are using an URL that's outside your domain, which means $.getJSON will not use an XmlHttpRequest, but some JSONP -- see the documentation of $.getJSON :

If the specified URL is on a remote server, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

And if you take a look on the documentation of the jsonp option for $.ajax, you'll see :

Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url for a GET or the data for a POST. So {jsonp:'onJsonPLoad'} would result in 'onJsonPLoad=?' passed to the server.

And for the jsonpCallback option :