在JSONP中使用.ajax()的基本示例?


186

请有人帮我弄清楚如何开始使用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/

据我可以从文档中得出的信息应该产生警报:不会(但也不会产生任何错误)。

谢谢。


$ .ajax({url:pm_url,dataType:'jsonp',jsonpCallback:photos,jsonp:false,}); 您已将照片作为字符串输入。
woVeRiNe 2014年

Answers:


388

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>

但是,这有点不方便,因为我们必须从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 feed):

<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表示带有Padding的JSON。(非常糟糕的技术,因为它实际上与大多数人认为的“填充”无关。)


3
现在这个答案有些过时了,因为浏览器现在支持Access-Control-Allow-Origin标头,该标头允许对某些跨域域的常规Ajax调用。
jfriend00

请记住,您无法使用JSONP执行表单POST。这里更多的信息:markhneedham.com/blog/2009/08/27/...
thdoan

4
如果要使这些脚本可用于生产环境,您要考虑什么?
来宾

1
哇,这真的很有帮助!我终于知道JSONP到底是什么以及它如何工作!
杰里·刘

145

还有使用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文档


2
@PetrPeller,看起来不错,但我似乎并没有从中制造出产品。你能看到这个吗?JSFiddle它不警告任何数据。也许我错过了一些事情
tika

服务器必须支持@xDNP JSONP响应。您的服务器似乎不支持它,因为我在这里看不到任何添加的回调:mylivecanvas.com/api/…。另外,您应该使用&callback=?它,因为它不是您的情况下的第一个参数。
Petr Peller 2014年

1
@PetrPeller我对您的解决方案非常感兴趣。但是,这对我不起作用。我不想发布新问题,但这对我没有帮助。服务器似乎不支持什么意思?我该怎么办?您能给我一个适用于我的服务器的完整URL吗?我将不胜感激。我需要任何服务器配置吗?
tika 2014年

3
最后的修改是什么,“请不要再使用jQuery!” 意思?
ParkCheolu

1
现在是2018年,我不确定2017年应该使用什么!
瓦西里大厅

28

为了响应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获取“要点”列表。这样,它将为您创建一个随机命名的回调函数,即最终的“ callback =?”。在网址中。

<!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>

2
是的,它不再起作用了。Twitter更改了其API。
PapaFreud 2014年

3
<!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> 

上面的代码有助于从Flicker API获取图像。这使用GET方法来使用JSONP获取图像。可以在这里找到详细信息

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.