JSON和JSONP有什么区别？

Question

格式明智,文件类型明智和实用明智吗？

Answer 1

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

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

结果是您可以将JSON加载为脚本文件.如果您之前设置了一个名为的函数func,则在脚本文件加载完成后,将使用一个参数(即JSON数据)调用该函数.这通常用于允许带有JSON数据的跨站点AJAX.如果您知道example.com正在提供看起来像上面给出的JSONP示例的JSON文件,那么您可以使用这样的代码来检索它,即使您不在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>标签注入我们自己的页面,并允许它们引用托管在其他域的脚本.

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

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

它的工作方式与普通的AJAX请求非常相似,除了不是调用匿名函数,我们必须使用命名函数.

jQuery实际上为您提供了无缝支持,方法是为您创建一个唯一命名的函数并将其传递出去,然后依次运行您想要的代码.

Answer 3

JSONP允许您指定传递JSON对象的回调函数.这允许您绕过相同的源策略并将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和我们围绕JSON内容创建的回调函数通过AJAX请求JSON.输出应该是JSON作为对象,然后我们可以无限制地将数据用于我们想要的任何内容.

Answer 5

JSONP本质上是带有额外代码的JSON,就像围绕数据的函数调用一样.它允许在解析期间对数据执行操作.

Answer 6

JSON

JSON(JavaScript Object Notation)是在应用程序之间传输数据的便捷方式,尤其是当目标是JavaScript应用程序时.

例:

这是一个使用JSON作为服务器响应传输的最小示例.客户端使用jQuery简写函数$ .getJSON发出Ajax请求.服务器生成哈希,将其格式化为JSON并将其返回给客户端.客户端对此进行格式化并将其放在页面元素中.

服务器:

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添加回调参数

服务器:

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
}

链接: http ://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

Answer 7

"JSONP是带有额外代码的JSON"对于现实世界来说太容易了.不,你的差异很小.如果一切正常,编程的乐趣是什么？

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