關於跨域和JSONP的一些理解

Zheng_lucky發表於2019-02-15
跨域JSON

面試的時候，遇到一些比較多問JSONP的，給新手黨做一些總結吧，有不對的地方，歡迎大神的指正。

使用背景：
瀏覽器有同源策略，同源策略是一種約定，是瀏覽器基本的安全功能，同源就是指協議和域名和埠三者相同。
同源策略會限制cookie，localStorage等儲存效能和DOM節點，以及攔截ajax的響應等等
需要在不同協議或者不同域名或者不同埠下進行訪問的時候就是跨域。
例如：http://www.baidu.com:8000/這個地址，前面的HTTP就是協議，www.baidu.com時候域名，8000是埠號。

JSONP的原理
同源策略下有幾個標籤不受限制，分別是

	<img src="" alt="" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src=""></script>

JSONP的跨域就是利用了script標籤不受限制的原理

JSONP的優缺點
優點：相容性好，簡單易用，能用來解決主流瀏覽器的跨域訪問問題
缺地：只支援get方法，不能使用post方法，有一定的侷限性

JSONP的使用
給大家貼一個在別的部落格上面看到的JSONP的使用程式碼（連結在後面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
</head>
<body>
    <input type="text" id="song" name="">
    <input type="button" id="song_search" value="歌曲搜尋" name="">
    <br />
    <div style="width:200px;height:230px;background:pink" id="song_list"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
       var searchJsonCallback=function(data){
        //遍歷查詢結果
            var alb_html='';
            for(var i in data.list){
                alb_html+='<span>專輯：</span><div style="color:black">'+data.list[0].albumname+'</div>';
            }
            $("#song_list").html(alb_html);
        };
        $("#song_search").on("click",function(){
            var keyword=$("#song").val();
            if(keyword==undefined||keyword==""){
                alert("歌曲搜尋不能為空");
                return false;
            }else{
                var url = "http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=10&w="+keyword+"&perpage=1&ie=utf-8";
                // 建立script標籤，設定其屬性
                var script = document.createElement('script');
                script.setAttribute('src', url);
                // 把script標籤加入head，此時呼叫開始
                document.getElementsByTagName('head')[0].appendChild(script); 
            }
            
        });  

 </script> 
</body>
</html>

點選按鈕觸發後會動態建立一個script標籤，然後把跨域的地址賦值給這個標籤的src屬性，還要在地址中向伺服器傳遞迴調函式的函式名稱，這個名稱不可以自己隨意定義，是和服務端用於包裹返回資料的名稱是一致的，建立好了以後會觸發這個回撥函式，回撥中的形參就是返回的資料，這樣就完成了跨域獲取資料

文中程式碼的文章連結：https://segmentfault.com/a/1190000009577990?utm_source=tag-newest#articleHeader5

相關文章