Ajax in javascript not working.

Question

$(document).ready(function() {

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

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('<p>'+data.rank+'</p>');
        }
});});

Any help with the problem will be highly appreciated.
Thanks in anticipation,
Anand

Answer 1

The thing is that you are trying to access an url on a different domain (unless you actually are on twittercounter.com of cause). Anyways, if you want to do cross-site AJAXcalls which browsers don't permit due to safety, you have to use the JSONP "trick". You can use JSONP with jQuery, which it seems like you are using. Last I checked though, jQuery required some server side configuration, so unless you can alter the data you get, you would have to do the AJAX request manually, in which case you would be able to get it, using the JSONP method.

Answer 2

Basically you are trying to access a cross-domain AJAX request. This is not allowed because it tends to compromise browser security. Here is a way that you can get around it:

http://code.google.com/p/cross-domain-ajax/

Noah

Edit: Mon Jun 29 10:24:51 CDT 2009 googletorp FTW!