twitter search api with jquery error

Question

I need to request a twitter search with jquery using twitter api. After read documentation I write this code:

  $.getJSON("http://search.twitter.com/search.json?callback=myFunction&q=stackoverflow");

   function myFunction(r) {
       console.log(r);
    }

search.json Failed to load resource> When the page is executed, Google Chrome show this error on Console:

XMLHttpRequest cannot load http://search.twitter.com/search.json?callback=myFunction&q=stackoverflow. Origin http://localhost/twitter is not allowed by Access-Control-Allow-Origin. search.json Failed to load resource

what is the problem?

Answer 1

Just to add a bit more to the answer you can use the following code to display text within each returned tweet.

$.getJSON("http://search.twitter.com/search.json?callback=?&q=stackoverflow",

function(data){

for (i=0; i<data.results.length; i++){

$("#tweets").append("<p><strong>Text: </strong>" + data.results[i].text + "<BR/>" + "<p><strong>Created at: </strong>" + data.results[i].created_at +"</p><br /><br />");

}
});

Then within your body html put the following div

<div id="tweets"></div>

Answer 2

You need to write it a bit differently, like this:

$.getJSON("http://search.twitter.com/search.json?callback=?&q=stackoverflow", 
  function (r) {
    console.log(r);
});

To trigger JSONP it's looking for explicitly callback=?, which isn't in your named function version. To use the named callback, you're better off going with the $.ajax() full version:

$.ajax({
  url: "http://search.twitter.com/search.json?q=stackoverflow",
  dataType: "jsonp",
  jsonpCallback: "myFunction"
});

function myFunction(r) { console.log(r); }