【问题标题】:Basic example of using .ajax() with JSONP?将 .ajax() 与 JSONP 一起使用的基本示例?
【发布时间】:2011-08-22 01:35:21
【问题描述】:

请有人帮我弄清楚如何开始使用 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: 照片, jsonp: false, });您已将照片作为字符串输入。

标签: ajax json jsonp


【解决方案1】:

JSONP 确实是克服 XMLHttpRequest 同域策略的简单技巧。 (如您所知,无法将 AJAX (XMLHttpRequest) 请求发送到不同的域。)

所以 - 我们必须使用 script HTMLl 标签而不是使用 XMLHttpRequest,这些标签通常用于加载 JS 文件,以便 JS 从另一个标签获取数据领域。听起来很奇怪?

事实是 - 结果表明 script 标签可以以类似于 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 提要):

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

【讨论】:

  • 这个答案现在有点过时了,因为浏览器现在支持 Access-Control-Allow-Origin 标头,允许对某些跨域域进行常规 Ajax 调用。
  • 请记住,您不能使用 JSONP 进行表单 POST。更多信息:markhneedham.com/blog/2009/08/27/…
  • 如果您想让这些脚本投入生产,您需要考虑什么?
  • 哇,这真的很有帮助!我终于知道 JSONP 到底是什么以及它是如何工作的!
【解决方案2】:

针对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”列表。这样,它会为您创建一个随机命名的回调函数,即最终的“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>

【讨论】:

  • 你是对的,它不再起作用了。 Twitter 改变了他们的 API。
【解决方案3】:

还有更简单的方法可以使用 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

【讨论】:

  • @PetrPeller,看起来不错,但我似乎没有用它来制作产品。你能看到这个吗? JSFiddle 没有数据提醒。也许我错过了什么
  • @xDNP JSONP 响应必须被服务器支持。您的服务器似乎不支持它,因为我在这里看不到任何添加的回调:mylivecanvas.com/api/…。此外,您应该使用&amp;callback=?,因为它不是您案例中的第一个参数。
  • @PetrPeller 我对您的解决方案非常感兴趣。但是,这对我不起作用。我不想发布新问题,但这对我没有帮助。 服务器似乎不支持是什么意思?我该怎么办?你能给我一个适用于我的服务器的完整 URL 吗?我会很感激你的。 我需要任何服务器配置吗?
  • 最后的编辑是什么,“请不要再使用jQuery了!”什么意思?
  • 现在是 2018 年,我不确定 2017 年应该使用什么!
【解决方案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> 

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

【讨论】:

    猜你喜欢
    • 2014-09-02
    • 2015-12-20
    • 2012-08-02
    • 2015-01-21
    • 1970-01-01
    • 1970-01-01
    • 2015-08-27
    • 2022-01-22
    相关资源
    最近更新 更多