我理解JSON，但不理解JSONP。维基百科关于JSON的文档是JSONP的最高搜索结果。上面写着：
JSONP或“带填充的JSON”是一个JSON扩展，其中前缀被指定为调用本身的输入参数。
嗯？什么电话？这对我来说毫无意义。JSON是一种数据格式。没有电话。
第二个搜索结果来自一个叫雷米的人，他写了关于JSONP的文章：
JSONP是脚本标记注入，将服务器的响应传递给用户指定的函数。
我可以理解，但这仍然没有任何意义。
那么什么是JSONP？为什么创建它（它解决了什么问题）？我为什么要用它？
附录：我刚刚在维基百科上为JSONP创建了一个新页面；根据jvenema的回答，它现在对JSONP有了清晰而透彻的描述。
当前回答
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;
?>
其他回答
因为您可以要求服务器为返回的JSON对象添加前缀。例如
function_prefix（json_object）；
以便浏览器将JSON字符串作为表达式“内联”求值。这一技巧使服务器可以直接在客户端浏览器中“注入”javascript代码，并且绕过“同源”限制。
换句话说，您可以实现跨域数据交换。
通常，XMLHttpRequest不允许直接进行跨域数据交换（需要通过同一域中的服务器），而：
<script src=“some_other_domain/some_data.js&prefix=function_prefix>`可以从不同于源域的域访问数据。
同样值得注意的是：即使在尝试这种“技巧”之前，服务器应该被认为是“可信的”，但对象格式等可能改变的副作用也可以得到控制。如果使用function_prefix（即正确的js函数）接收JSON对象，则所述函数可以在接受/进一步处理返回的数据之前执行检查。
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中时，它将自动运行whateverJavascriptName，您应该将其实现为回调函数：
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服务可以在以下位置获得：
在理解JSONP之前，您需要了解JSON格式和XML。目前，web上最常用的数据格式是XML，但XML非常复杂。这使得用户不方便处理嵌入在网页中的内容。
为了使JavaScript能够轻松地交换数据，即使作为数据处理程序，我们也根据JavaScript对象使用了措辞，并开发了一种简单的数据交换格式，即JSON。JSON可以用作数据，也可以用作JavaScript程序。
JSON可以直接嵌入JavaScript中，使用它们可以直接执行某些JSON程序，但由于安全限制，浏览器沙盒机制禁用跨域JSON代码执行。
为了使JSON可以在执行后传递，我们开发了一个JSONP。JSONP通过JavaScript回调功能和＜script＞标记绕过浏览器的安全限制。
简而言之，它解释了JSONP是什么，它解决了什么问题（何时使用它）。
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 . ")";
?>
其实并不太复杂。。。
假设你在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是更好的选择。
