jsonp
跨域
域名或者端口不同的请求称为跨域,ajax请求默认不允许跨域,但是引入js文件允许跨域
如何解决ajax请求跨域问题
设有manage_taotao和web_taotao两个项目,已设置本地域名,要在web的项目中跨域请求manage中的地址。在b.htm文件中
<script type="text/javascript"> function fun(msg){ console.log(msg) } </script> <script type="text/javascript" src="http://manage.taotao.com/rest/a/origin?callback=fun"></script>
而在manage项目中controller层
@Controller public class AController { @RequestMapping("a/origin") @ResponseBody public String origin(String callback) throws JsonProcessingException { ObjectMapper mapper=new ObjectMapper(); Map<String, Object> map=new HashMap<String, Object>(); map.put("妈妈", "she"); map.put("age", 50); String m = mapper.writeValueAsString(map); return callback+"("+m+")"; } }
引入的js文件能直接接收路径返回的值,本来是json字符串,但b.htm不能直接解析该字符串,所以将该json字符串用 方法名() 的形式包围,在解析时提前定义方法,就可以在控制台打印该字符串
尝试:在web项目引入manage项目中的js文件,再由该文件调用请求行吗?
<script type="text/javascript" src="http://manage.taotao.com/js/testOrigin.js"></script> <script type="text/javascript"> alert(test()) </script>
manage项目中有该js
;!function(global){ function test(){ $.ajax({ url:"http://manage.taotao.com/rest/a/origin", success:function(data){ return data } }) } global.test=test }(this)
测试后,仍然出现ajax跨域请求问题,将js的路径改为工程下的绝对路径,发现访问的是web项目下的地址,说明manage项目中的该js被加载到了web项目服务中,这样访问本质上和直接访问没有什么区别。
jsonp
1.通过script标签可以跨域请求的特性,加载资源
2.将加载的资源(通过一个方法名将数据包裹)当作是js脚本解析
3.定义一个回调函数,获取传入的数据
jquery中封装了jsonp技术。在b.htm中写
<script type="text/javascript"> $.ajax({ url:"http://manage.taotao.com/rest/a/origin", dataType:"jsonp", success:function(msg){ console.log(msg) } }) </script>
controller不变,可以获得结果