JSONP原理

 
JSON和JSONP
 
  JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。
 
  JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。
 
  JSON是一种数据格式,JSONP是一种数据调用方式。
 
复制代码
1 //JSON
3 {
5 “name”: “sb”
7 }
复制代码
复制代码
1 //JSONP
3 callback({
5 “name”: “sb”
7 })
复制代码
  出于安全考虑,脚本(AJAX)不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。
 
例1:
 
1 //定义shoPrice函数
2 function showPrice(data) {
3     alert("Symbol: " + data.symbol + ", Price: " + data.price);
4 }
复制代码
1 //在Web页面中包含showPrice函数和参数
2 <script type="text/javascript">
3 function showPrice(data) {
4     alert("Symbol: " + data.symbol + ", Price: " + data.price);
5 }
6 </script>
7 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>
复制代码
  本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
 
 例2:
 
  第一种的函数调用完全可以写在一个js文件中放在服务器上,用script标签加载到页面,而且这个标签可以动态地创建。
 
复制代码
 1 <script type="text/javascript">
 2 // This is our function to be called with JSON data
 3 function showPrice(data) {
 4     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 5 }
 6 
 7 var url = “remote.js”; // 外部脚本的URL
 8 // 动态插入脚本
 9 var script = document.createElement('script');
10 script.setAttribute('src', url);
11 
12 // 加载script
13 document.getElementsByTagName('head')[0].appendChild(script); 
14 </script>
复制代码
remote.js的内容和之前在标签里写的一样是:
 
 1 showPrice({symbol: 'IBM', price: 91.42}); 
 
  动态插入的JavaScript代码,将要传递的JSON数据作为参数,showPrice函数调用语句的参数。
 
  那么问题来了,每次获取到数据都调用showPrice函数吗?这就需要前后端程序猿做好约定,当然这样有很多不便,尤其是对于开放接口给公众开发的情况。JSOP这样处理:支持前端传递一个回调函数名参数,后端接收回调函数名参数,然后生成对该函数的调用,将JSON数据作为参数传递,在到达客户端时将其插入页面开始执行。
 
 
 
例3:
 
  动态插入代码,带有callback参数:
 
复制代码
 1  <script type="text/javascript">
 2  // This is our function to be called with JSON data
 3  function showPrice(data) {
 4      alert("Symbol: " + data.symbol + ", Price: " + data.price);
 5  }
 6   
 7 var url = “remote.js?callback='showPrice'”; // 外部脚本的URL
 8 
 9 // 动态插入脚本
10 var script = document.createElement('script');
11 script.setAttribute('src', url);
12  
13 // 加载script
14 document.getElementsByTagName('head')[0].appendChild(script); 
15  </script>
复制代码
后端用PHP实现的JSONP服务的代码片段:
 
1 $jsonData = getDataAsJson($_GET['symbol']);
2 echo $_GET['callback'] . '(' . $jsonData . ');';
3 // 打印: 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的一种形式或一种特例。
 
复制代码
 1 
 2 $.ajax({
 3     url: "http://query.yahooapis.com/v1/public/yql",
 4  
 5     jsonpCallback: "showPrice",
 6     jsonp: "callback",
 7  
 8     // tell jQuery we're expecting JSONP
 9     dataType: "jsonp",
10  
11     
12     data: {
13         q: "select title,abstract,url from search.news where query=\"cat\"",
14         format: "json"
15     },
16  
17     // work with the response
18     success: function( data ) {
19         console.log( data ); // server response
20     }
21 });
复制代码
参数解释:
 
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); }         

JSONP原理及jQuery中的使用的更多相关文章

  1. Ajax跨域原理及JQuery中的实现

    浅析Ajax跨域原理及JQuery中的实现分析   AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...

  2. 浅析Ajax跨域原理及JQuery中的实现分析

    AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

  3. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  4. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  5. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  6. jQuery中jsonp函数实现

    由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...

  7. jquery中使用jsonp

    1 .关于jsonp的原理等,请看下面的文章,说的很明白. http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery. ...

  8. jquery中on/delegate的原理

    jquery中on/delegate的原理 早期版本中叫delegate, 后来有过live函数,再后来统一用on.下面的方法等效: // jQuery 1.3 $(selector).(events ...

  9. jquery中链式调用原理

    (1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...

随机推荐

  1. [svc]linux性能监控

    参考 w - Show who is logged on and what they are doing. [root@n1 ~]# w # w - Show who is logged on and ...

  2. [svc]高并发场景 LVS DR +KeepAlive高可用实现及ka的persistence_timeout参数

    LVS-DR+keepalived模式是一种非常经典的常用生产组合 高可用场景及LVS架构 一般都用一(负载)拖多(Server Array)方式 使用LVS架设的服务器集群系统有三个部分组成: (1 ...

  3. C#中计算时间差

    问题: startTime = DateTime.Now;            -----------slExecutedTime.Text = (DateTime.Now - startTime) ...

  4. 【Unity】2.9 光源(Lights)

    分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 光源 (Lights) 是每个场景的重要组成部分.网格和纹理决定了场景的形状和外观,而光源则决定了三维环境的颜色和氛围. ...

  5. ExtJs--05--给window组件加入功能条以及子组件获取上级或下级组件的属性和方法

    Ext.onReady(function(){ /** 1-- 给容器组件加入控制条 及 控制项 控制条 不同的方向有多种 tbar lbar rbar bbar fbar 2-- 依据组件本身拿到上 ...

  6. LeetCode——4Sum &amp; 总结

    LeetCode--4Sum & 总结 前言 有人对 Leetcode 上 2Sum,3Sum,4Sum,K Sum问题作了总结: http://blog.csdn.net/nanjunxia ...

  7. HTML5学习笔记(二十六):JavaScript的错误处理

    错误相关的调试和处理在开发中是特别重要的一种技能. try-catch 我们来看下面的情况: // noneFunc 这个方法并不存在 window.noneFunc(); // js 报错后终止运行 ...

  8. Java 虚拟机类加载器

    虚拟机设计团队把类加载阶段张的”通过一个类的全限定名来获取此类的二进制字节流”这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代码模块称为”类加载器”. ...

  9. 采用Oracle的dbms_obfuscation_toolkit的加密

    create or replace function MD5 (vpassword in varchar2) return varchar2 is retval varchar2(32); begin ...

  10. ARKit从入门到精通(2)-ARKit工作原理及流程介绍

    转载:http://blog.csdn.net/u013263917/article/details/73038519 1.1-写在前面的话 1.2-ARKit与SceneKit的关系 1.3-ARK ...