jsonp跨域请求及本质

在html页面中，能实现跨域请求的是

第一：

<script src="http://localhost:59602/JsonpTest.ashx?callBack=callBack"></script>

第二：

var img = document.createElement("img");
img.src = "http://localhost:59602/JsonpTest1.ashx?callBack=callBack";

现在根据这两种讲解跨域请求

第一种：
直接上代码：前台HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function callBack() {
            alert("执行了");
        }
    </script>
    <script src="http://localhost:59602/JsonpTest.ashx?callBack=callBack"></script>
</head>
<body>

</body>
</html>

后台用的c#的一般处理程序

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string callBack= context.Request.QueryString["callBack"];
            context.Response.Write(callBack+"()");
        }

执行结果成功

 

 第二种：

前台代码：html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<img src="http://localhost:59602/JsonpTest.ashx?callBack=callBack">-->
</body>
<script>
    var img = document.createElement("img");
    img.src = "http://localhost:59602/JsonpTest1.ashx?callBack=callBack";
    // img.style.display = "none";
    document.body.appendChild(img);
    img.onload = function (data1) {
        console.log("成功");
    }
    img.onerror = function (data1) {
        console.log("失败");
        console.log(data1);
    }
</script>
</html>

后台代码：后台用的302重定向调整，直接返回图片也可以

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Redirect("https://img.alicdn.com/tfs/TB1cokKnY_I8KJjy1XaXXbsxpXa-190-140.gif", false);
        }

 

第三中：JQ的ajax封装的jsonp，本质就是用的上面两种

前台页面：HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $.ajax({
                url:"http://localhost:59602/JsonpTest.ashx",
                dataType:"jsonp",
                jsonpCallback:"callback",
                success:function (data) {
                    alert("回调成功");
                }
            });
        });

        function callback(data) {
            alert("回调callback");
        }
    </script>
</head>
<body>

</body>
</html>

后台代码用的第一中的。

结果：查看网络请求，本质还是第一种

 

后台接口永续跨域详解：https://blog.csdn.net/hehexiaoxia/article/details/61916737

posted @ 2018-01-24 10:59  zhuyapeng  阅读(1149)  评论(0)  编辑  收藏  举报