脱离jsonp,如何跨域读取、提交数据
1、JSONP
刚接触javascript,跨域首先想到的就是JSOP,接而,用到的,就是jQuery的getJSON方法。
JSONP的原理很简单: a、浏览器的安全策略,导致了javascript不能垮域名读取数据,就算是父子域也不行。 但是,跨域读取脚本,是个例外。 b、动态生成一个scrip标签,把src设为后端借口地址,后端将数据,封装返回成javascript函数。 前端即可在脚本加载完后,执行后端的脚本。
可能说得有点抽象,看个例子吧: 后端代码:
public String getAction(){ int i = 10; return "jsonp1({value:"+ i +"})"; } 假如,http://xxx.csdn.com/get.action访问的是上述代码 那前端,只要这么做,就能拿到后端 “i” 的值。 前端代码:
<!-- 预先定义jsonp1函数 --> <script> function jsonp1(data){ alert(data.value); } </script> <!-- 等下面脚本加载完成,即会执行jsonp1函数 --> <script src="http://xxx.csdn.com/get.action"></script> 应该不难理解,为什么前端能执行 jsonp1 函数吧? 因为浏览器吧 http://xxx.csdn.com/get.action 返回的字符串,当作了可执行的脚本 --------> jsonp1({value: 1}) ; SO~
2、脱离JSONPjsonp读取数据时,非常好用,而且,经过了jQuery的封装, 只要遮样子: $.getJSON("你的连接" + “?callback=?”,params,callback) jQuery就会默认使用<script>方式,加载数据(当然,前提是你的后端哥们,有对callback参数进行处理啦~~
但是,JSONP不是万能的。 a、script加载,实际是get请求,对于保密要求高的数据,不适用 b、虽然说,get请求木有限制提交字符的长度,但是,浏览器的输入栏,是有长度限制的。SO,太大的数据,无法提交 综合来说,JSONP适用于查询数据,或者提交不怎么重要的数据。
那大数据的提交,该何去何从呢?下面,针对兄弟域间数据提交,进行讨论
首先,学习兄弟域数据交互前,要了解几个知识点: A、document.domain
(我一般会给iframe的代理页面,引入jQuery)
随手找了个两年前的代码,希望帮到各位鞋童:
/** * create by: da宗熊 * create time: 2012-12-25 * e-mail: 384858402@qq.com * example: var cross = MakeCross({自己的配置}); cross.post(url,param,callback); **/ if(!window.MakeCross){ function MakeCross(p){ var CrossMethod = { CrossUrl:"http://my.test.com/common/cross-domain.jsp",// 代理页面的地址,我会在代理页面加入jQuery和document.domain Frame:"<iframe id='$0' src='$1' style='visibility:hidden;height:0;width:0;overflow:hidden;border:none;'></iframe>",FrameId :"myCrossFrame_" + MakeLog.frameId++,Domain :"test.com",InitSymbol : "hasInit" // 标志 iframe 是否加载完毕 },that = $.extend(CrossMethod,p); // 覆盖默认值 document.domain = that.Domain; // 加载跨域用的 iframe function init(){ if(!$("#"+that.FrameId).length>0){ $("body").append(that.Frame.replace("$0",that.FrameId).replace("$1",that.CrossUrl)); } } // 获取 iframe 的contentWindow function GetCrossWindow(){ var win = $("#"+that.FrameId)[0].contentWindow||document.getElementById(that.FrameId).contentWindow; return win; } that.CrossWindow = GetCrossWindow; that.init = function(cb){ init(); if($("#"+that.FrameId).length>0){ var f = $("#"+that.FrameId); f.load(function(){ cb?cb():function(){}; $("#"+that.FrameId).attr(that.InitSymbol,"true"); that.init = null; }); } } // 封装jQuery的post和get方法 that.post = function(a,b,c,d){ return !$("#"+that.FrameId).attr(that.InitSymbol) ? that.init(function(){GetCrossWindow().$.post(a,d)}) : GetCrossWindow().$.post(a,d); } that.get = function(a,d){ return !$("#"+that.FrameId).attr(that.InitSymbol) ? that.init(function(){GetCrossWindow().$.get(a,d)}) : GetCrossWindow().$.get(a,d); } that.win = GetCrossWindow; return that; }; MakeCross.frameId = 1; }; // 多年前写的,优化什么的,就懒得管了 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |