JSON和JSONP的区别

Posted 2020-07-04 捷克轩

先前的概念中对JSON还是比较熟悉，对JSONP不是特别的清楚，整理完相关知识发现才豁然开朗。简单的说JSON是一种数据交换格式，而JSONP是一种非官方跨域数据交互协议。JSON是“暗号”，而JSONP则是接头方式。一个是描述信息的格式，一个是信息传递双方约定的方法。

   一、什么是JSON

   JSON(javascript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

   JSON建构于两种结构：

• “名称/值”对的集合(A collection of name/value pairs)。不同的语言中，它被理解为对象(object)，纪录(record)，结构(struct)，字典(dictionary)，哈希表(hash table)，有键列表(keyed list)，或者关联数组 (associative array)。

• 值的有序列表(An ordered list of values)。在大部分语言中，它被理解为数组(array)。

   这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

   JSON具有以下这些形式：

   对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始，“}”(右括号)结束。每个“名称”后跟一个“:”(冒号)；“‘名称/值’ 对”之间使用“,”(逗号)分隔。

   

   数组是值(value)的有序集合。一个数组以“[”(左中括号)开始，“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

   

   值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。

   

   字符串(string)是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。

   字符串(string)与C或者Java的字符串非常相似。

   

   数值(number)也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

   

   空白可以加入到任何符号之间。 以下描述了完整的语言。

   JSON的优点：

• 基于纯文本，跨平台传递极其简单；

• Javascript原生支持，后台语言几乎全部支持；

• 轻量级数据格式，占用字符数量极少，特别适合互联网传递；

• 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；

• 容易编写和解析，当然前提是你要知道数据结构；

   JSON实例：

// 描述一个人

var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}

// 获取这个人的信息

var personAge = person.Age;

// 描述几个人

var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]

// 读取其中John的公司名称

var johnsCompany = members[1].Company;

// 描述一次会议

var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members":
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}

// 读取参会者Henry是否工程师

var henryIsAnEngineer = conference.Members[2].Engineer;

   二、什么是JSONP?

   JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 html 的 <script> 元素是一个例外。利用<script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

   为了理解这种模式的原理，先想像有一个回传 JSON 文件的 URL，而 JavaScript 程式可以用 XMLHttpRequest 跟这个 URL 要资料。假设我们的 URL 是http://server2.example.com/RetrieveUser?UserId=xxx 。假设小明的 UserId 是 1823，且当浏览器透过 URL 传小明的 UserId，也就是抓取http://server2.example.com/RetrieveUser?UserId=1823 ，得到：

{"Name": "小明", "Id" : 1823, "Rank": 7}

   这个 JSON 资料可能是依据传过去 URL 的查询参数动态产生的。

   这个时候，把 <script> 元素的 src 属性设成一个回传 JSON 的 URL 是可以想像的，这也代表从 HTML 页面透过 script 元素抓取 JSON 是可能的。

   然而，一份 JSON 文件并不是一个 JavaScript 程式。为了让浏览器可以在 <script> 元素执行，从 src 里 URL 回传的必须是可执行的 JavaScript。在 JSONP 的使用模式里，该 URL 回传的是由函数呼叫包起来的动态生成 JSON，这就是JSONP 的“填充(padding)”或是“前辍(prefix)”的由来。

   惯例上浏览器提供回调函数的名称当作送至服务器的请求中命名查询参数的一部份，例如：

<script type="text/javascript" src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse"> </script>

   服务器会在传给浏览器前将 JSON 数据填充到回调函数(parseResponse)中。浏览器得到的回应已不是单纯的资料叙述而是一个脚本。在本例中，浏览器得到的是：

