Cannot load Google Images from its API using jQuery getJSON

My code is below:

$.getJSON('https://ajax.googleapis.com/ajax/services/search/images?q=Google&v=1.0', 
function(json) {
  alert(json);
})​

You can try this code here: http://jsbin.com/ofaru3/edit

The ajax is error

imagesFailed to load resource

How cna I fix this pro开发者_StackOverflow社区blem? Thanks!

You need &callback=? on the URL there to trigger JSONP, like this:

$.getJSON('https://ajax.googleapis.com/ajax/services/search/images?q=Google&v=1.0&callback=?', 
function(json) {
  alert(json);
});

You can test it out here. Without the &callback? it's trying to fetch the data from a remote domain with an XmlHttpRequest (AJAX) and failing/being blocked due to the same origin policy. This is exactly the type of situation JSONP is for.

From the $.getJSON() docs:

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.