jsonp实现跨域

最新推荐文章于 2023-11-09 16:24:46 发布

jimmyBay

最新推荐文章于 2023-11-09 16:24:46 发布

阅读量918

点赞数 1

分类专栏： JavaWeb的学习总结

本文链接：https://blog.csdn.net/shiyiqijialimin/article/details/70598079

版权

JavaWeb的学习总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：入门小demo：

在工程1添加一个新页面test1.jsp,内容如下：（工程1url地址： http://localhost:8084/test1.jsp)

该页面主要内容：添加一个按钮，请求地址为工程2的test2.jsp页面，关键代码：

<bdy>
	<button type="button" id="testJsonp">jsonp Demo</button>
</body>
<script type="text/javascript">
	$("#testJsonp").click(function(){
	     $.get("http://localhost:8083/test2.jsp", function (data) {
        	console.log(data);
    })
	})
</script>

在工程2天假一个新页面test2.jsp内容如下：（工程2url地址：

http://localhost:8083/test2.jsp ）

当点击该按钮时，报错，信息如下：

错误的大概意思就是：远程资源加载失败。

二：同源策略

到这里，就要普及一个概念：“同源策略”

所谓同源策略，就是指，域名，协议，端口相同。说白了，就是当前域不能访问其他域的东西。如下图所示：

为了实现跨域访问，我们了解了jsonp…...

JSONP 是 JSON with padding（填充式 JSON 或参数式JSON）的简写。

1·JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src不受同源策略约束来跨域获取数据。

2·JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

三实现跨域方法

方法一：动态生成script标签，向该标签添加src属性值。

为什么这样可以？（凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<script>,<img>,<iframe>等等。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript">
    function handleResponse(response){
            console.log(response);
    }
</script>
<script type="text/javascript">
    window.onload = function() {
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function() {     
        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>
</html>

方法二：通过jquery的$.ajax调用异域的内容。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
    <meta charset="UTF-8">
    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){

            $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>
</html>

方法三：$.getJSON（）方法跨域。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
    <meta charset="UTF-8">
    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
        	$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
                console.log(data);
            });
        });
    });
</script>
</html>