jsonp实现跨域

发布时间：2020-12-16 19:33:09 所属栏目：百科来源：网络整理

导读：一：入门小demo：在工程 1 添加一个新页面 test1.jsp, 内容如下：（工程 1url 地址： h ttp://localhost:8084/test1.jsp ) 该页面主要内容：添加一个按钮，请求地址为工程 2 的 test2.jsp 页面，关键代码： bdybutton type="button" id="testJsonp"jsonp De

一：入门小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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!