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