JSONP原理及實現跨域方式

別天發表於2015-05-27
JSON跨域

今天做頁面時，後臺給了個介面：https://a.a.com/a/a.json,我頁面的上線地址是：http://b.b.com。
顯而易見，因為瀏覽器同源策略的限制，通過ajax無法無法取得json的資料。

百度百科

同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支JavaScript的瀏覽器都會使用這個策略。

    所謂同源是指，域名，協議，埠相同。當一個瀏覽器的兩個tab頁中分別開啟來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個指令碼的時候會檢查這指令碼是屬於哪個頁面的，即檢查是否同源，只有和百度同源的指令碼才會被執行。

同源策略限制了我們無法通過原生的XMLHttpRequest()物件獲取到json資料。為了突破這個限制，我們的前輩們想出了一個解決方案：jsonp。

jsonp並非新的資料格式，而是解決JSON跨域獲取的解決方案。通過JSONP獲取到得資料已經不是JSON了，而是JS型別的資料（大部分是物件）。

上網找過很多講jsonp的文章，大部分都是講的模模糊糊的。jsonp的原理其實不復雜：

   1、瀏覽器的同源策略把跨域請求都禁止了；
   2、HTML的<script>標籤是例外，可以突破同源策略從其他來源獲取資料；
   3、由上可得，我們可以通過<script>標籤引入jsonp檔案，然後通過一系列JS操作獲取資料。

上面三點便是JSONP實現跨域的原理。

原理我們知道了，該怎麼實現這些操作呢？
接下來輪到jQuery登場！JQ已經幫我們封裝好了
demo:

        $.ajax({
            dataType:`jsonp`,
            jsonp:`jsonp_callback`,
            url:`http://www.baidu.com/xxx.jsonp`,
            success:function(){
                //dosomthing
            }
        });

原生JS demo：

    function( url ) jsonHandle{
        var script = document.createElement("script");
        script.setAttribute("src",url);
        document.getElementsByTagName("body")[0].appendChild(script);
    }
    //JS插入之後就可以處理資料了

相關文章