跨域取值的四种常用方法

一：再写到这三个方法之前，先说一些基本的概念：

1.同源策略：所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

2.<script>标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

3.jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

二：相对于我们功能开发常用到的三种实现方法。直接看代码：

1.基于ajax请求

$(document).ready(function() {$.ajax( {type : 'get',//注意:jsonp跨域请求是只能是get请求不能使用post请求。url : 'http://192.168.1.52:8087/OwnProject/myTest',cache : false,jsonp : "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)jsonpCallback : "person",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名dataType : 'jsonp',//dataType是指定按照JSOPN方式访问远程服务success : function(data) {// alert(data);console.log(data.name);},error : function(data) {alert('error');}});});

2.通过添加标签的方法请求数据

<script type="text/javascript">//添加标签的方法function addScriptTag(src) {var script = document.createElement('script');script.setAttribute("type", "text/javascript");script.src = src;document.body.appendChild(script);}window.onload = function() {//将自定义的回调函数名result传入callback参数中addScriptTag("http://192.168.1.52:8087/jc_screen/myTest?callback=result1");}//自定义的回调函数result1function result1(data) {console.log(data);}</script>

3.jQuery框架实现JSONP跨域请求

$.getJSON("http://192.168.1.52:8087/OwnProject/myTest?callback=?",function(data){console.log(data.name);});

好了，到这里，前三种写法对应的后台控制层是通用的，看代码（返回的数据必须是json格式的，不然js获取不到）

@RequestMapping("/myTest")public @ResponseBody String myJsp(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {     String json = "{\"name\":\"chopper\",\"sex\":\"man\"}";//这个可以根据自己的业务来获取，这里只是演示     String callback = request.getParameter("callback");     return callback + "(" + json + ")";//这样的返回格式，需要加上回调方法名    }

接下来，第四种跨域取值的方法，跟前三种都不一样，项目中应该也会经常用到，我先说一下思路：1.在MVC拦截器里边设置请求头部，每次请求的时候都会生效，这样就免除了用jsonp的方式去取值，这样设置之后，前台js的写法跟平常的写法一样。

拦截器：

@Componentpublic class JsonpInterceptor implements HandlerInterceptor{@Overridepublic void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)throws Exception {}@Overridepublic void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)throws Exception {}@Overridepublic boolean preHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2) throws Exception {arg1.addHeader("Access-Control-Allow-Origin", "*");arg1.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");         return true;}}

前台js和后台代码跟你平常的写法一样，不需再加回调函数，也不需要特殊处理。