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