JSON与JSONP的区别

1、先前的概念中对JSON还是比较熟悉，对 JSONP不是特别的清楚，整理完相关知识发现才豁然开朗。简单的说 JSON是一种数据交换格式，而 JSONP是一种非官方跨域数 据交互协议。JSON是Tf号|,而JSONP则是接头方式。一个是描述信息的格式，一 个是信息传递双方约定的方法。一、什么是JSONJSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript ProgrammingLanguage , Standard ECMA-262 3rd Edition - December 1999

2、的一个子集。 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 )。值的

3、有序列表(An ordered list of values )。在大部分语言中，它被理解为数组 (array )。这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这 使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。JSON具有以下这些形式：对象是一个无序的-名称/值对像合。一个对象以一 K左括号)开始，一 K右括号)数组是值(value )的有序集合。一个数组以 一口左中括号)开始，一口右中括号)结值(value )可以是双引号括起来的字符串(string )、数值(number)、true、false、null、对象(object)或者数组(array

4、)。这些结构可以嵌套。value一个字符(character )即一个单独的字符串(character string )。字符串(string )与C或者Java的字符串非常相似。数值(number )也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节空白可以加入到任何符号之间。以下描述了完整的语言JSON的优点：.基于纯文本，跨平台传递极其简单；. Javascript原生支持，后台语言几乎全部支持；.轻量级数据格式，占用字符数量极少，特别适合互联网传递；.可读性较强，虽然比不上 XML那么一目了然，但在合理的依次缩进之后还是很容易识 别的；.容易编写和解

5、析，当然前提是你要知道数据结构；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/读取

6、其中John的公司名称var johnsCompany = members1.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/读取参会者Hen

7、ry是否工程师var henryIsAnEngineer = conference.Members2.Engineer;二、什么是JSONP?JSONP (JSON with Padding )是资料格式JSON的一种依用模式II,可以让网页从别的网域要资料。由于同源策略，一般来说位于 的网页无法与不是的服务器沟通，而 HTML的script元素是一个例外。利用元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONPo用JSONP抓到的资料并不是JSON ,而是任意的JavaScript ,用JavaScript直译器执行而不是用 JSON解析器解析

8、。为了理解这种模式的原理，先想像有一个回传JSON文件的URL,而JavaScript程式可以用XMLHttpRequest 跟这个URL要资料。假设我们的 URL是http:/RetrieveUser?UserId=xxx。假设小明的 UserId 是 1823 ,且当浏览器透过 URL传小明的UserId ,也就是抓取 HYPERLINK /RetrieveUser?UserId=1823 /RetrieveUser?UserId=1823 ,得至U:Name:小明，Id : 1823, Rank: 7这个JSON资料可能是依据传过去 URL的查询参数动态产生的。这个时候，把 元素的src

9、属性设成一个回传 JSON的URL是可以想像的， 这也代表从HTML页面透过script元素抓取JSON是可能的。然而，一份JSON文件并不是一个JavaScript程式。为了让浏览器可以在 元素执行，从src里URL回传的必须是可执行的 JavaScript 。在JSONP 的使用模式里，该 URL回传的是由函数呼叫包起来的动态生成JSON ,这就是JSONP 的 充（padding ） I 或是辍（prefix ）的由来。惯例上浏览器提供回调函数的名称当作送至服务器的请求中命名查询参数的一部份， 例如： 服务器会在传给浏览器前将JSON数据填充到回调函数（parseResponse）中。浏

10、览器得到的回应已不是单纯的资料叙述而是一个脚本。在本例中，浏览器得到的是：parseResponse（Name: Cheeso, Id : 1823, Rank: 7）虽然这个填充（前辍）通常 屋浏览器执行背景中定义的某个回调函数，它也可以是变量赋值、if叙述或者是其他 JavaScript叙述。JSONP要求（也就是使用JSONP模 式的请求）的回应不是 JSON也不被当作JSON解析一一回传内容可以是任意的运算 式，甚至不需要有任何的 JSON,不过惯例上填充部份还是会触发函数调用的一小段 JavaScript片段，而这个函数呼叫是作用在JSON格式的资料上的。另一种说法一典型的JSONP

