跨域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中： [html]viewplaincopy 1.<script> 2.varurl="http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction"; 3.varscript=document.createElement('script'); 4.script.setAttribute('src',url);//loadjavascript 5.document.getElementsByTagName('head')[0].appendChild(script); 6. 7.//回调函数 8.functioncallbackfunction(data){ 9.varhtml=JSON.stringify(data.RESULTSET); 10.alert(html); 11.}
服务器代码Action： 后台返回的json外面需要由回调函数包裹。具体的方法如下： copy 1.publicclassTestJsonextendsActionSupport{ 2. 3.@Override 4.publicStringexecute()throwsException{ 5.try{ 6.JSONObjectjsonObject=newJSONObject(); 7.Listlist=newArrayList(); 8.for(inti=0;i<4;i++){ 9.MapparamMap=newHashMap(); 10.paramMap.put("bank_no",100+i); 11.paramMap.put("money_type",i); 12.paramMap.put("bank_name",i); 13.paramMap.put("bank_type",i); 14.paramMap.put("bank_status",0); 15.paramMap.put("en_sign_ways",1); 16.list.add(paramMap); 17.} 18.JSONArrayrows=JSONArray.fromObject(list); 19.jsonObject.put("RESULTSET",rows); 20.HttpServletRequestrequest=ServletActionContext.getRequest(); 21.HttpServletResponseresponse=ServletActionContext.getResponse(); 22.response.setContentType("text/javascript"); 23. 24. 25.booleanjsonP=false; 26.Stringcb=request.getParameter("jsonp"); 27.if(cb!=null){ 28.true; 29.System.out.println("jsonp"); 30.response.setContentType("text/javascript"); 31.}else{ 32.System.out.println("json"); 33.response.setContentType("application/x-json"); 34.} 35.response.setCharacterEncoding("UTF-8"); 36.Writerout=response.getWriter(); 37.if(jsonP){ 38.out.write(cb+"("+jsonObject.toString()+")"); 39.System.out.println(jsonObject.toString()); 40.} 41.else{ 42.out.write(jsonObject.toString()); 43.System.out.println(jsonObject.toString()); 44.} 45.}catch(Exceptione){ 46.e.printStackTrace(); 47.} 48. 49.returnnull; 50.} 51.} JQUERY实现JSONP代码。 Jquery从1.2版本开始也支持JSONP的实现。 copy 1.$(function(){ 2.jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data) 3.{ 4.varJSON.stringify(data.RESULTSET); 5.$("#testjsonp").html(html); 6.} 7.); 8.}); 第一个？代表后面是参数，与咱们一般调用一样。重要的是第二个？，则是jquery动态给你生成毁掉函数名称。 至于后台代码和上述一致，使用同一个后台。 JQUERY中Ajax实现JSONP代码。 copy 1.$.ajax({ 2.type:"GET", 3.async:false, 4.url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do", 5.dataType:"jsonp", 6.success:function(data){ 7.varJSON.stringify(data.RESULTSET); 8.$("#testjsonp").html(html); 9.}, 10.error:function(){ 11.alert("error"); 12.} 13. 14.}); 注意：这种形式，默认的参数是callback，而不是会是其他。则action代码中获取calback值则 Stringcb=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标签，类似如下： <scripttype="text/javascript"src=""></script> 若这样写的话，通过debug发现，的确正确返回了，但是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都测试】 若要通过JS来显示，则通过代码动态createscript标签。 JSONP跨域方式，很方便，同时也支持大多部分浏览器，但是唯一缺点是，只支持GET提交方式，不支持其他POST提交。 若url地址传输的参数过多，如何实现呢？下篇博客会讲解另一种跨域方案CROS原理以及具体调用示例。 本文转载自：http://blog.csdn.net/yuebinghaoyuan/article/details/32706277 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |