简介

　　JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 api.wjx.wiki 的网页无法与不是 api.wjx.wiki的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

前端示例

<html>
<title>test jsonp</title>
<body>
    <button onclick="todo();">Click</button>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
    function todo() {
        $.ajax({
            type : "GET",
            url : "http://xxx/index",
            dataType : "jsonp", //数据格式设置为jsonp
            jsonp : "callback", //Jquery生成验证参数的名称,需与后端接收回传约定，默认callback
            //jsonpCallback : "callback", //自定义验证参数值。缺点：回传时Jquery不会自动去除该值
            success : function(data) { //成功的回调函数
                console.log(data);
            },
            error : function(e) {
                console.log(e);
            }
        });
    }
</script>

后端示例

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    @ResponseBody
    public String index(@RequestParam("callback") String callback, HttpServletRequest request) {
        String session = request.getSession(true).getId();
        return callback+"({\"session\":\""+session+"\"})"; // 需按callback(json)构造返回值
    }

响应结果

     {"session":"B4BD5B511907D15B6BC730359922674C"}

本文由 Back 创作，采用知识共享署名4.0 国际许可协议进行许可
本站部分文章采集自互联网，因某些原因未注明出处，如有侵权，请留言告知。

JSONP - 解决跨域问题

简介

前端示例

后端示例

响应结果