JSONP是带填充的JSON。也就是说，你在开头放一个字符串，在它的周围放一对括号。例如：

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

结果是您可以将JSON作为脚本文件加载。如果您之前设置了一个名为func的函数，那么当脚本文件加载完成时，将使用一个参数（即JSON数据）调用该函数。这通常用于允许跨站点的 AJAX 与JSON数据。如果你知道example.com提供的JSON文件看起来像上面给出的JSONP示例，那么你可以使用这样的代码来检索它，即使你不在example.com域上：

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

基本上，由于同源策略，您不允许通过 AJAX 从另一个域请求JSON数据。 AJAX 允许您在页面加载后获取数据，然后在返回后执行一些代码/调用一个函数。我们不能使用 AJAX ，但我们可以将<script>标签注入到我们自己的页面中，并且允许引用托管在其他域的脚本。
通常你会使用它来包含来自CDN的库，比如jQuery。但是，我们可以滥用它，并使用它来获取数据！JSON已经是有效的JavaScript（for the most part），但是我们不能只在脚本文件中返回JSON，因为我们没有办法知道脚本/数据何时完成加载，并且我们没有办法访问它，除非它被分配给变量或传递给函数。因此，我们所做的是告诉Web服务在准备好时代表我们调用一个函数。
例如，我们可能从股票交易API请求一些数据，并与我们常用的API参数沿着，我们给予它一个回调，如?callback=callThisWhenReady。然后Web服务用我们的函数 Package 数据，并像这样返回：callThisWhenReady({...data...})。现在，一旦脚本加载，您的浏览器将尝试执行它（正常），这反过来调用我们的任意函数并向我们提供我们想要的数据。
它的工作方式与普通的 AJAX 请求非常相似，只是我们必须使用命名函数，而不是调用匿名函数。
jQuery实际上为您无缝地支持这一点，为您创建一个唯一命名的函数并传递它，然后它将反过来运行您想要的代码。

JSONP允许您指定一个传递给JSON对象的回调函数。这允许您绕过同源策略，并将JSON从外部服务器加载到网页上的JavaScript中。

JSONP代表“JSON with Padding”，它是从不同域加载数据的解决方案。它将脚本加载到DOM的头部，因此您可以访问信息，就像它加载在您自己的域中一样，从而绕过了跨域问题。

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

现在，我们可以使用JSONP和围绕JSON内容创建的回调函数通过 AJAX 请求JSON。输出应该是JSON作为一个对象，然后我们可以将数据用于任何我们想要的，没有限制。

JSONP本质上是带有额外代码的JSON，就像一个围绕数据的函数调用。它允许在解析期间对数据进行操作。

JSON
**JSON（JavaScript Object Notation）**是一种在应用程序之间传输数据的便捷方式，特别是当目标是JavaScript应用程序时。
示例：

下面是一个使用JSON作为服务器响应传输的最小示例。客户端使用jQuery速记函数$. getJSON发出 AJAX 请求。服务器生成一个散列，将其格式化为JSON并将其返回给客户端。客户端将其格式化并将其放入页面元素中。

服务器：

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

客户：

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

输出：

{
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP（JSON with Padding）
JSONP是一种克服浏览器限制的简单方法，用于从客户端发送来自不同域的JSON响应。

JSONP在客户端的唯一变化是向URL添加了一个回调参数

服务器：

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

客户：

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

输出：

{
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

“JSONP是JSON加上额外的代码”对于真实的世界来说太容易了。不，你必须有一点矛盾。如果一切都能正常工作，编程还有什么乐趣？
结果是JSON is not a subset of JavaScript。如果你所做的只是获取一个JSON对象并将其 Package 在一个函数调用中，总有一天你会被奇怪的语法错误所困扰，就像我今天一样。

JSONP是一种简单的方法，可以在从客户端发送来自不同域的JSON响应时克服浏览器限制。
但是，该方法的实际实施涉及到微妙的差异，这些差异往往没有解释清楚。
这里有一个简单的教程，并排展示了JSON和JSONP。
所有代码都可以在Github上免费获得，并且可以在http://json-jsonp-tutorial.craic.com上找到实时版本