JSONP原理及實現跨域方式

標籤：get   image   格式   擷取   ice   協議   att   後台   operation   

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

百度百科

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

    所謂同源是指，網域名稱，協議，連接埠相同。當一個瀏覽器的兩個tab頁中分別開啟來 百度和Google的頁面當瀏覽器的百度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插入之後就可以處理資料了

• 2015年05月27日發布
 
• 更多

 

 

一,介面返回

liudehua(["zhangsan","lisi","wangwu"]);

二,jsonpCallback 指明回調方法名字

三,利用success,定義jsonpCallback方法. 

示意代碼:

var jsonpCallback-Name = success;

四,調用 jsonCallback-Name方法.

JSONP原理及實現跨域方式