- JSONP原理
JSON和JSONP
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充), 我们先看下面的小例子然后再详细介绍。
同源策略
在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候"同源策略"就显得过于苛刻。
然而html中有一些元素是不存在跨域问题的如:script,iframe等元素,利用这些元素,就能很好的解决这个问题.
JSONP的实现方式
利用在页面中创建<script>节点的方法向不同域提交HTTP请求,这项技术就可以解决跨域提交Ajax请求的问题。
先看一个简单例子
现有系统example1.com有这样一个方法
<script type="text/javascript"> //通过加载example2的JS文件来达到函数调用和数据传递 <script type="text/javascript" src="http://example2.com/test.js"></script> |
example2.com的test.js内容如下
//回调函数 callback({name:"张三"}); |
以上这种方法只是一个简单实现原因的例子,现实中我们的数据和回调也不会都写死在JS中的,所以我们要想办法将这些静态的东西动态生成就可以了.只要将example1.com srcipt 地址改为一个能动态生成JS调用方法的服务地址即可.如:
<script type="text/javascript" src="http://example2.com/test.do"></script>,test.do直接返回如下
callback(数据库客户信息的JSON对象);
|
当然对<script type="text/javascript" src="http://example2.com/test.do">的调用,你也可以动态来创建script标签完成,这样就更灵活一些.
例子如下:
假若要实现一个需求,某个网站a.com上显示的客户信息来自于其它网站b.com,显然通过AJAX请求去取数据是不能做到的,因为存在同源策略.
- A网站的前台实现:
<script type="text/javascript"> //将客户信息显示在A.com的页面上...
window.onload = function(){ //添加<script>标签的方法 } </script> createScript("http://B.com/search.do?&callback=displayCustomer"); |
- B网站的后台实现:
@Controller public class JsonpRest { @RequestMapping(value = "/test.do", method = RequestMethod.GET) public @ResponseBody String list(HttpServletRequest request) { return request.getParameter("callback")+"({name:'张三',age:18})"; } } |
JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是:
1. 它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2. 没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。
- JQUERY对JSONP的支持
从JQery 1.2以后,就开始支持JSONP的调用。JQuery对前台做了很好的处理如自动生成全局回调函数等,但后台还需要开发人员自己实现.
$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){ // 业务逻辑执行代码 });
请求URL http://xxx.com/rest.do?callback=jQuery17207481773362960666_1332575486681&_=1393510789026 |
$.ajax({ jsonp : "c", //若不指定则默认为callback jsonpCallback:"test",//若不指定则Jquery自己生成随机的名称
|
JQUERY的实现原理及步骤
1. 当dataType为JSONP时,JQUERY会为用户生成一个全局函数名称为jsonpCallback参数的值,这个函数内部调用了success方法
2. 以GET方式请求目标地址,并在URL中拼接以jsonp参数值为key,以jsonpCallback值为value的参数
3. 请求返回回调函数数据
4. 触发调用全局的回调函数,在全局函数回调中调用success方法并将数据传递给success方法