Question

有人可以帮我解决如何开始使用JSONP吗？

代码：

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

小提琴：http://jsfiddle.net/R7EPt/6/

如果我可以从文档中解决，应该产生警报：不是（但也没有产生任何错误）。

感谢。

Answer 1

JSONP 实际上是克服 XMLHttpRequest 相同域策略的简单技巧。（如您所知，无法将 AJAX（XMLHttpRequest）请求发送到其他域。）

所以 - 不要使用 XMLHttpRequest ，我们必须使用脚本 HTMLl标签，这些标签通常用于加载JS文件，以便JS从另一个人那里获取数据域。听起来很奇怪？

事情是 - 结果脚本标签可以类似于 XMLHttpRequest 的方式使用！看看这个：

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";

在加载数据后，您最终会得到一个脚本细分：

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

然而，这有点不方便，因为我们必须从脚本标记中获取此数组。所以 JSONP 创建者认为这会更好（并且确实如此）：

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";

注意那里的 my_callback 功能？所以 - 当 JSONP 服务器收到你的请求并找到回调参数 - 而不是返回普通的JS数组时，它将返回：

my_callback({['some string 1', 'some data', 'whatever data']});

查看利润在哪里：现在我们获得自动回调（ my_callback ），一旦我们获得数据就会被触发。这就是 JSONP 的全部知识：它是一个回调和脚本标记。

注意：
这些是JSONP使用的简单示例，这些不是生产就绪脚本。

RAW JavaScript演示（使用JSONP的简单Twitter Feed）：

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(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>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

基本jQuery示例（使用JSONP的简单Twitter提要）：

<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: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    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);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>

JSONP 代表带填充的JSON 。（技术名称很差，因为它与大多数人认为的“填充”无关。）

Answer 2

如何使用jQuery

使用JSONP更简单

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

URL末尾的?告诉jQuery它是JSONP请求而不是JSON。 jQuery自动注册并调用回调函数。

有关详细信息，请参阅jQuery.getJSON documentation。

Answer 3

对于OP，你的代码有两个问题：你需要设置jsonp ='callback'，并在变量中添加一个回调函数，就像你做的那样似乎不起作用。

更新：当我写这篇文章时，Twitter API刚刚开放，但他们改变了它，现在需要身份验证。我将第二个示例更改为工作（2014Q1）示例，但现在使用github。

这不再起作用 - 作为练习，看看你是否可以用Github API替换它：

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

尽管alert（）这样的数组并不能很好地工作...... Firebug中的“Net”选项卡会正确显示JSON。另一个方便的技巧是做

alert(JSON.stringify(data));

您还可以使用 jQuery.getJSON 方法。这是一个完整的html示例，它从github获取“gists”列表。这样它会为你创建一个随机命名的回调函数，这是最后的“回调=？”在网址中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQuery (cross-domain) JSONP Twitter example</title>
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.getJSON('https://api.github.com/gists?callback=?', function(response){
                    $.each(response.data, function(i, gist){
                        $('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" + 
                            (gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>');
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="gists"></ul>
    </body>
</html>

Answer 4

<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
  format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
  $.each(data.items, function(i,item){
  $("<img/>").attr("src", item.media.m).appendTo("#images");

 });
});</script>
</body>
</html>

以上代码有助于从Flickr API获取图像。它使用GET方法使用JSONP获取图像。它可以在here

中详细找到

使用.ajax（）和JSONP的基本示例？

4 个答案: