jQuery中Ajax+Spring MVC实现跨域请求
项目开发中,某个可独立、也可集成的子业务模块须要向外开放相关API接口,先说下项目本身使用了jersery来实现RESTful webservice以名词形式公布API。有意思的是在实际的操作中同事却通过Ajax跨域请求的方式去调用该API,先不说成功与否,这样的方式本就是“滑稽"的。和他一起探讨了此种做法的不合理性,之后选择jersey client的方式进行远程调用。只是他在跨域请求中遇到了问题,自己闲暇时间予以解决,这才是此篇文章的由来。
jQuery对跨域请求有两种解决方式各自是jQuery的jquery.ajax jsonp格式和jquery.getScript方式,并且这两种方式都仅仅支持get方法。
这里主要谈的是jsonp跨域的实现。
json格式我们倒是经常使用,可是jsonp就不那么经常使用了,所以首先须要对jsonp要有一个了解。
JSONP解释
在解释JSONP之前,我们须要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源载入的文档或脚本获取或设置还有一个源载入额文档的属性。有点绕,说的简单点就是浏览器限制脚本仅仅能和同协议、同域名、同port的脚本进行交互。
JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议。他同意服务端生成script tags返回值client,通过javascript callback的形式来实现网站訪问。JSONP是一种script tag的注入,将server返回的response加入到页面是实现特定功能。
简而言之,JSONP本身不是复杂的东西,就是通过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略。
JSONP原理及实现
接下来,来实际模拟一个跨域请求的解决方式。后端为Spring MVC架构的,前端则通过Ajax进行跨域訪问。
1、首先client须要注冊一个callback(服务端通过该callback(jsonp)能够得到js函数名(jsonpCallback))。然后以JavaScript语
法的方式,生成一个function
2、接下来,将JSON数据直接以入參的方式,放置到function中,这样就生成了一段js语法文档,返回给client。
3、最后client浏览器动态的解析script标签,并运行返回的JavaScript语法文档片段,此时数据作为參数传入到了预先定义好的
回调函数里(动态运行回调函数)。
这样的动态解析js文档和eval函数是类似的。
接下来就是怎样实现了,client代码。
$.ajax({type: "get",async: false,url: "http://localhost:8080/buy/get",dataType: "jsonp",jsonp: "callbackparam", //服务端用于接收callback调用的function名的參数 jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来 success: function(json) {alert(json[0].name);}});
注解:jsonp会创建一个查询字符串參数callback=?
,这个參数会载入请求的URL后面,服务端应当在JSON数据前加上回调函数
名,以便完毕一个JSONP请求。也就是说server端须要对返回的数据做处理,格式为例如以下形式:
jsonpCallback([{ name:"jhon"}])
接下来看server端针对上述代码的处理:
@RequestMapping("/get")public void get(HttpServletRequest req,HttpServletResponse res) {res.setContentType("text/plain");String callbackFunName =req.getParameter("callbackparam");//得到js函数名称try {res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据} catch (IOException e) {e.printStackTrace();}}
前端Ajax跨域请求触发之后,可以有效的得到JSON数据,情况例如以下:
至此,Ajax跨域请求也已经攻克了,只是还是有两点地方须要注意:
1、没有关于JSONP调用的错误处理,动态插入的脚本有效,则运行调用,无效就默默失败(无不论什么提示)。
2、JSONP被不信任的服务使用会有一定的安全隐患,不信任的服务提供的脚本可能是恶意的。
转载于:https://www.cnblogs.com/jzdwajue/p/6863194.html
jQuery中Ajax+Spring MVC实现跨域请求相关推荐
- spring MVC cors跨域实现源码解析
spring MVC cors跨域实现源码解析 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就是跨域. sp ...
- 从零开始学 Java - Spring MVC 实现跨域资源 CORS 请求
论职业的重要性 问:为什么所有家长都希望自己的孩子成为公务员? 答:体面.有权.有钱又悠闲. 问:为什么所有家长都希望自己的孩子成为律师或医生? 答:体面.有钱.有技能. 问:为什么所有家长都不怎么知 ...
- Firefox OS, 向jQuery中XMLHttpRequest构造函数中传参,实现跨域请求数据
为什么80%的码农都做不了架构师?>>> 将以下代码应用于ajax方法调用之前 $.ajaxSettings.xhr = function() {try {return new ...
- 跨域ajax post json 403,跨域请求403详解
0.环境说明 1.下文中跨域实现为服务器域名 http://yaogy.jd.com 向本地项目 leo.com 发起跨域请求,本地进行debug. 2.本地项目 Spring 版本为 4.3.0. ...
- Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题...
webservice 代码 1 /// <summary> 2 /// MESService 的摘要说明 3 /// </summary> 4 [WebService(Name ...
- Ajax调用springboot接口,Springboot解决ajax+自定义headers的跨域请求问题.pdf
Springboot解解决决ajax+自自定定义义headers的的跨跨域域请请求求问问题题 1..什什么么是是跨跨域域 由于浏览器同源策略 (同源策略,它是由Netscape提出的一 著名的安全策略 ...
- php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法 这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
- authorization 传 就跨域_headers中添加允许token,客户端跨域请求问题
定义了一个MyCrossOriginFilter.class,并在Access-Control-Allow-Headers 额外添加了允许"token",客户端ajax请求带有to ...
- Spring MVC 的跨域解决方案
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 王森 来源 | cnblogs.com/wan ...
最新文章
- foreach_and_函数
- IIS Permissions
- [转]自动驾驶基础--路径规划
- mysql id生成器自定义_MybatisPlus使用自定义Id生成器数据自动填充
- OpenJDK织机和结构化并发
- 数据结构 | B树、B+树、B*树
- 如何使用React Native样式表?
- 7-3 方格取数 (15 分)
- Mac键盘被锁的解决方法
- Alexnet输入大小227x227能否调整,kernel_size偶数有什么影响。
- Unity常用工作视图(上)(5大基本视图)
- 写好的python如何在其它电脑上运行_写人作文-写人作文300字-400字-500字
- 领英linkedin使用手册—领英好友人脉搜索方式方法
- 【自制壁纸生成器】2022新年壁纸领取,换一张手机壁纸,迎接2022叭~
- Python中的运算符与表达式 1
- linux usb gadget 日志
- streamx编译,streamx-console初始化启动踩坑
- Android 拨打电话
- 团队RESTful 风格API规范
- Codeforces 1110D Jongmah dp