【转】简单的jsonp实现跨域原理
什么原因使jsonp诞生?
传说,浏览器有一个很重要的安全限制,叫做"同源策略"。同源是指,域名,协议,端口相同。举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚本的时候就会检查这个脚本是否属于百度页面,只有和百度同源的脚本才会执行,这就是同源策略。(相当于给脚本按了一个大门,只允许在大门内部活动)
但是我们在工作中有时又会需要和不同域名的网站进行交流,由于同源策略的限制,使操作变得有些困难。jsonp是目前比较主流的跨域方式。什么是jsonp呢?我们来了解一下。
jsonp和json有什么关系吗?
jsonp(JSON with Padding)和json很像,但却完全不是一回事儿。json和xml有些类似,是用于存储和表达数据的一种方式,也是javascript对象的表示。而jsonp是获取、传递数据的一种方式。打个比方,在早前的飞鸽传书,大家都知道吧?json相当于传递的书信,而jsonp是携带书信的飞鸽。这么一说,相信大家就都明白了!^_^
jsonp的原理是什么?
整体来说,jsonp实现跨域的原理是跨域的服务端把客户端所需要的数据放进客户端本地的一个js方法里,进行调用,客户端在本地的js对返回的数据进行处理。这样就实现了不同域名下的两个站点间的交流。
由于<script>标签的src可以跨域,利用这一点,就有了jsonp这种非正式传输协议。因为有可能是多个不同站点都要访问这个服务端,那么各个站点要调用的方法可能是各不相同的,如果把方法名写死的话,就会很不和谐。所以解决的办法是各个站点来访问服务端时,在url中带一个参数(callback)过来,服务端获取到这个参数,就会在生成js代码时,以这个callback参数作为方法名,再把数据放到这个方法里。这样各个站点就可以调用各自的方法了。这也是jsonp的一个要点。
jsonp实现方式
写一个模拟jsonp原理的一个简单的例子
本地客户端:
<script type="text/javascript" src="http://example.com/Index.aspx?callback=Hello"></script>
本地回调函数
function Hello(data){ alert(data.result); }
跨域服务端:
protected void Page_Load(object sender, EventArgs e) { string callback=Request.QueryString["callback"];//获取客户端回调函数名,值为"Hello" Response.Write(callback+"({result:1})"); //调用客户端指定函数,并把数据传进去 }
- 推荐文章
- js 拖拽实现
- js 文字预写匹配
- js获取编辑框游标的位置
- js 监控浏览器关闭事件
- js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)
- js实现tooltip动态提示效果(文字版)
- artTemplate模板
- 即时通讯-腾讯云
- taro新体验
- video 无法自动播放的问题
- 直播+第三方平台
- element ui 表格表头纵向显示
- input file 调用摄像头,ios和Android的兼容性解决
- a标签属性href中的tel及mailto用处
- 关于type="file"的input框样式修改
- 利用sheet.js解析excel文件
- background-attachment:fixed;在iphone上失效的问题
- 一行代码解决各种IE的兼容问题
- Linux菜鸟简单命令
- JQuery和html+css实现带小圆点和左右按钮的轮播图
- JS原生带小白点轮播图
- JS原生轮播图
- Vue.js小案例(2)
- Vue.js小案例(1)
- Vuejs入门级简单实例
- Vue.js简单入门
- 微信登录oauth2.0
- PHP四维数组、三维数组封装遍历
- 常用linux命令30个
- 好架构是进化来的,不是设计来的