跨域詳解之-----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>
相關文章
相關標籤/搜索