parseResponse({"Name": "Cheeso", "Id" : 1823, "Rank": 7})

   虽然这个填充(前辍)“通常”是浏览器执行背景中定义的某个回调函数，它也可以是变量赋值、if 叙述或者是其他 JavaScript 叙述。JSONP 要求(也就是使用 JSONP 模式的请求)的回应不是 JSON 也不被当作 JSON 解析——回传内容可以是任意的运算式，甚至不需要有任何的 JSON，不过惯例上填充部份还是会触发函数调用的一小段 JavaScript 片段，而这个函数呼叫是作用在 JSON 格式的资料上的。

   另一种说法—典型的 JSONP 就是把既有的 JSON API 用函数呼叫包起来以达到跨域存取的解法。为了要启动一个 JSONP 呼叫(或者说，使用这个模式)，你需要一个 script 元素。因此，浏览器必须为每一个 JSONP 要求加(或是重用)一个新的、有所需 src 值的 <script> 元素到 HTML DOM 里—或者说是“注入”这个元素。浏览器执行该元素，抓取 src 里的 URL，并执行回传的 JSON。也因为这样，JSON 被称作是一种“让使用者利用 script 元素注入的方式绕开同源策略”的方法。

   使用远端网站的 script 标签会让远端网站得以注入任何的内容至网站里。如果远端的网站有 JavaScript 注入漏洞，原来的网站也会受到影响.现在有一个正在进行计划在定义所谓的 JSON-P 严格安全子集，使浏览器可以对 MIME 类别是“application/json-p”请求做强制处理。如果回应不能被解析为严格的 JSON-P，浏览器可以丢出一个错误或忽略整个回应。

   粗略的 JSONP 部署很容易受到跨网站的伪造要求(CSRF/XSRF)的攻击。因为 HTML <script> 标签在浏览器里不遵守同源策略，恶意网页可以要求并取得属于其他网站的 JSON 资料。当使用者正登入那个其他网站时，上述状况使得该恶意网站得以在恶意网站的环境下操作该 JSON 资料，可能泄漏使用者的密码或是其他敏感资料。

   只有在该 JSON 资料含有不该泄漏给第三方的隐密资料，且服务器仅靠浏览器的同源策略阻挡不正常要求的时候这才会是问题。若服务器自己决定要求的专有性，并只在要求正常的情况下输出资料则没有问题。只靠 Cookie 并不够决定要求是合法的，这很容易受到跨网站的伪造要求攻击。

   JSONP的客户端具体实现：

   下面来说明一下jsonp在客户端的实现：

   1、我们知道，哪怕跨域js文件中的代码(当然指符合web脚本安全策略的)，web页面也是可以无条件执行的。

   远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert(‘我是远程文件‘);

   本地服务器localserver.com下有个jsonp.html页面代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

   毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

   2、现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。

   jsonp.html页面代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert(‘我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：‘ + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

   remote.js文件代码如下：

   localHandler({“result”:”我是远程js带来的数据”});

   运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了，但是又一个问题出现了，我怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不相同啊？我们接着往下看。

   聪明的开发者很容易想到，只要服务端提供的js脚本是动态生成的就行了呗，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

   看jsonp.html页面的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert(‘你查询的航班结果是：票价 ‘ + data.price + ‘ 元，‘ + ‘余票 ‘ + data.tickets + ‘ 张。‘);
};
// 提供jsonp服务的url地址(不管是什么类型的地址，最终生成的返回值都是一段javascript代码)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement(‘script‘);
script.setAttribute(‘src‘, url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName(‘head‘)[0].appendChild(script);
</script>
</head>
<body>

</body>
</html>

   这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。

   我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。

   OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串)：

flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});

   我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

   4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。

   jQuery对JSONP的实现

   我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert(‘您查询到航班信息：票价： ‘ + json.price + ‘ 元，余票： ‘ + json.tickets + ‘ 张。‘);
},
error: function(){
alert(‘fail‘);
}
});
});
</script>
</head>
<body>
</body>
</html>

   为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时自动帮你生成回调函数并把数据取出来供success属性方法来调用。

   ajax与jsonp的异同

• ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

• 但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

• 所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

• 还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

   总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！