什么是跨域?
js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
出现跨域问题时,火狐会有提示:
已拦截跨源请求:同源策略禁止读取位于http://localhost/xxx的远程访问,(原因:CROS头缺少 'Access-Control-Allow-Origin').
使用JSONP来解决跨域问题:
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不同域的服务器交互，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
原理:
1.定义一个方法来处理返回的结果(该方法必须在script引入之前声明)
2.使用script标签去请求跨域地址的数据
3.后台需要配置返回js直译器能解析的语句,并且要带上需要返回的参数
4.使用jQuery提供的工具
JS代码:
- 普通方式
<script type="text/javascript">
function showData(data){
if(data.success){
console.log("请求成功");
}
}
</script>
<script type="text/javascript" src="http://localhost/hello?callback=showData"></script>
- jQuery方式
<script type="text/javascript">
//请求携带的参数中不用写值,jQuery会自动生成
$.getJSON("http://localhost/hello?callback=?",function(data){
console.log(data);
});
</script>
java代码:
public void service(ServletRequest req, ServletResponse res)
throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("世间若有比雷声更大的声响,唯有我熊哥大嗓门!");
String callback = req.getParameter("callback");
res.getWriter().print(callback + "({'success':true})");
}
