我理解JSON，但不理解JSONP。维基百科关于JSON的文档是JSONP的最高搜索结果。上面写着：
JSONP或“带填充的JSON”是一个JSON扩展，其中前缀被指定为调用本身的输入参数。
嗯？什么电话？这对我来说毫无意义。JSON是一种数据格式。没有电话。
第二个搜索结果来自一个叫雷米的人，他写了关于JSONP的文章：
JSONP是脚本标记注入，将服务器的响应传递给用户指定的函数。
我可以理解，但这仍然没有任何意义。
那么什么是JSONP？为什么创建它（它解决了什么问题）？我为什么要用它？
附录：我刚刚在维基百科上为JSONP创建了一个新页面；根据jvenema的回答，它现在对JSONP有了清晰而透彻的描述。
当前回答
出身背景
您应该尽可能使用CORS（即您的服务器或API支持它，浏览器支持足够），因为JSONP具有固有的安全风险。
示例
JSONP（带填充的JSON）是一种常用于绕过web浏览器中的跨域策略。（您不允许对浏览器认为位于不同服务器上的网页发出AJAX请求。）
JSON和JSONP在客户端和服务器上的行为不同。JSONP请求不会使用XMLHTTPRequest和关联的浏览器方法进行调度。而是创建一个＜script＞标记，其源设置为目标URL。然后将此脚本标记添加到DOM（通常在＜head＞元素内）。
JSON请求：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// success
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
JSONP请求：
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
JSON响应和JSONP响应之间的区别在于，JSONP应答对象作为参数传递给回调函数。
JSON：
{ "bar": "baz" }
日本电话：
foo( { "bar": "baz" } );
这就是为什么您看到包含回调参数的JSONP请求，以便服务器知道包装响应的函数的名称。
当浏览器评估＜script＞标记时（请求完成后），该函数必须存在于全局范围中。
处理JSON响应和JSONP响应之间需要注意的另一个区别是，JSON响应中的任何解析错误都可以通过包装对responseText求值的尝试来捕获在try/catch语句中。由于JSONP响应的性质，响应中的解析错误将导致无法缓存的JavaScript解析错误。
这两种格式都可以通过在启动请求之前设置超时并在响应处理程序中清除超时来实现超时错误。
使用jQuery
使用jQuery发出JSONP请求的有用之处在于，jQuery在后台为您完成所有工作。
默认情况下，jQuery要求您包含&callback=？在AJAX请求的URL中。jQuery将接受您指定的成功函数，为其分配一个唯一的名称，并将其发布到全局范围中。然后它将取代问号？在回调中=？使用它指定的名称。
比较类似的JSON和JSONP实现
以下假定响应对象｛“bar”：“baz”｝
JSON：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
日本电话：
function foo(response) {
document.getElementById("output").innerHTML = response.bar;
};
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
其他回答
JSONP通过构造一个“脚本”元素（以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 . ")";
?>
出身背景
您应该尽可能使用CORS（即您的服务器或API支持它，浏览器支持足够），因为JSONP具有固有的安全风险。
示例
JSONP（带填充的JSON）是一种常用于绕过web浏览器中的跨域策略。（您不允许对浏览器认为位于不同服务器上的网页发出AJAX请求。）
JSON和JSONP在客户端和服务器上的行为不同。JSONP请求不会使用XMLHTTPRequest和关联的浏览器方法进行调度。而是创建一个＜script＞标记，其源设置为目标URL。然后将此脚本标记添加到DOM（通常在＜head＞元素内）。
JSON请求：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// success
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
JSONP请求：
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
JSON响应和JSONP响应之间的区别在于，JSONP应答对象作为参数传递给回调函数。
JSON：
{ "bar": "baz" }
日本电话：
foo( { "bar": "baz" } );
这就是为什么您看到包含回调参数的JSONP请求，以便服务器知道包装响应的函数的名称。
当浏览器评估＜script＞标记时（请求完成后），该函数必须存在于全局范围中。
处理JSON响应和JSONP响应之间需要注意的另一个区别是，JSON响应中的任何解析错误都可以通过包装对responseText求值的尝试来捕获在try/catch语句中。由于JSONP响应的性质，响应中的解析错误将导致无法缓存的JavaScript解析错误。
这两种格式都可以通过在启动请求之前设置超时并在响应处理程序中清除超时来实现超时错误。
使用jQuery
使用jQuery发出JSONP请求的有用之处在于，jQuery在后台为您完成所有工作。
默认情况下，jQuery要求您包含&callback=？在AJAX请求的URL中。jQuery将接受您指定的成功函数，为其分配一个唯一的名称，并将其发布到全局范围中。然后它将取代问号？在回调中=？使用它指定的名称。
比较类似的JSON和JSONP实现
以下假定响应对象｛“bar”：“baz”｝
JSON：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
日本电话：
function foo(response) {
document.getElementById("output").innerHTML = response.bar;
};
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
JSONP代表带填充的JSON。
这是一个网站，有很多例子，从最简单的使用这一技术到最先进的平面JavaScript的解释：
w3schools.com/JSONP
上面描述的我最喜欢的技术之一是Dynamic JSON Result，它允许以URL参数将JSON发送到PHP文件，并让PHP文件根据获得的信息返回JSON对象。
jQuery等工具也有使用JSONP的工具：
jQuery.ajax({
url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
jsonp: "callbackName",
dataType: "jsonp"
}).done(
response => console.log(response)
);
其实并不太复杂。。。
假设你在domain example.com上，你想向domain 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);
};
现在，当加载脚本时，将对其求值，并执行您的函数。瞧，跨域请求！
还值得注意的是JSONP的一个主要问题：您失去了对请求的大量控制。例如，没有“好”的方法可以取回正确的故障代码。因此，您最终使用计时器来监视请求等，这总是有点可疑。JSONRequest的提议是允许跨域脚本编写、维护安全性和允许正确控制请求的一个很好的解决方案。
目前（2015年），CORS是与JSONRequest相比的推荐方法。JSONP对于较旧的浏览器支持仍然有用，但考虑到安全问题，除非您别无选择，否则CORS是更好的选择。
JSONP实际上是克服XMLHttpRequest同域策略的一个简单技巧。（如您所知，不能将AJAX（XMLHttpRequest）请求发送到其他域。）
因此，我们必须使用脚本HTML标记，而不是使用XMLHttpRequest，这些标记通常用于加载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代表带填充的JSON。（这项技术的名称很差，因为它和大多数人认为的“填充”毫无关系。）
