跨域JSONP原理及调用具体示例
发布时间：2020-12-16 19:43:15 所属栏目：百科 来源：网络整理
导读：上篇博客介绍了同源策略和跨域访问概念，其中提到跨域常用的基本方式：JSONP和CORS。 那这篇博客就介绍JSONP方式。 JSONP原理 在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过
|
上篇博客介绍了同源策略和跨域访问概念，其中提到跨域常用的基本方式：JSONP和CORS。
那这篇博客就介绍JSONP方式。
JSONP原理
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。
而JSONP就是通过script节点src调用跨域的请求。
当我们通过JSONP模式请求跨域资源时，服务器返回给客户端一段javascript代码，这段javascript代码自动调用客户端回调函数。
举个例子
客户端http://localhost:8080访问服务器http://localhost:22222/user，正常情况下，这是不允许的。因为这两个URL是不同域的。
若我们使用JSONP格式发送请求的话？
http://localhost:22222/user?callback=callbackfunction
则服务器返回的数据如下：
callbackfunction({"id":1,"name":"test"})
仔细看看服务器返回的数据，其实就是一段javascript代码，这就是函数名（参数）格式。
服务器返回后，则自动执行callbackfunction函数。
因此，客户端需要callbackfunction函数，以便使用JSONP模式返回javascript代码后自动执行其回调函数。
注意：其中url地址中的callback和callbackfunction是随意命名的。
具体的JS实现JSONP代码。
JS中：
<script>
var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";
var script = document.createElement('script');
script.setAttribute('src',url); //load javascript
document.getElementsByTagName('head')[0].appendChild(script);
//回调函数
function callbackfunction(data){
var html=JSON.stringify(data.RESULTSET);
alert(html);
}
</script>
服务器代码Action：
后台返回的json外面需要由回调函数包裹。具体的方法如下：
public class TestJson extends ActionSupport{
@Override
public String execute() throws Exception {
try {
JSONObject jsonObject=new JSONObject();
List list=new ArrayList();
for(int i=0;i<4;i++){
Map paramMap=new HashMap();
paramMap.put("bank_no",100+i);
paramMap.put("money_type",i);
paramMap.put("bank_name",i);
paramMap.put("bank_type",i);
paramMap.put("bank_status",0);
paramMap.put("en_sign_ways",1);
list.add(paramMap);
}
JSONArray rows=JSONArray.fromObject(list);
jsonObject.put("RESULTSET",rows);
HttpServletRequest request=ServletActionContext.getRequest();
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/javascript");
boolean jsonP = false;
String cb = request.getParameter("jsonp");
if (cb != null) {
jsonP = true;
System.out.println("jsonp");
response.setContentType("text/javascript");
} else {
System.out.println("json");
response.setContentType("application/x-json");
}
response.setCharacterEncoding("UTF-8");
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "("+jsonObject.toString()+")");
System.out.println(jsonObject.toString());
}
else{
out.write(jsonObject.toString());
System.out.println(jsonObject.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
JQUERY实现JSONP代码。
Jquery从1.2版本开始也支持JSONP的实现。
$(function(){
jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
{
var html=JSON.stringify(data.RESULTSET);
$("#testjsonp").html(html);
}
);
});
第一个？代表后面是参数，与咱们一般调用一样。重要的是第二个？，则是jquery动态给你生成毁掉函数名称。
至于后台代码和上述一致，使用同一个后台。
JQUERY中Ajax实现JSONP代码。
$.ajax({
type:"GET",async :false,url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",dataType:"jsonp",success:function(data){
var html=JSON.stringify(data.RESULTSET);
$("#testjsonp").html(html);
},error:function(){
alert("error");
}
});
注意：这种形式，默认的参数是callback，而不是会是其他。则action代码中获取calback值则
String cb=request.getParameter("callback");
并且生成的回调函数，默认也是类似上述一大串数字。
根据Ajax手册，更改callback名称以及回调函数名称。
http://www.w3school.com.cn/jquery/ajax_ajax.asp
jsonp:jsonp,则请求的地址为：
http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=自动生成回调函数名
jsonpCallback:callbackfunction,则请求的地址为：
http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction
最后返回前台的是：
callbackfunction(具体的json值)
其中上述JS实现JSONP代码中，若不是动态拼接script脚本，而是直接写script标签，类似如下：
<script type="text/javascript" src=""></script>
若这样写的话，通过debug发现，的确正确返回了，但是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都测试】
若要通过JS来显示，则通过代码动态create script标签。
JSONP跨域方式，很方便，同时也支持大多部分浏览器，但是唯一缺点是，只支持GET提交方式，不支持其他POST提交。
若url地址传输的参数过多，如何实现呢？下篇博客会讲解另一种跨域方案CROS原理以及具体调用示例。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |