jsonp解决同源问题和java结合使用

1.概念

浏览器的“同源策略(SOP:Same Origin Policy)”。浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

     如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。可以使用script标签实现跨域,当然html中只要带有src属性的标签,如iframe、img、script都可以实现跨域。 

2. JSONP原理与实现
    首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.  
    然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。 
    最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。

具体代码操作:

1,js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
     url:  'http://192.168.3.49:8080/PORTAL/authCode' ,
     type:  'post' ,
     dataType: 'jsonp' ,
     jsonp:  "callback" ,
     data: {
         "type" : '0' ,
         "mobilePhone" : $( "#tel" ).val()
     },
     success: function (data){
         alert(data.ret)
         settime(obj);
     },
     error: function (data){
         $( '#mstr_ck' ).html( "获取验证码失败,请重试!" );
         $( "#error_ck" ).show();
     }
});

2,java代码  

1
2
3
4
5
6
7
8
9
@RequestMapping (value =  "authCode" )
@ResponseBody
public  String getMobileAuthCode( HttpServletRequest request, String callback)
         throws  Exception {
     String result =   "{'ret':'true'}" ;
     //加上返回参数
     result=callback+ "(" +result+ ")" ;
    return  result;
}

如上:前端调用结果弹出:alert('true')  

你可能感兴趣的:(java)