那么什么是JSONP？它是为了解决什么问题而创建的？我为什么要使用它？
附录: 我刚刚在维基百科上创建了一个关于JSONP的新页面；它现在有一个清晰和详尽的JSONP描述，基于jvenema的回答。
实际上并不太复杂...
假设您在域名为example.com的网站上，想要向域名为example.net的网站发送请求。要这样做，您需要越过跨域限制，这在大多数浏览器中是不允许的。
唯一可以绕过此限制的是<script>标签。当您使用一个
JSONP 是一个简单的技巧，可以绕过 XMLHttpRequest 同源策略。 (如你所知，无法向不同域发送 AJAX (XMLHttpRequest) 请求。)
因此 - 我们需要使用 script HTML 标签来代替 XMLHttpRequest，通常情况下会使用这些标签来加载 js 文件，以便 js 可以从另一个域获取数据。听起来奇怪吗？
事实是 - 原来可以使用类似于 XMLHttpRequest 的方式来使用 script 标签！看看这个：
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<b>?callback=my_callback</b>';
注意那边的my_callback函数了吗？所以当JSONP服务器接收到您的请求并找到回调参数时，它将返回以下内容而不是返回纯js数组：
my_callback({['some string 1', 'some data', 'whatever data']});
看看利润在哪里：现在我们得到了自动回调（my_callback），一旦我们获得数据就会触发它。
这就是关于JSONP需要知道的全部：它是一个回调和脚本标记。
注意：这些是JSONP使用的简单示例，不是生产就绪的脚本。
基本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 是 JSON with Padding 的缩写（这个命名有些不准确，因为它与大多数人所想的“padding”没有任何关系）。
<script> 而没有说明如何使用它... - vanowm <!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 . ")";
?>
function_prefix(json_object);，这样浏览器就可以将JSON字符串"内联"作为表达式进行eval。这个技巧使得服务器能够直接在客户端浏览器中“注入”JavaScript代码，并且越过了“同源策略”，从而实现跨域数据交换。换句话说，您可以实现跨域数据交换。XMLHttpRequest不允许直接进行跨域数据交换（必须通过同一域内的服务器），但是：在以下情况下，即使来自不同域名，也可以通过function_prefix();super_dangerous_function{window.open('youvebeenhacked!')}()。 - apodJSONP是解决跨域脚本错误的好方法。您可以纯粹使用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"});
因此，当它作为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网络服务进行练习。
client.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>
server.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。
这是一个网站，其中包含很棒的例子，从最简单的使用到最高级的平面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)
);
尽可能使用 CORS（即您的服务器或 API 支持，且浏览器支持足够），因为 JSONP 存在固有的安全风险。
JSONP（带填充的 JSON）是一种常用的方法，用于绕过 Web 浏览器中的跨域策略。（您不被允许向被浏览器视为位于不同服务器上的 Web 页面发起 AJAX 请求。）
JSON 和 JSONP 在客户端和服务器端表现不同。JSONP 请求不使用 XMLHTTPRequest 和相关的浏览器方法进行分派。相反，创建了一个 <script> 标签，其源设置为目标 URL。然后将该脚本标记添加到 DOM 中（通常在 <head> 元素内部）。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// success
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
{ "bar": "baz" }
foo( { "bar": "baz" } );
这就是为什么你会看到JSONP请求包含callback参数，以便服务器知道将响应包装在哪个函数中。
这个函数必须存在于全局作用域中，在浏览器评估<script>标签时（一旦请求完成）。
JSON响应和JSONP响应处理之间要注意的另一个区别是，JSON响应中的任何解析错误都可以通过在try/catch语句中包装尝试评估responseText来捕获。由于JSONP响应的性质，响应中的解析错误将导致无法捕获的JavaScript解析错误。
两种格式都可以通过在发起请求之前设置超时并在响应处理程序中清除超时来实现超时错误。
使用jQuery进行JSONP请求的有用之处在于，jQuery在后台为您完成了所有工作。
默认情况下，jQuery 要求您在 AJAX 请求的 URL 中包含&callback=?。jQuery 将使用您指定的 success 函数，为其分配一个唯一的名称，并将其发布到全局范围内。然后，它将使用已分配的名称替换 &callback=? 中的问号 ?。
以下假设响应对象为 { "bar" : "baz" }
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);