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数据作为参数传递，在到达客户端时将其插入页面开始执行。
 
例3：
 
　　动态插入代码，带有callback参数：
 

代码如下:

  <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);
  </script>

 

后端用php实现的jsonp服务的代码片段：
 

代码如下:

 $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是动态的添加<script>标签来调用服务器脚本。虽然jquery把jsonp作为ajax的一种形式进行了封装，但jsonp并不是ajax的一种形式或一种特例。
 

代码如下:

 $.ajax({
  nbsp;   url: "https://query.yahooapis.com/v1/public/yql",
     jsonpcallback: "showprice",
     jsonp: "callback",
     // tell jquery we're expecting jsonp
     datatype: "jsonp",
     data: {
         q: "select title,abstract,url from search.news where query=\"cat\"",
         format: "json"
     },
     // work with the response
     success: function( data ) {
         console.log( data ); // server response
     }
 });

 

ajax请求参数说明：

datatype  string

预期服务器返回的数据类型。如果不指定，jquery 将自动根据 http 包 mime 信息来智能判断，比如xml mime类型就被识别为xml。在1.4中，json就会生成一个javascript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 xml 文档，可用 jquery 处理。

"html": 返回纯文本 html 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 javascript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有post请求都将转为get请求。(因为将使用dom的script标签来加载)

"json": 返回 json 数据 。

"jsonp": jsonp 格式。使用 jsonp 形式调用函数时，如 "myurl?callback=?" jquery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串
 
jsonp，
 
　　重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种get或post请求url参数里的“callback”部分，例如{jsonp:'onjsonpload'}会导致“onjsonpload”传递给服务器。
 
jsonpcallback，
 
　　为jsonp指定一个回调函数名。这个值将用来取代jquery自动生成的随机函数名。这主要用来让jquery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存get请求的时候，指定这个回调函数名。但是实际使用过程中，并不用写回调函数，比如此例中的showprice，不写也不会报错，因为jquery在处理jsonp的时候，自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样：

代码如下:

 function success_jsonpcallback(data) { success(data); }