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

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

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

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

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

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

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

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

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

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

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

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

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

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

结果是，您可以将JSON作为脚本文件加载。如果您之前设置了一个名为func的函数，那么当脚本文件加载完成时，该函数将使用一个参数(即JSON数据)调用。这通常用于允许使用JSON数据进行跨站点AJAX。如果您知道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);