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

Json 前端之家
前端之家收集整理的这篇文章主要介绍了跨域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中：

@H_403_66@
[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);
  7. //回调函数
  8. functioncallbackfunction(data){
  9. varhtml=JSON.stringify(data.RESULTSET);
  10. alert(html);
  11. }



服务器代码Action：
后台返回的json外面需要由回调函数包裹。具体的方法如下：
@H_403_66@
[html] view plain copy
  1. publicclassTestJsonextendsActionSupport{
  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",85); line-height:18px"> paramMap.put("bank_status",0);
  14. paramMap.put("en_sign_ways",1);
  15. list.add(paramMap);
  16. }
  17. JSONArrayrows=JSONArray.fromObject(list);
  18. jsonObject.put("RESULTSET",rows);
  19. HttpServletRequestrequest=ServletActionContext.getRequest();
  20. HttpServletResponseresponse=ServletActionContext.getResponse();
  21. response.setContentType("text/javascript");
  23. booleanjsonP=false;
  24. Stringcb=request.getParameter("jsonp");
  25. if(cb!=null){
  26. jsonP=true;
  27. System.out.println("jsonp");
  28. }else{
  29. System.out.println("json");
  30. response.setContentType("application/x-json");
  31. }
  32. response.setCharacterEncoding("UTF-8");
  33. Writerout=response.getWriter();
  34. if(jsonP){
  35. out.write(cb+"("+jsonObject.toString()+")");
  36. System.out.println(jsonObject.toString());
  37. else{
  38. out.write(jsonObject.toString());
  39. }catch(Exceptione){
  40. e.printStackTrace();
  41. returnnull;
  42. }
JQUERY实现JSONP代码。
Jquery从1.2版本开始也支持JSONP的实现。
@H_403_66@
[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代码。
@H_403_66@
[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. }
  11. });
注意：这种形式，默认的参数是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相关文章

jsonp
　　jsonp需要在页面中添加一个<script>元素，由该元素来从其他服务器加载json数据。...
jsonp跨域
<script> var testApi = "地址"; $.ajax({ url:testApi,//可以不是本地域名...
MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题，然后有个jsonp的解决方案，MVC中代码如下： public class JsonpR...
fastjson反序列化json对象时保留null值的key
最近开发中遇到调用第三方web_api的功能，后端在处理json数据时使用fastjson来做反序列化，...
JsonCpp 的使用
JSON全称为JavaScript ObjectNotation，它是一种轻量级的数据交换格式，易于阅读、编写、解...
jsonp
var newScript = document.createElement(‘script‘); newScript.setAtt...
jsonp 跨域
$.ajax({ url:"http://192.168.100.47:8080/ais-connect/data/newai...
JSONArray 去重
前台说 只能传给我这样的数据 [     {         "labelName":"皮肤颜...
FastJson的坑
1.list中放入同一个对象，会出现内存地址引用{"$ref":"#[0]"}，后台可以识...
fastJson转换对象与字符串
static class TempClass{ private String name; private int age; public String getName(...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作