为什么jsonp与跨域ajax()调用不起作用?

时间:2014-04-16 09:47:03

标签: jquery ajax json jsonp

由于跨域限制,我尝试使用jsonp。

在这里和其他网站搜索了很多论坛条目后,我已经到了我不知道为什么其中一个例子正在工作但另一个例子不是这样的点。两个休息网址的输出是相同的JSON格式。

Twitter Feed工作示例: http://jsfiddle.net/fwXD2/1/

代码粘贴在下面。如果我删除datatype:'jsonp',那么我得到" Access-Control-Allow-Origin"错误是预期的。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'https://twitter.com/status/user_timeline/stephenfry?count=10&format=json',
                dataType: 'jsonp',
                success: function(dataWeGotViaJsonp){
                    var text = '';
                    var len = dataWeGotViaJsonp.length;
                    for(var i=0;i<len;i++){
                        twitterEntry = dataWeGotViaJsonp[i];
                        text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                    }
                    $('#twitterFeed').html(text);
                },
                error: function(e){  
                    $('#twitterFeed').html("No 'Access-Control-Allow-Origin' header is present on the requested resource.");
                } 
            });
        })
    </script>
</head>
<body>
    <div id = 'twitterFeed'></div>
</body>

非工作示例: http://jsfiddle.net/kA6z5/

提前感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

在JSONP技术中,服务器应该在javascript函数中包装响应。 jsonp technique here上有一个明确的解释:

jQuery的“dataType:'jsonp'”只会确保将回调参数添加到您的网址。

只需在这两个网址中添加'&amp; callback = func123',Twitter就会回复您包装的数据,而不是其他服务。

twitter:URL

找到学区:URL

服务器负责识别回调参数并返回包装数据。