JSONP原理解析

最新推荐文章于 2024-10-09 20:00:03 发布

坚强的_码农

最新推荐文章于 2024-10-09 20:00:03 发布

阅读量46

点赞数

文章标签：状态模式

原文链接：https://www.cnblogs.com/chiangchou/p/jsonp.html

版权

JSONP原理

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用标签来随意显示某个域上的图片一样。

1）原理：
JSONP就是利用了script标签的src属性发起的跨域请求，由于script标签的作用是用来执行src指定的js代码。那么我们可以跟后端协商一个函数名，后端将要返回的数据作为函数的参数，一起返回给前端，前端事先定义好该函数，这样就完成了跨域请求。

示例：

1.前端代码：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        //回调函数
        function showData (result) {
            var data = JSON.stringify(result); //json对象转成字符串
            $("#text").val(data);
        }
        $(document).ready(function () {
            $("#btn").click(function () {
                //向头部输入一个脚本，该脚本发起一个跨域请求
                $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
            });
 
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

2.服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    //数据
    List<Student> studentList = getStudentList();
    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();
    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";
    response.getWriter().write(result);
}

说明：当点击"跨域获取数据"的按钮时，添加一个script标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。
在这里插入图片描述

jquery的jsonp跨域示例：

1、配置dataType：

服务端代码同上，ajax请求时只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求。

一、前端代码

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    success: function (data) {
                        var result = JSON.stringify(data); //json对象转成字符串
                        $("#text").val(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

二、效果：

在这里插入图片描述

三、说明：

jsonp指定服务器返回的数据类型为jsonp格式。从请求的url上可以看到，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数。

jquery配置jsonp后会随机生成回调函数，当返回jsonp的数据后，执行该回调函数，只不过默认jquery会将这个执行动作映射到success中。

2、指定回调函数：

可以通过jsonpCallback属性指定函数的名称，然后显示的将指定的jsonp回到函数写到script下(默认属于window对象)，或window对象里。

我们都知道，ajax执行成功后会调用success函数，那上面那种指定了jsonp后，会不会调用success呢？答案是会，而且是先执行jsonp的回调函数，再执行ajax的success函数，例如：

一、前端代码

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        function showData (data) {
            console.info("调用showData");
 
            var result = JSON.stringify(data);
            $("#text").val(result);
        }
        $(document).ready(function () {
//            window.showData = function  (data) {
//                console.info("调用showData");
//                var result = JSON.stringify(data);
//                $("#text").val(result);
//            }
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp",  //指定服务器返回的数据类型
                    jsonpCallback: "showData",  //指定回调函数名称
                    success: function (data) {
                        console.info("调用success");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>