什么是JSONP？
这个问题在这里已经有了答案：
其实并不复杂......
假设您位于example.com域，并且您想向域example.net发出请求。 要做到这一点，你需要跨越领域的界限，在大多数浏览器领域都是不允许的。
绕过这个限制的一个条目是<script>标签。 当您使用脚本标记时，域限制将被忽略，但在正常情况下，您无法对结果进行任何操作，只会对脚本进行评估。
输入JSONP。 当您向启用了JSONP的服务器发出请求时，您会传递一个特殊参数，告诉服务器关于您的页面的一些信息。 这样，服务器就可以很好地将其响应以您的页面可以处理的方式包装起来。
例如，假设服务器需要一个名为“callback”的参数来启用其JSONP功能。 然后您的请求将如下所示：
http://www.example.net/sample.aspx?callback=mycallback
没有JSONP，这可能会返回一些基本的JavaScript对象，如下所示：
{ foo: 'bar' }
但是，使用JSONP时，当服务器收到“回调”参数时，它将结果稍微区分一下，返回如下所示的内容：
mycallback({ foo: 'bar' });
正如你所看到的，它现在将调用你指定的方法。 所以，在你的页面中，你定义了回调函数：
mycallback = function(data){
alert(data.foo);
};
现在，当脚本被加载时，它将被评估，并且你的函数将被执行。 Voila，跨域请求！
同样值得注意的是JSONP的一个主要问题：您失去了对请求的很多控制。 例如，没有“好”的方法来获取适当的失败代码。 结果，你最终使用定时器来监视请求等，这总是有点可疑。 JSONRequest的提议是允许跨域脚本编写，维护安全性并允许正确控制请求的一个很好的解决方案。
现在（2015年），CORS是推荐的方法与JSONRequest。 JSONP对于较老的浏览器支持仍然有用，但考虑到安全隐患，除非您没有选择，否则CORS是更好的选择。
JSONP是一个简单的技巧来克服XMLHttpRequest相同的域策略。 （如你所知，你不能将AJAX（XMLHttpRequest）请求发送到不同的域。）
因此，我们不必使用XMLHttpRequest，而是使用脚本 HTML标签，这是您通常用来加载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>
然而，这有点不方便，因为我们必须从脚本标记中获取这个数组。 所以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用法的简单示例，这些不是生产就绪脚本。
基本的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代表带有Padding的JSON 。 （名字很差，因为它与大多数人认为的“填充”无关。）
JSONP通过构建一个“script”元素（HTML标记或通过JavaScript插入到DOM中）来工作，该元素请求远程数据服务位置。 响应是一个JavaScript加载到您的浏览器与预定义的函数的名称以及被传递的参数，即请求的JSON数据。 当脚本执行时，该函数与JSON数据一起被调用，允许请求页面接收和处理数据。
进一步阅读访问： https ： //blogs.sap.com/2013/07/15/secret-behind-jsonp/
客户端代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<title>AvLabz - CORS : The Secrets Behind JSONP </title>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="username" placeholder="Enter Your Name"/>
<button type="submit" onclick="sendRequest()"> Send Request to Server </button>
<script>
"use strict";
//Construct the script tag at Runtime
function requestServerCall(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(script);
head.removeChild(script);
}
//Predefined callback function
function jsonpCallback(data) {
alert(data.message); // Response data from the server
}
//Reference to the input field
var username = document.getElementById("username");
//Send Request to Server
function sendRequest() {
// Edit with your Web Service URL
requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
}
</script>
</body>
</html>
服务器端的一段PHP代码
<?php
header("Content-Type: application/javascript");
$callback = $_GET["callback"];
$message = $_GET["message"]." you got a response from server yipeee!!!";
$jsonResponse = "{"message":"" . $message . ""}";
echo $callback . "(" . $jsonResponse . ")";
?>