跨域 json 响应失败答案

【问题标题】：Cross Domain json response failing跨域 json 响应失败
【发布时间】：2010-11-07 14:59:06
【问题描述】：


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

// Define the callback function
  function getGeo(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=getGeo'; 

// 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();


    });
});

我尝试使用跨域json请求来获取json数据


{
"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":[]
}

我从 url 获取 json 数据

http://twittercounter.com/api/?username=Anand_Dasgupta&output=json&results=3&callback=getGeo

但是这段代码似乎不起作用。如果有人可以以某种方式完善代码或提供任何响应，将不胜感激。谢谢你

【问题讨论】：

标签： json twitter

【解决方案1】：

Stobor 在正确的轨道上。我访问了包含您显然使用的课程和操作方法信息的页面：http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html。那里的脚本利用了 Yahoo 用来指定包装 JSON 数据（从而使其成为 JSONP 数据）的回调函数的 callback= 值。您的 URL 中有一个 callback=getGeo，但 TwitterCounter API 确实 NOT 有办法指定回调函数。我使用您使用的代码创建了一个完整的 HTML 页面：

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Twittercounter API Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="jsr_class.js"></script>
    <script type="text/javascript">
    var bObj;

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

    $(document).ready(function() {                      
        $('form#search').bind("submit", function(e){                            
                e.preventDefault();
                $('#content').html('');
                // The web service call
                var req  = 'http://twittercounter.com/api/?username=Anand_Dasgupta&output=json&results=3&callback=getGeo'; 

                // 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();
        });
    });
    </script>
    </head>

    <body>
    <form id="search">
    <input type="submit" id="search" value="Get Info" />
    </form>
    <div id="content">
    </div>
    </body>
    </html>

当我激活按钮时，Firebug 给了我一个错误。原因是基于原始文章中的这一段：

这是一个有效的 JavaScript 语句，所以它可以是返回 JavaScript 的脚本标签的目标（原始 JSON 数据，没有回调函数，不是有效的 JavaScript 语句，所以如果它是脚本的目标，它将无法加载标签）。为了进行比较，请在此处查看此调用的 XML 版本。

“有效的 JavaScript 语句”是用函数名包裹实际数据的语句。

如果 Twittercounter 允许 JSONP 请求并让您指定包装函数，Stobor 的解决方案将是完美的。实际上，您必须创建自己的代理来充当中介。我在how to create one using PHP on my blog 上有一个例子。

【讨论】：

是的，你完全正确。 Twitter 计数器不允许回调包装函数。库尔我会通过那个。顺便说一句，如果我想的话，我也可以在这种情况下使用 xml。
感谢您花时间检查 API 文档；我只是提示了 url 中有一个“callback=”的事实，然后就去了......

【解决方案2】：

这里只是猜测，但是触发jsonp回调时getGeo函数是否超出范围？也许尝试将 getGeo 函数移出 $(document).ready() 块？

编辑：或者，您已经在使用 jQuery，对吗？ jQuery 会为你做跨域的事情！

$(document).ready(function()
{
    $.getJSON('http://twittercounter.com/api/?username=Anand_Dasgupta&output=json&results=3&callback=?',function(jsonData){
        $('#content').append(' 
'+jsonData.rank+'
');
    }); 
});

【讨论】：

我之前尝试过使用 getJSON 但失败了。它似乎没有显示任何内容。我尝试移动 getGeo 函数并检查。
我将 getGeo 从 $(document) 中移出，但仍然有效。我也不认为 twitter counter.com 支持 jsonp 格式。有什么建议吗？