为什么带有跨域 ajax() 调用的 jsonp 不起作用？答案

【问题标题】：Why jsonp with cross domain ajax() call is not working?为什么带有跨域 ajax() 调用的 jsonp 不起作用？
【发布时间】：2014-04-16 09:47:03
【问题描述】：

由于跨域限制，我正在尝试使用 jsonp。

在这里和其他站点中搜索了很多论坛条目之后..我已经到了我不知道为什么其中一个示例有效但另一个示例无效的地步。两个其余 url 的输出相同JSON 格式。

Twitter 提要工作示例： 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/

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

【问题讨论】：

标签： jquery ajax json jsonp

【解决方案1】：

在 JSONP 技术中，服务器应该将响应包装在 javascript 函数中。 jsonp technique here上有明确的解释：

jQuery 的 "dataType: 'jsonp'" 只会确保将回调参数添加到您的 url。

只需在两个 URL 中添加一个“&callback=func123”，twitter 就会用包装好的数据回复你，而其他服务没有。

推特：URL

找到学校区域：URL

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

【讨论】：

谢谢斯里坎特。我现在已经在服务器端实现了 servlet 过滤器，以将响应包装在 javascript 函数中，并且它可以正常工作。