在 JSONP 中使用. ajax ()的基本例子？

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

应该产生一个警报，至少我可以从文档中找出: isn’t (但也不会产生任何错误)。

谢谢。

394098 次浏览
小开

JSONP实际上是一个简单的技巧，以克服 XMLHttpRequest相同的域策略。(正如您所知道的，不能将 AJAX (XMLHttpRequest)请求发送到其他域。)

因此，为了让 JS 从另一个域获取数据，我们不得不使用 剧本 HTML 标记(通常用于加载 JS 文件的标记) ，而不是使用 XMLHttpRequest。听起来怪怪的？

事实上，剧本标签也可以像 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";

注意到那边的 我的复试函数了吗？因此，当 JSONP服务器接收到您的请求并找到回调参数时，它不返回普通的 JS 数组，而是返回以下内容:

my_callback({['some string 1', 'some data', 'whatever data']});
看看利润在哪里: 现在我们得到了自动回调(我的复试) ，一旦我们得到数据就会触发。 这就是关于 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 代表 JSONP。(这种技术的名字非常糟糕，因为它实际上与大多数人认为的“填充”毫无关系。)

小开

为了响应 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);
};

虽然警告()这样的数组并不能很好地工作... ... 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>
小开

如何使用 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 自动注册并调用回调函数。

有关详细信息，请参阅 GetJSON 文档。

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

上面的代码有助于从 FlickAPI 获取图像。这使用 GET 方法使用 JSONP 获取图像。它可以在 给你中找到详细信息


提交答案