请有人帮我弄清楚如何开始使用 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,
});
});
fiddle :http://jsfiddle.net/R7EPt/6/
应该产生警报，据我可以从文档中得出:不是(但也没有产生任何错误)。
谢谢。
最佳答案
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。 (命名非常糟糕的技术，因为它实际上与大多数人认为的“填充”无关。)
https://stackoverflow.com/questions/5943630/