3.跨域

什么是跨域?

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})");
}