google ajax search with jQuery - $.getJSON(). there is any response.

Question

hi. i'm trying to make my image search with google ajax search i'm using jQuery. so below my code

$.getJSON('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=hello', function(data) {
    console.log(data);
});

the console printed NULL and my xhr information is

request URL:http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=hello
Request Headers
Accept:application/json, text/javascript, */*
Cache-Control:max-age=0
Origin:http://example.local
Referer:http://example.local/thread/create
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Safari/533.4

i'm not sure what's wong. help me plz

Answer 1

Your URL needs a slight tweak to trigger JSONP, add &callback=? on the end, like this:

$.getJSON('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=hello&callback=?', function(data) {
  console.log(data);
});

You can see it working here, take a look at the console.

If jQuery sees a callback=? in the url, it replaces it with a function name it generates (which is your function(data) callback), and that's what gets run when the JSONP request comes back. See the $.getJSON() documentation for the same info.

Without this it's trying to do an XmlHttpRequest, and being blocked by the same-origin policy, since it's on another domain.