11、就是把既有的JSON API用函数呼叫包起来以达到跨域存 取的解法。为了要启动一个JSONP呼叫（或者说，使用这个模式），你需要一个script元素。因此，浏览器必须为每一个JSONP要求加（或是重用）一个新的、有所需src值的元素到HTML DOM 里一或者说是书入I这个元素。浏览器执行该元素，抓取src里的URL,并执行回传的JSON。也因为这样，JSON被称作是一种 出:使用者利用script元素注入的方式绕开同源策略I的方法。使用远端网站的script标签会让远端网站得以注入任何的内容至网站里。如果远端的 网站有JavaScript注入漏洞，原来的网站也会受到影响.现在有一个正在进行计

12、划在定义所谓的JSON-P严格安全子集，使浏览器可以对MIME类别是一application/json -p |请求做强制处理。如果回应不能被解析为严格的JSON-P ,浏览器可以丢出一个错误或忽略整个回应。粗略的JSONP部署很容易受到跨网站的伪造要求（ CSRF/XSRF ）的攻击。因为 HTML 标签在浏览器里不遵守同源策略，恶意网页可以要求并取得属于其他 网站的JSON资料。当使用者正登入那个其他网站时，上述状况使得该恶意网站得以 在恶意网站的环境下操作该 JSON资料，可能泄漏使用者的密码或是其他敏感资料。只有在该JSON资料含有不该泄漏给第三方的隐密资料，且服务器仅靠浏览器的同源

13、策略阻挡不正常要求的时候这才会是问题。若服务器自己决定要求的专有性，并只在 要求正常的情况下输出资料则没有问题。只靠 Cookie并不够决定要求是合法的，这很 容易受到跨网站的伪造要求攻击。JSONP的客户端具体实现：下面来说明一下jsonp在客户端的实现：1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。远程服务器 根目录下有个 remote.js 文件代码如下：alert（我是远程文件）；本地服务器 下有个jsonp.html 页面代码如下： 毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。2、现在我们在jsonp.html页面

14、定义一个函数，然后在远程remote.js中传入数据进行调用。jsonp.html页面代码如下：var localHandler = function(data)alert(我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：+ data.result);remote.js文件代码如下：localHandler( results是远程 js 带来的数据 II );运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了， 但是又一个问题出现了，我怎么让远程 js知道它应该调用

15、的本地函数叫什么名字呢？ 毕竟是jsonp的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不 相同啊？我们接着往下看。聪明的开发者很容易想到，只要服务端提供的js脚本是动态生成的就行了呗，这样调用者可以传一个参数过去告诉服务端俄想要一段调用XXX函数的js代码，请你返回给我II于是服务器就可以按照客户端的需求来生成js脚本并响应了。看jsonp.html页面的代码：/得到航班信息查询结果后的回调函数var flightHandler = function(data)alert,你查询的航班结果是：票价 + data.price + 元，+ 余票+ data.tickets + 张。

16、);/提供jsonp服务的url地址(不管是什么类型的地址，最终生成的返回值都是一段javascript代码)var url = HYPERLINK http:/flightQ/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler http:/flightQ/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler;/创建script标签，设置其属性var script = document.createElement(script);script.setAttribut

17、e(src, url);/把script标签加入head,此时调用开始document.getElementsByTagName(head)0.appendChild(script);这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。我们看到调用的url中传递了一个code参数，告诉服务器我要查的是 CA1998次航班 的信息，而callback参数则告诉服务器，我的本地回调函数叫做 flightHandler ,所以 请把查询结果传入这个函数中进行调用。OK,服务器很聪明，这个

18、叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串)： flightHandler( code: CA1998, price: 1780, tickets: 5 );我们看到，传递给flightHandler函数的是一个json ,它描述了航班的基本信息。运行 一下页面，成功弹出提示窗口， jsonp的执行全过程顺利完成！4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。jQuery对JSO

19、NP的实现我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变： Untitled Page jQuery(document).ready(function() $.ajax( type: get, async: false, url: HYPERLINK http:/flightQ/jsonp/flightResult.aspx?code=CA1998 http:/flightQ/jsonp/flightResult.aspx?code=CA1998, dataType: jsonp, jsonp: callback,/传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:flightHandler,/自定义的jsonp回调函数名称，默认为 jQuery自动生成的随机函数名, 也可以写?，jQuery会自动为你处理数据 success: function(