在客户端使用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方法。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!