基本上，由于同源策略，您不允许通过AJAX从另一个域请求JSON数据。AJAX允许您在页面已经加载后获取数据，然后在返回后执行一些代码/调用函数。我们不能使用AJAX，但我们可以将<script>标签注入到我们自己的页面，这些标签可以引用托管在其他域的脚本。

Usually you would use this to include libraries from a CDN such as jQuery. However, we can abuse this and use it to fetch data instead! JSON is already valid JavaScript (for the most part), but we can't just return JSON in our script file, because we have no way of knowing when the script/data has finished loading and we have no way of accessing it unless it's assigned to a variable or passed to a function. So what we do instead is tell the web service to call a function on our behalf when it's ready.

例如，我们可能会从股票交易所API请求一些数据，除了我们通常的API参数外，还会给它一个回调函数，比如?callback=callThisWhenReady。web服务然后用我们的函数包装数据并像这样返回它:callThisWhenReady({…data…})。现在，一旦脚本加载，您的浏览器将尝试执行它(正常)，然后调用我们的任意函数并为我们提供我们想要的数据。

它的工作原理很像普通的AJAX请求，只是我们必须使用命名函数而不是调用匿名函数。

jQuery实际上为您无缝地支持这一点，它为您创建了一个唯一命名的函数并将其传递出去，然后该函数将依次运行您想要的代码。

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

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

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

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

基本上，由于同源策略，您不允许通过AJAX从另一个域请求JSON数据。AJAX允许您在页面已经加载后获取数据，然后在返回后执行一些代码/调用函数。我们不能使用AJAX，但我们可以将<script>标签注入到我们自己的页面，这些标签可以引用托管在其他域的脚本。

Usually you would use this to include libraries from a CDN such as jQuery. However, we can abuse this and use it to fetch data instead! JSON is already valid JavaScript (for the most part), but we can't just return JSON in our script file, because we have no way of knowing when the script/data has finished loading and we have no way of accessing it unless it's assigned to a variable or passed to a function. So what we do instead is tell the web service to call a function on our behalf when it's ready.

例如，我们可能会从股票交易所API请求一些数据，除了我们通常的API参数外，还会给它一个回调函数，比如?callback=callThisWhenReady。web服务然后用我们的函数包装数据并像这样返回它:callThisWhenReady({…data…})。现在，一旦脚本加载，您的浏览器将尝试执行它(正常)，然后调用我们的任意函数并为我们提供我们想要的数据。

它的工作原理很像普通的AJAX请求，只是我们必须使用命名函数而不是调用匿名函数。

jQuery实际上为您无缝地支持这一点，它为您创建了一个唯一命名的函数并将其传递出去，然后该函数将依次运行您想要的代码。

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

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