JSON和JSONP有什么区别?


393

明智地设置格式,明智地使用文件类型以及明智地使用实用程序?



1
感谢您的链接,那里有一些非常好的信息。
穆罕默德

4
一种方法比另一种更快吗?例如,如果您使用XMLHttpRequest来获取请求(显然是由于它是“正常” ajax,则到达同一域),或者如果您使用JSONP方法(不会使用XMLHTTPRequest)-一个会比另一个快吗?我知道这取决于几个因素-但是有人进行速度比较吗?
Yuval A. 2012年

Answers:


405

JSONP是带填充的JSON。也就是说,您将字符串放在开头,并在其周围加上一对括号。例如:

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

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

3
假设您可以配置CORS以允许跨源请求,那么JSONP仍然有用吗?
y3sh

也许有些迟了,但是我想为其他人回答您的问题,不,如果您使用JSONP,您将忽略所有CORS优势(由于安全性问题,我称之为优势)。我建议您正确实施CORS,这将帮助您解决安全问题,以及更好的体系结构方法。
Dogan

101

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

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

例如,我们可能从证券交易所API请求一些数据,并与我们通常的API参数一起给它一个回调,例如?callback=callThisWhenReady。然后,Web服务将数据包装到我们的函数中,并返回如下所示:callThisWhenReady({...data...})。现在,一旦脚本加载完毕,您的浏览器就会尝试执行该脚本(正常运行),这反过来又调用我们的任意函数并向我们提供所需的数据。

它的工作原理与普通的AJAX请求非常相似,只不过我们必须使用命名函数,而不是调用匿名函数。

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


2
与什么分开?JSON也不是一种语言
尼克

6
@nickf:是的...我一直在寻找正确的词...那你叫什么呢?根据json.org的“数据交换格式”。
mpen

或更易读:JSON:“文本符号”中的javascript对象。就像您会toString()一个Java对象一样?
Sam Vloeberghs 2013年

FWIW:@SamVloeberghs-说JSON表示一个javascript对象有点误导。它可以是来自任何语言或数据库的任何数据,可以表示为名称-值对和数组。此外,还需要其他约定才能准确地往返于任何 JS对象-请参阅JSON:不支持的本机数据类型。值得注意的是,JS Date作为字符串返回到远端。weblog.west-wind.com/posts/2014/jan/06/...
ToolmakerSteve

66

JSONP允许您指定传递给JSON对象的回调函数。这使您可以绕过相同的原始策略,并将JSON从外部服务器加载到网页上的JavaScript中。


30

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和我们围绕JSON内容创建的回调函数通过AJAX请求JSON。输出应为JSON作为对象,然后我们可以不受限制地将数据用于任何我们想要的东西。



13

JSON格式

JSON(JavaScript对象表示法)是在应用程序之间传输数据的便捷方法,尤其是当目标是JavaScript应用程序时。

例:

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

服务器:

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


6

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

事实证明JSON不是JavaScript的子集。如果您要做的只是获取一个JSON对象并将其包装在函数调用中,那么有一天,您将像今天一样被奇怪的语法错误所困扰。


0

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

但是,该方法的实际实施涉及细微的差异,通常无法清楚地解释。

这是一个简单的教程,并排显示了JSON和JSONP。

所有代码均可在Github上免费获得,实时版本可在http://json-jsonp-tutorial.craic.com找到。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.