解决４０３跨域问题之——————ＪＳＯＮＰ

最新推荐文章于 2023-12-30 14:28:38 发布

weixin_34010949

最新推荐文章于 2023-12-30 14:28:38 发布

阅读量873

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/hccake/blog/886585

版权

为什么80%的码农都做不了架构师？>>>

JSONP 原理其实是利用利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。（解释摘录自知乎，作者：贺师俊）

jquery支持jsonp 在ajax请求时只需将dataType 修改为 ‘JSONP’ 就可以实现Jsonp跨域请求

$.ajax({
        url: "http://.......",
        type: 'GET',
        dataType: 'JSONP',//标识此为JSONP请求
        jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
        jsonpCallbackString:"callbackFunction",//用于代替jquery自动生成的函数名
        success: function (data) {
        }
    });

其中 jsonp 属性

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

jsonpCallbackString

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

同时服务端返回值也需要修改

若需返回的值为{"name":"hccake","old","18"}，

在使用jsonp的情况下服务端返回值应该为 callbackFunction({"name":"hccake","old","18"})

服务端代码eg

  
@Controller  
public class JsonPController {  
    @RequestMapping("/jsonp")  
    public String exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
       try {  
 
        //获取客户端请求的回调函数名   未使用jsop属性指定  则默认为callback
        //String jsonpCallback = request.getParameter("jsonpCallback");
        
        //若客户端使用jsonpCallbackString指定函数名  在服务端和客户端统一规范的情况下可以直接写死
        String  jsonpCallback = "callbackFunction";

        String reslutData = "{'name':'hccake','old','18'}";
  
        return jsonpCallback+"("+reslutData+")";//返回jsonp格式数据  
        
      } catch (IOException e) {  
       e.printStackTrace();  
      }  
    }  
}

转载于:https://my.oschina.net/hccake/blog/886585