JSON和JSONP有什么区别？

格式明智，文件types明智和实际使用明智吗？

Answer 1

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

//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); 

Answer 2

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

通常你会用它来包含来自CDN的库，比如jQuery 。 但是，我们可以滥用这个，并使用它来取回数据！ JSON已经是有效的JavaScript（大部分），但是我们不能只是在脚本文件中返回JSON，因为我们无法知道脚本/数据何时加载完成，除非分配给一个variables或传递给一个函数。 因此，我们所做的就是告诉Web服务在准备好时代表我们调用一个函数。

例如，我们可能会从证券交易所API请求一些数据，并且与我们通常的API参数一起，我们给它一个callback，如callThisWhenReady 。 Web服务然后用我们的函数包装数据，并像这样返回它： callThisWhenReady({...data...}) 。 现在，只要脚本加载，浏览器就会尝试执行它（正常情况下），然后调用我们的任意函数并向我们提供我们想要的数据。

它和普通的AJAX请求非常相似，除了不用调用匿名函数，我们必须使用命名函数。

jQuery实际上通过为您创build一个唯一命名的函数并将其传递给您，从而无缝地为您提供支持，然后运行您想要的代码。

Answer 3

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

Answer 4

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通过AJAX来请求JSON，并且可以使用我们在JSON内容周围创build的callback函数。 输出应该是JSON作为一个对象，然后我们可以将这些数据用于任何我们想要的而没有任何限制。

Answer 5

JSONP本质上是JSON，带有额外的代码，就像一个包裹数据的函数调用一样。 它允许数据在parsing过程中执行。

Answer 6

JSON

JSON（Javascript对象表示法）是在应用程序之间传输数据的一种便捷方式，特别是当目标是Javascript应用程序时。

例如：

这是一个使用JSON作为服务器响应传输的最小示例。 客户端使用JQuery简写函数$ .getJSON进行ajax请求。 服务器生成一个散列，将其格式化为JSON并将其返回给客户端。 客户端格式化，并把它放在一个页面元素。

链接： json和jsonp之间的区别

服务器：

 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与填充）

当从客户端的不同域发送JSON响应时， JSONP是克服浏览器限制的简单方法。 使用JSONP客户端的唯一更改是向URL添加callback参数

服务器：

 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 } 

Answer 7

“JSONP是带有额外代码的JSON”对于现实世界来说太容易了。 不，你必须有一点差异。 如果一切正常 ，编程有什么乐趣？

原来， JSON不是JavaScript的一个子集 。 如果你只是把一个JSON对象包装在一个函数调用中，有一天你会被奇怪的语法错误咬伤，就像我今天一样。