JSONP原理及實現跨域方式

今天作頁面時，後臺給了個接口：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的原理其實不復雜：

一、瀏覽器的同源策略把跨域請求都禁止了；
   二、HTML的<script>標籤是例外，能夠突破同源策略從其餘來源獲取數據；
   三、由上可得，咱們能夠經過<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插入以後就能夠處理數據了