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

JSON和JSONP
 
　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。
 
　　JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。
 
　　JSON是一种数据格式，JSONP是一种数据调用方式。
 
代码如下:
 //JSON
 {
 “name”: “sb”
 }

代码如下:
 //JSONP
 callback({
 “name”: “sb”
 })

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

代码如下:
 //定义shoPrice函数
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }

代码如下:
 //在Web页面中包含showPrice函数和参数
 <script type="text/javascript">
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }
 </script>
 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

　　本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
 
 例2：
 
　　第一种的函数调用完全可以写在一个js文件中放在服务器上，用script标签加载到页面，而且这个标签可以动态地创建。
 
代码如下:
 <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”; // 外部脚本的URL
 // 动态插入脚本
 var script = document.createElement('script');
 script.setAttribute('src', url);
 
 // 加载script
 document.getElementsByTagName('head')[0].appendChild(script);
 </script>

remote.js的内容和之前在标签里写的一样是：
 
 1 showPrice({symbol: 'IBM', price: 91.42});
 
　　动态插入的JavaScript代码，将要传递的JSON数据作为参数，showPrice函数调用语句的参数。
 
　　那么问题来了，每次获取到数据都调用showPrice函数吗？这就需要前后端程序猿做好约定，当然这样有很多不便，尤其是对于开放接口给公众开发的情况。JSOP这样处理：支持前端传递一个回调函数名参数，后端接收回调函数名参数，然后生成对该函数的调用，将JSON数据作为参数传递，在到达客户端时将其插入页面开始执行。