关于ajax通过jsonp进行跨域访问的新理解
2016-07-06 22:58
260 查看
因为之前一直在做java后端的东西,没怎么接触到jquery的东西;以前也经常听到前端的同事说到跨域的问题,虽然明白是怎么一回事,但是没有具体研究过如何实现,如何通过ajax实现;最近因为工期紧张,所以我也被逼跟着做前台的东西,因为工作中遇到了跨域的问题,所以今天有时间研究一下,也有了一个新的认识
以前一直以为ajax通过sonp就可以直接解决跨域的问题,不用后台做任何的改变,没想到今天通过测试:结果完全颠覆我的理解;
如果只是通过前台,用下面的ajax语法发送一个http请求,虽然不会报以跨域不可访问的问题,但是却一直不能执行到ajax的success方法:
因为之前看到有的教程说是要同时修改后端已完成跨域的请求,遂按照教程完成后端的代码:
<span style="white-space:pre"> </span>Map params = ParamUtil.getParams(request);
List<User> user = userService.findList(params);
// 将返回值构造成callback();的形式以支持跨域访问
String jsonData = new Gson().toJson(user);
return params.get("callback").toString()+"("+jsonData+")";
通过后端的修改,ajax就可以在请求完成的时候调用success方法。就这样跨域的问题就得以解决了。
怪不得网上还有好多其他的跨域解决方案,原来jsonp跨域要同时修改后端代码(与我想象的有些许落差)
以前一直以为ajax通过sonp就可以直接解决跨域的问题,不用后台做任何的改变,没想到今天通过测试:结果完全颠覆我的理解;
如果只是通过前台,用下面的ajax语法发送一个http请求,虽然不会报以跨域不可访问的问题,但是却一直不能执行到ajax的success方法:
$.ajax({ url:'http://127.0.0.1:8080/gisms/user/findList.do', data : {'rows':10,'page':1}, dataType:'jsonp', success:function(data){ console.log(data); }, error : function(e){ console.log(e); }, complete : function(c){ console.log(c); } });
因为之前看到有的教程说是要同时修改后端已完成跨域的请求,遂按照教程完成后端的代码:
<span style="white-space:pre"> </span>Map params = ParamUtil.getParams(request);
List<User> user = userService.findList(params);
// 将返回值构造成callback();的形式以支持跨域访问
String jsonData = new Gson().toJson(user);
return params.get("callback").toString()+"("+jsonData+")";
通过后端的修改,ajax就可以在请求完成的时候调用success方法。就这样跨域的问题就得以解决了。
怪不得网上还有好多其他的跨域解决方案,原来jsonp跨域要同时修改后端代码(与我想象的有些许落差)
相关文章推荐
- 利用iframe来实现ajax文件上传
- SeaJS前段模块化编程学习2
- jsp静态包含与动态包含
- JS实现实时时间显示效果
- 使用Gson解析复杂的json数据
- js面向对象基本理解和三种创建方式
- MEAN,从MONGO DB里弄出点东东来啦,以REST风格显示JSON
- arcgisapi for javascript4.0学习笔记4.0新特性
- JS如何导出Div的内容为图片
- JavaScriptCore-b
- Javascript 身份证号验证
- 使用console调试JavaScript(一)
- KindEditor编辑器关闭过滤html,js,css标题方法
- javascript设计模式学习之九——命令模式
- 10、json for in
- seajs 前端模块化编程学习之一
- js中对象的小清新理解02
- JSP——JSTL核心标签(1)
- Javascript实现图片预加载【回调函数,多张图片】
- JS 闭包