Cross domain ajax response failing

Question

Ok...so ive been wriggling around with this piece of cod for quite a while now...

first i used this code which worked...

$(document).ready(function() {
$('#content').html('');
$.ajax({
        url:'data.json',
        dataType: "json",
        success: function(data) {
                $('#content').append('
'+data.rank+'
');
        }
});});

In this code (it works) data.json contains the JSON data in this format:

{ "user_id":"3190399", "user_name":"Anand_Dasgupta", "followers_current":"86", "date_updated":"2009-06-04", "url":"", "avatar":"205659924/DSC09920_normal.JPG", "follow_days":"0","started_followers":"86", "growth_since":0, "average_growth":"0", "tomorrow":"86", "next_month":"86", "followers_yesterday":"86", "rank":176184, "followers_2w_ago":null, "growth_since_2w":86, "average_growth_2w":"6", "tomorrow_2w":"92", "next_month_2w":"266", "followersperdate":[] }

This data comes from the URL:

http://twittercounter.com/api/?username=Anand_Dasgupta&output=json&results=3 (Click the URL to get the data)

But when I replace data.json in the $.ajax function with the URL which contains the same data, this code below doesn't seem to work...

$(document).ready(function() {
$('#content').html('');
$.ajax({
      url:'http://twittercounter.com/api/?username=Anand_Dasgupta&output=json&results=3',
        dataType: "json",
        success: function(data) {
                $('#content').append('
'+data.rank+'
');
        }
});});

I had earlier put this question forth on StackOverflow and responses were that this is a cross domain problem.

So i read about cross domain ajax request and this is the code that i came up with:

$(document).ready(function() {                      
    $('form#search').bind("submit", function(e){                            
            e.preventDefault();
            $('#content').html('');

// Define the callback function
  function get(jsonData) {     
     $('#content').append('
'+jsonData.rank+'
');
     bObj.removeScriptTag(); 
  }

// The web service call
var req  = 'http://twittercounter.com/api/?username=Anand_Dasgupta&output=json&results=3&callback=get'; 

// Create a new request object
bObj = new JSONscriptRequest(req); 

// Build the dynamic script tag
bObj.buildScriptTag(); 

// Add the script tag to the page
bObj.addScriptTag();


    });
});

But even doesnt seem to be working.

If anyone can provide any help then it will be deeply appreciated. I have given the entire code so that anyone could test it themselves if they want to.

Thank you Anand

Answer 1

You have to see if the site in question supports JSONP.

You have to also use the dataType option in your ajax call set to 'jsonp', as well as specify the correct callback argument.