跨域详解之-----Jsonp跨域

时间 2019-12-09 标签详解 jsonp

1、经过jsonp跨域javascript

在js中，咱们直接用XMLHttpRequest请求不一样域上的数据时，是不能够的。可是，在页面上引入不一样域上的js脚本文件倒是能够的，jsonp正是利用这个特性来实现的。html

好比，有个a.html页面，它里面的代码须要利用ajax获取一个不一样域上的json数据，假设这个json数据地址是https://api.douban.com/v2/book/search?q=javascript&count=1(豆瓣)java

那么a.html中的代码就能够这样：jquery

<!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){             //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     
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";           //跨域请求 callback参数对应方法

        document.body.insertBefore(script, document.body.firstChild); };           //将script标签加入到body里
     }; 

   </script> 

</html>

注：ajax

咱们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，可是你用其余的也同样。固然若是获取数据的jsonp地址页面不是你本身能控制的，就得按照提供数据的那一方的规定格式来操做了。json

输出结果为：api

2、jQuery封装JSONP

对于常常用jQuery的开发者来讲，能注意到jQuery封装的$.ajax中有一个dataType属性，若是将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。须要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，可是其本质与$.ajax不同。跨域

<!DOCTYPE html>
<html lang="en">
<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 : {                       //拼接url
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>
</html>