jsonp跨域原理解析
前言: 跨域请求是前台开发中经常遇到的场景,但是由于浏览器同源策略,导致A域下普通的http请求没法加载B域下的数据,跨域问题由此产生。但是通过script标签的方式却可以加载非同域下的js,因此可以利用这一特性,进行跨域数据请求。
先看一下跨域导致的问题,测试域分别为 localhost 和 www.icity366.com, 下文分别对应A域和B域,测试文件为A域下的 data.jsp, 我们在A(localhost)域下请求B(www.icity366.com)域下的数据,看一下data.jsp中关键代码:
$.ajax({
url : "http://www.icity366.com:8080/addresslist/test/Data.do?method=getData",
data : {callback : "getData"},
//dataType : "json",
type : "get",
success : function(data){
alert(data);
},
error : function(XmlHttpRequest,textStatus,errorThrown){
//debugger;
alert(textStatus);
}
})
结果为alert("error"),浏览器提示跨域:
利用script标签解决跨域
在data.jsp页面中定义好回调方法,
function getData(data){
alert(data.name);
}
通过script标签引用js:
<script type="text/javascript" src="http://www.icity366.com:8080/addresslist/test/Data.do?method=getData&callback=getData"></script>
服务器端java代码如下:
String callback = request.getParameter("callback");
Map<String,String> data = new HashMap<String,String>();
data.put("name", "Liyx");
data.put("age", "25");
String dataJson = JsonUtils.convertToString(data);//Map->json
response.getWriter().write(callback+"("+dataJson+")");
请求结果:
java端返回 getData({"age":"25","name":"Liyx"}),页面执行getData(),弹出 Liyx, 说明<script>标签可跨域获得数据。
JSONP方式跨域写法
json核心就是:允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。先看一下写法:
var url = "http://www.icity366.com:8080/addresslist/test/Data.do?method=getData&callback=?";
$.getJSON(url,function(data){
alert(data.name); //Liyx
})
callback=? 先传递?过去,jquery会自动生成一个全局函数来替换callback=?中的问号,看一下java端的输出,
jQuery171004718876606784761_1411549835461({"age":"25","name":"Liyx"}),长串即为生成的全局函数,该function会自动销毁,并把数据传递到回调方法中。
jsonp跨域原理解析的更多相关文章
- jsonp 跨域原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- 深入剖析jsonp跨域原理
在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...
- jsonp跨域原理
Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...
- Jsonp跨域原理及简单应用
浏览器的同源策略: 同源策略(Same Origin Policy)是一种约定,它是由Netscape提出的一个著名的安全策略,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是 ...
- javascript实现jsonp跨域问题+原理
在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...
- WebApi2 jsonp跨域问题
一:故事背景 以前在写WebApi2的时候,一直是用作前后端分离(WebApi2 +angularjs),可是最近自己在给WebApp写接口的时候遇到了很多坑,总结一下就是跨域问题.而跨域问题 ...
- JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
- 前端跨域之jsonp跨域
jsonp跨域原理 原理:因为通过script标签引入的js是不受同源策略的限制的(比如baidu.com的页面加载了google.com的js).所以我们可以通过script标签引入一个js或者一个 ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
随机推荐
- Android 翻页效果 电子书
转载请注明来自: 5进制空间-android区 相信做电子书的同学,都遇到过翻页动画的需求吧,如果你不满足与点击滑动翻页的话,这边文章应该能够帮助到你. 先上个效果图: 效果还是很不错的,不过与ibo ...
- 在Ubuntu下安装Apache
在Ubuntu下安装软件其实非常方便,Ubuntu提供了apt-get工具,可以使用该工具直接下载安装软件. 在Linux里,系统最高权限账户为root账户,而默认登录的账户并非root账户,例如不具 ...
- 找出图像I的代数中心
function centerGPos = cenP(I ) %cenP finds the core of the PSF % [row, col] = find(I > ); minRow ...
- UML统一建模语言
概述 统一建模语言(UML)是一种图形化的语言,用于软件密集系统要素的可视化.制定规范.构建对象和编写文档.UML提供了一种标准的方式来描述系统的设计图,既包括概念方面,例如业务过程和系统功能,也包括 ...
- 你今天Python了吗?(下)
在体验了wxPython的强大之后,让我们把注意力集中到Twisted上来.在C++的世界里,你会发现一个很棒的网络应用框架,那就是ACE了:在Python的地盘,Twisted则是在网络应用框架中当 ...
- 在Toast里面显示图片
关于怎么在Toast里面显示图片,首先自定义一个toast,在自定义一个布局,这个布局你想让toast显示什么样的布局就定义什么样的,然后在自定的布局中放一个ImageView,在把自己自定义 ...
- gdb 技巧
现实数组: 比如说要显示a[10]中全部的内容用 p a显示的是地址,用p *a显示的是第一个元素显示全部或某一个:p (int [10])*a或者p *a@10 如果你使用 p *a@3 或 p * ...
- 转】Maven学习总结(三)——使用Maven构建项目
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4240930.html 感谢! maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使 ...
- 软件工程个人项目--Word frequency program
(一)工程设计时间预计 1.代码编写:2小时 (1)文件夹的遍历以及筛选: (2)文件夹的读取,以及对读取字符的操作: (3)所得结果排序,以及文件输出. 2.程序调试:1小时 (1)编写数据. (2 ...
- 启动程序的同时传参给接收程序(XE8+WIN764)
相关资料: http://blog.csdn.net/yanjiaye520/article/details/7590252 注意事项: 1.ParamStr(0)是实例自己. 2.传的参数是以空格分 ...