跨域JSONP原理及调用具体示例

前端之家收集整理的这篇文章主要介绍了跨域JSONP原理及调用具体示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS。
那这篇博客就介绍JSONP方式。
JSONP原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。
而JSONP就是通过script节点src调用跨域的请求。
当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客户端回调函数
举个例子
客户端http://localhost:8080访问服务器http://localhost:11111/user,正常情况下,这是不允许的。因为这两个URL是不同域的。
若我们使用JSONP格式发送请求的话?
http://localhost:11111/user?callback=callbackfunction
则服务器返回的数据如下:
callbackfunction({"id":1,"name":"test"})
仔细看看服务器返回的数据,其实就是一段javascript代码,这就是函数名(参数)格式。
服务器返回后,则自动执行callbackfunction函数
因此,客户端需要callbackfunction函数,以便使用JSONP模式返回javascript代码自动执行其回调函数

注意:其中URL地址中的callback和callbackfunction是随意命名的。
具体的JS实现JSONP代码

JS中:

[html] view plain copy
  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. functioncallbackfunction(data){
  8. varhtml=JSON.stringify(data.RESULTSET);
  9. alert(html);
  10. }



服务器代码Action:
后台返回的json外面需要由回调函数包裹。具体的方法如下:
[html] view plain copy
  1. publicclassTestJsonextendsActionSupport{
  2. @Override
  3. publicStringexecute()throwsException{
  4. try{
  5. JSONObjectjsonObject=newJSONObject();
  6. Listlist=newArrayList();
  7. for(inti=0;i<4;i++){
  8. MapparamMap=newHashMap();
  9. paramMap.put("bank_no",100+i);
  10. paramMap.put("money_type",i);
  11. paramMap.put("bank_name",i);
  12. paramMap.put("bank_type",85); line-height:18px"> paramMap.put("bank_status",0);
  13. paramMap.put("en_sign_ways",1);
  14. list.add(paramMap);
  15. }
  16. JSONArrayrows=JSONArray.fromObject(list);
  17. jsonObject.put("RESULTSET",rows);
  18. HttpServletRequestrequest=ServletActionContext.getRequest();
  19. HttpServletResponseresponse=ServletActionContext.getResponse();
  20. response.setContentType("text/javascript");
  21. booleanjsonP=false;
  22. Stringcb=request.getParameter("jsonp");
  23. if(cb!=null){
  24. jsonP=true;
  25. System.out.println("jsonp");
  26. }else{
  27. System.out.println("json");
  28. response.setContentType("application/x-json");
  29. }
  30. response.setCharacterEncoding("UTF-8");
  31. Writerout=response.getWriter();
  32. if(jsonP){
  33. out.write(cb+"("+jsonObject.toString()+")");
  34. System.out.println(jsonObject.toString());
  35. else{
  36. out.write(jsonObject.toString());
  37. }catch(Exceptione){
  38. e.printStackTrace();
  39. returnnull;
  40. }
JQUERY实现JSONP代码
Jquery从1.2版本开始也支持JSONP的实现。
[html] view plain copy
  1. $(function(){
  2. jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
  3. {
  4. varhtml=JSON.stringify(data.RESULTSET);
  5. $("#testjsonp").html(html);
  6. }
  7. );
  8. });
第一个?代表后面是参数,与咱们一般调用一样。重要的是第二个?,则是jquery动态给你生成毁掉函数名称

至于后台代码和上述一致,使用同一个后台

JQUERY中Ajax实现JSONP代码
[html] view plain copy
  1. $.ajax({
  2. type:"GET",
  3. async:false,
  4. url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",226); color:inherit; line-height:18px"> dataType:"jsonp",85); line-height:18px"> success:function(data){
  5. varhtml=JSON.stringify(data.RESULTSET);
  6. $("#testjsonp").html(html);
  7. },85); line-height:18px"> error:function(){
  8. alert("error");
  9. }
  10. });
注意:这种形式,默认的参数是callback,而不是会是其他。则action代码获取calback值则
String cb=request.getParameter("callback");
并且生成的回调函数,默认也是类似上述一大串数字。
根据Ajax手册,更改callback名称以及回调函数名称
http://www.w3school.com.cn/jquery/ajax_ajax.asp
jsonpCallback:callbackfunction,则请求的地址为:
最后返回前台的是:
callbackfunction(具体的json值)

其中上述JS实现JSONP代码中,若不是动态拼接script脚本,而是直接写script标签,类似如下:
<script type="text/javascript" src=""></script>
若这样写的话,通过debug发现,的确正确返回了,但是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都测试】
若要通过JS来显示,则通过代码动态create script标签

JSONP跨域方式,很方便,同时也支持大多部分浏览器,但是唯一缺点是,只支持GET提交方式,不支持其他POST提交。
URL地址传输的参数过多,如何实现呢?下篇博客会讲解另一种跨域方案CROS原理以及具体调用示例。

本文转载自:http://blog.csdn.net/yuebinghaoyuan/article/details/32706277

实际应用:上面说了那么多在实践中问题出在总是获取不到返回值,实际上后台默认传入callback参数,此值为jQuery加上一串数字组成,将这个参数与要传回的json串拼成:callback +"("+json+")"形式返回,这样前台就不会报错。后台返回类型设置为text/html;charset=UTF-8即可。特此记录

猜你在找的Json相关文章