我了解 JSON，但不了解 JSONP。维基百科关于 JSON 的文档是（曾经）JSONP 的最高搜索结果。它是这样说的：
JSONP 或“带填充的 JSON”是 JSON 扩展，其中前缀被指定为调用本身的输入参数。
嗯？什么电话？这对我来说没有任何意义。JSON 是一种数据格式。没有电话。
第二个搜索结果来自某个名叫Remy的人，他写了这个关于 JSONP 的内容：
JSONP 是脚本标签注入，将来自服务器的响应传递给用户指定的函数。
我可以理解这一点，但它仍然没有任何意义。
那么什么是 JSONP？为什么创建它（它解决了什么问题）？我为什么要使用它？
附录：我刚刚在 Wikipedia上为 JSONP 创建了一个新页面；它现在根据jvenema的回答对 JSONP 进行了清晰而全面的描述。
其实也不是很复杂...
假设您在 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代表带有 Padding 的 JSON。（命名非常糟糕的技术，因为它实际上与大多数人认为的“填充”无关。）
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 . ")";
?>
因为您可以要求服务器为返回的 JSON 对象添加前缀。例如
function_prefix(json_object);
为了让浏览器eval将 JSON 字符串“内联”为表达式。这个技巧使服务器可以直接在客户端浏览器中“注入”javascript代码，并且绕过“同源”限制。
也就是说，可以实现跨域数据交换。
通常，XMLHttpRequest不允许直接跨域数据交换（需要通过同一域中的服务器），而：
<script src="some_other_domain/some_data.js&prefix=function_prefix>` 可以从不同于源的域访问数据。
同样值得注意的是：即使在尝试这种“技巧”之前服务器应该被认为是“受信任的”，但可以包含对象格式等可能更改的副作用。如果使用a function_prefix（即适当的js函数）接收JSON对象，则所述函数可以在接受/进一步处理返回的数据之前执行检查。
JSONP 是一种古老的技巧，旨在绕过安全限制，该限制禁止我们获取与我们当前浏览的网站不同的网站（不同的来源1 ）中的 JSON 数据。
该技巧通过使用<script>从该位置请求 JSON 的标签起作用，例如：{ "user":"Smith" }，但包装在一个函数中，即实际的 JSONP（“带有填充的 JSON”）：
peopleDataJSONP({"user":"Smith"})
以这种形式接收它使我们能够在我们的peopleDataJSONP函数中使用数据。JSONP 是一种不好的做法，不再需要，不要使用它（阅读下文）。
假设我们想使用ourweb.com托管在anotherweb.com. 如果我们使用 GET 请求（thinkXMLHttpRequest或fetchcall$.ajax等），我们的浏览器会告诉我们不允许出现这个丑陋的错误：
如何获取我们想要的数据？好吧，<script>标签不受整个服务器（origin 1）的限制！这就是为什么我们可以从任何服务器（例如 CDN）加载 jQuery 或 Google Maps 等库而不会出现任何错误。
这是重要的一点：如果你仔细想想，这些库是实际的、可运行的 JS 代码（通常是一个包含所有逻辑的庞大函数）。但是原始数据呢？JSON 数据不是代码。没有什么可跑的；它只是纯文本。
因此，没有办法处理或操纵我们宝贵的数据。浏览器将下载我们标签指向的数据<script>，在处理时它会抱怨：
wtf这是
{"user":"Smith"}我们加载的废话吗？这不是代码。我无法计算，语法错误！
使用该数据的旧/hacky方式？如果我们可以使纯文本以某种方式可运行，我们就可以在运行时获取它。所以我们需要anotherweb.com用一些逻辑来发送它，所以当它被加载时，你在浏览器中的代码将能够使用这些数据。我们需要两件事：1）以可以运行的方式获取数据，2）在客户端中编写一些代码，以便在数据运行时调用此代码并使用数据。
对于1)我们要求外部服务器在 JS 函数中向我们发送 JSON 数据。数据本身被设置为该函数的输入。它看起来像这样：
peopleDataJSONP({"user":"Smith"})
这使它成为我们的浏览器将解析和运行的JS 代码而不会抱怨！与 jQuery 库完全一样。为了接收这样的数据，客户端“询问”JSONP 友好的服务器，通常是这样的：
<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>
根据2)，由于我们的浏览器将接收具有该函数名称的 JSONP，因此我们需要在代码中具有相同名称的函数，如下所示：
function peopleDataJSONP(data){
alert(data.user); // "Smith"
}
浏览器将下载 JSONP 并运行它，它会调用我们的函数，其中的参数data将是来自 的 JSON 数据anotherweb.com。我们现在可以随心所欲地处理我们的数据。
JSONP 是一种跨站点 hack，但有一些缺点：
外卖是现在没有必要使用它。
您应该在此处阅读有关 CORS的信息，但其要点是：
跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个来源运行的 Web 应用程序可以访问来自不同来源的选定资源。当 Web 应用程序请求的资源与其自己的来源（域、协议或端口）不同时，它会执行跨域 HTTP 请求。
https://web.com与http://web.com（不同协议）和https://web.com:8081（不同端口）以及显然https://thatotherweb.net（不同主机）不同的来源JSONP 是解决跨域脚本错误的好方法。您可以完全使用 JS 来使用 JSONP 服务，而无需在服务器端实现 AJAX 代理。
您可以使用b1t.co服务来查看它是如何工作的。这是一项免费的 JSONP 服务，可让您缩小 URL。这是用于服务的 url：
http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]
例如调用，http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com
会回来
whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});
因此，当该 get 作为 src 加载到您的 js 中时，它将自动运行您应该作为回调函数实现的任何JavascriptName：
function minifyResultsCallBack(data)
{
document.getElementById("results").innerHTML = JSON.stringify(data);
}
要实际进行 JSONP 调用，您可以通过多种方式进行（包括使用 jQuery），但这里是一个纯 JS 示例：
function minify(urlToMinify)
{
url = escape(urlToMinify);
var s = document.createElement('script');
s.id = 'dynScript';
s.type='text/javascript';
s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
document.getElementsByTagName('head')[0].appendChild(s);
}
一个分步示例和一个用于练习的 jsonp Web 服务可在以下位置获得：this post
JSONP 使用的简单示例。
客户端.html
<html>
<head>
</head>
body>
<input type="button" id="001" onclick=gO("getCompany") value="Company" />
<input type="button" id="002" onclick=gO("getPosition") value="Position"/>
<h3>
<div id="101">
</div>
</h3>
<script type="text/javascript">
var elem=document.getElementById("101");
function gO(callback){
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://localhost/test/server.php?callback='+callback;
elem.appendChild(script);
elem.removeChild(script);
}
function getCompany(data){
var message="The company you work for is "+data.company +"<img src='"+data.image+"'/ >";
elem.innerHTML=message;
}
function getPosition(data){
var message="The position you are offered is "+data.position;
elem.innerHTML=message;
}
</script>
</body>
</html>
服务器.php
<?php
$callback=$_GET["callback"];
echo $callback;
if($callback=='getCompany')
$response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";
else
$response="({\"position\":\"Development Intern\"})";
echo $response;
?>
在了解 JSONP 之前，您需要了解 JSON 格式和 XML。目前Web上最常用的数据格式是XML，但是XML非常复杂。它使用户不方便处理嵌入在网页中的内容。
为了让 JavaScript 能够方便地交换数据，甚至作为数据处理程序，我们根据 JavaScript 对象的措辞，开发了一种简单的数据交换格式，即 JSON。JSON 可以用作数据，也可以用作 JavaScript 程序。
JSON 可以直接嵌入到 JavaScript 中，使用它们可以直接执行某些 JSON 程序，但是由于安全限制，浏览器沙盒机制禁用了跨域 JSON 代码执行。
为了使 JSON 可以在执行后传递，我们开发了 JSONP。JSONP 通过 JavaScript 回调功能和 <script> 标签绕过浏览器的安全限制。
所以简而言之，它解释了 JSONP 是什么，它解决了什么问题（何时使用它）。
JSONP代表带有Padding的JSON。
这里是网站，有很好的例子，从最简单的技术使用到最先进的平面 JavaScript 的解释：
上面描述的我最喜欢的技术之一是动态 JSON 结果，它允许将 JSON 发送到 URL 参数中的 PHP 文件，并让PHP 文件也根据它获得的信息返回一个 JSON 对象。
jQuery.ajax({
url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
jsonp: "callbackName",
dataType: "jsonp"
}).done(
response => console.log(response)
);
我试着用简单的方式解释：
为什么使用：
由于跨域策略，从另一个域请求文件可能会导致问题。
从另一个域请求外部脚本没有这个问题。
JSONP 利用了这一优势，并使用脚本标签而不是 XMLHttpRequest 对象来请求文件。
服务器文件的代码：
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>处理数据的函数：
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}