JSON和JSONP有什么区别?

格式明智,文件types明智和实际使用明智吗?

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

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

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

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

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

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

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

JSONP代表“填充JSON”,这是一个解决方法来加载不同领域的数据。 它将脚本加载到DOM的头部,因此可以像访问自己的域一样访问信息,从而避免了跨域问题。

 jsonCallback( { "sites": [ { "siteName": "JQUERY4U", "domainName": "http://www.jquery4u.com", "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; 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作为一个对象,然后我们可以将这些数据用于任何我们想要的而没有任何限制。

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

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 } 

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

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