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"codetitle">复制代码 代码如下:
 $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({
     url: "http://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" jQuery 将自动替换 "text": 返回纯文本字符串
 
jsonp,
 
  重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback="codetitle">复制代码 代码如下:
 function success_jsonpCallback(data) { success(data); } 

以上就是本文的全部内容了,大家是否对jsonp有了细致的了解了呢。有什么疑问也请给我留言,大家共同探讨。

标签:
JSON,JSONP,jQuery

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com