在客户端使用JSONP做跨域请求

前端之家收集整理的这篇文章主要介绍了在客户端使用JSONP做跨域请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在javascript/ajax中,由于安全原因,请求都是是遵循“同源策略”的,即不能请求其他域名内(任何其他二级以下域名或其他端口)的资源。但<script>的src属性可以指定为其他域的文件!!所谓jsonp就是跨域问题的一种掉渣的解决方案,原理正是利用script的这一特性。

首先,在客户端页面(domain1/jsonp.html)定义一个callback方法

<script type="text/javascript">
function callback(data){
if (data.successful){
alert("成功,结果:"+data.value);
}else{
alert("失败");
}
}
</script>


其次,在DOM创建一个script节点,指定URL就可以

var url = "http://10.46.168.39:8080/http/gateway.htm?serviceId=in_http_gw_config&clientId=app_test&jsonp=callback";
var script = document.createElement('script');
script.setAttribute('src',url);
document.getElementsByTagName('HEAD')[0].appendChild(script);

当然,下面这样会更简单一点:

<script type="text/javascript" src="http://10.46.168.39:8080/http/gateway.htm?serviceId=in_http_gw_config&clientId=app_test&jsonp=callback"></script>


最后,在服务端的Servlet:http://10.46.168.39:8080/http/gateway.htm只要输出一行js语句就可以

String jsonp = req.getParameter("jsonp");
if (!StringUtils.isEmpty(jsonp)){
out.print(jsonp+"("+responseText+");");

}

==========================================

本来这样就够简单了,但jQuery比较多事,闲得无聊它也实现jsonp的功能。那么,只要将第二步改一下就可以:

<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:'http://10.46.168.39:8080/cxf/http/gateway.htm?serviceId=in_http_gw_config&clientId=app_test&jsonp=callback',
dataType:"jsonp",
//jsonp:"jsonp",
//jsonpCallback:"callback",
success:function(data){
alert('success'+data.value.value);
}
});
});
</script>

注:如果在url中增加 &jsonp=callback,本人测试发现success函数不会执行。如果url不包含参数“jsonp”,那么请利用jquery的其他两个参数:jsonp:参数名,jsonpCallback:参数值,这种做法最后可以执行success方法

猜你在找的Json相关文章