浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

发布时间：2020-12-15 23:33:40 所属栏目：百科来源：网络整理

导读：JSON和JSONP JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。 JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。 JSON是一种数据格式，JSONP是一种数据调用方式。 div class

JSON和JSONP

　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。

　　JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。

　　JSON是一种数据格式，JSONP是一种数据调用方式。

<div class="codetitle"><a style="CURSOR: pointer" data="99979" class="copybut" id="copybut99979" onclick="doCopy('code99979')"> 代码如下:<div class="codebody" id="code99979">
//JSON
{
“name”: “sb”
}

代码如下:

　　出于安全考虑，脚本（AJAX）不能访问非本域的内容。但是，静态资源是不受域策略限制的，可以加载任意域的脚本、样式、图片等静态资源，JSOP就是利用这种原理来实现跨域获取数据的。

例1：

代码如下:

remote.js的内容和之前在标签里写的一样是：

1 showPrice({symbol: 'IBM',price: 91.42});

　　动态插入的JavaScript代码，将要传递的JSON数据作为参数，showPrice函数调用语句的参数。

　　那么问题来了，每次获取到数据都调用showPrice函数吗？这就需要前后端程序猿做好约定，当然这样有很多不便，尤其是对于开放接口给公众开发的情况。JSOP这样处理：支持前端传递一个回调函数名参数，后端接收回调函数名参数，然后生成对该函数的调用，将JSON数据作为参数传递，在到达客户端时将其插入页面开始执行。

例3：

　　动态插入代码，带有callback参数：

<div class="codetitle"><a style="CURSOR: pointer" data="72871" class="copybut" id="copybut72871" onclick="doCopy('code72871')"> 代码如下:

<div class="codebody" id="code72871">
<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
alert("Symbol: " + data.symbol + ",Price: " + data.price);
}
var url = “remote.js?callback='showPrice'”; // 外部脚本的URL
// 动态插入脚本
var script = document.createElement('script');
script.setAttribute('src',url);
// 加载script
document.getElementsByTagName('head')[0].appendChild(script);

后端用PHP实现的JSONP服务的代码片段：

<div class="codetitle"><a style="CURSOR: pointer" data="99575" class="copybut" id="copybut99575" onclick="doCopy('code99575')"> 代码如下:<div class="codebody" id="code99575">
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 打印: showPrice({"symbol" : "IBM","price" : "91.42"});

很好的契合了JSONP的定义，打包在函数调用中的JSON数据。

以上几个例子来自：

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup

在jQuery中使用JSONP

　　AJAX和JSONP在jQuery中的调用方式看起来极为相像，千万不要被这种现象迷惑，它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容，而JSONP是动态的添加