サイレントマジョリティー
前言
今天遇到ajax跨域请求的问题,在此感谢crossoverJie的文章,帮忙下解决了该问题.同时也接触到了简书。
感觉自己应该在简书上记录下,在开发过程中的问题和经验。
什么是跨域问题？
- 只要协议、域名、端口有任何一个不同，都被当作是不同的域.。
- 只要是在不同域中是无法进行通信的。
基于以上的的出发点，我们又有跨域共享资源的需求(譬如现在流行的前后端分离之后分别部署的情况)，本文所采用的解决办法是JSONP，说到JSONP就会首先想到JSON。虽然只有一字之差但意义却完全不一样，首先科普一下JSON。
JSON
其实现在JSON已经是相当流行了，只要涉及到前后端的数据交互大都都是采用的JSON(不管是web还是android和IOS)
JSON的优点：
- 基于纯文本，跨平台传递极其简单；
-
Javascript原生支持，后台语言几乎全部支持； - 轻量级数据格式，占用字符数量极少，特别适合互联网传递；
- 可读性较强，虽然比不上
XML那么一目了然，但在合理的依次缩进之后还是很容易识别的； - 容易编写和解析，当然前提是你要知道数据结构；
JSONP
好了，终于可以谈谈JSONP了。之前说道JSONP是用来解决跨域问题的，那么他是如何解决的呢。经过我们开发界的前辈们发现，HTML中拥有SRC属性的标签都不受跨域的影响，比如<script>，<iframe>,<img>等标签。
由于JS原生支持JSON的解析，于是我们采用<script>的方式来处理跨域解析，代码如下一看就明白。
HTML
<html lang="zh">
<head>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: url,
dataType: "jsonp",
jsonp: "callback",//一般默认为:callback
jsonpCallback:"getUser",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert(json);
},
error: function(){
alert('error');
}
});
});
</script>
</head>
<body>
</body>
</html>
其中我们采用了JQuery给我封装好的函数，这样就可以自动帮我们解析了。
我们所传递的callback参数带着查询的数据又原封不动的返回给我们了，这样的话即使我们不使用JQuery给我封装好的函数，我们自定义一个和callback名称一样的函数一样是可以解析其中的数据的，只是Jquery帮我们做了而已。
Controller
@RequestMapping(value = "/test",method = { RequestMethod.GET })
@ResponseBody
public Object test(String callback, String userId) throws IOException {
//数据
User user = userService.selectById(userId);
JSONPObject jsonpObject = new JSONPObject(callback,user) ;
return jsonpObject ;
}
后端采用了jackson中的JSONPObject这个类的一个构造方法，只需要将callback字段和需要转成JSON字符串的对象放进去即可。
需要主要的是需要使用@ResponseBody注解才能成功返回。
总结
JSONP只支持GET方式的HTTP请求；
可以在 xml里配置jsonp返回，并注解方法。
还有 跨域资源共享 CORS 也可以解决跨域请求问题。
感谢
在此感谢crossoverJie作者的文章，SSM(六)跨域传输对我有很大的启发
网友评论