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

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

“JSONP是带有额外代码的JSON”对于现实世界来说太简单了。不，你得有一点出入。如果一切都能正常工作，编程还有什么乐趣?

JSON不是JavaScript的子集。如果您所做的只是获取一个JSON对象并将其包装在一个函数调用中，总有一天您会被奇怪的语法错误所困扰，就像我今天一样。

JSONP代表“带填充的JSON”，它是一种从不同域加载数据的变通方法。它将脚本加载到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响应时，JSONP是克服浏览器限制的一种简单方法。

但是，这种方法的实际实施涉及到一些微妙的差异，这些差异往往没有得到清楚的解释。

下面是一个简单的教程，并排展示了JSON和JSONP。

所有的代码都可以在Github上免费获得，并且可以在http://json-jsonp-tutorial.craic.com上找到一个实时版本