同源&跨域（jsonp原理 / jQuery 的 jsonp）

1. 同源 同源政策是浏覽器的一種安全政策，所謂同源是指，域名，協定，端口完全相同。

2. 跨域 不同源則跨域。

3. 頂級域名相同時的跨域解決方案 ① domain.name = 頂級域名（如example.com） ② document.domain + iframe ③ window.name + iframe ④ location.hash + iframe ⑤ window.postMessage()

4. jsonp：解決跨域通訊問題 JSON with Padding

jsonp：與ajax沒有關系，需要前後端配合 前後端約定好，使用某個名稱（如callback）來進行函數的調用。 前端傳入函數名，後端接收函數名，并将資料拼接成函數參數的形式與函數名進行字元串拼接，返給前端，前端會解析成js，并執行函數。 1.script标簽可跨域 2.背景響應的字元串到前端預設以js解析 3.雙方約定參數名稱 4.傳入複雜資料json格式

spa（single page application）：單頁面應用程式

①   jsonp原理 利用script标簽的src可以引用其他網站的資源，動态建立script标簽和回調函數，傳遞給背景。 其本質是利用了标簽具有可跨域的特性， 由服務端傳回一個預先定義好的Javascript函數的調用，并且将伺服器資料以該函數參數的形式傳遞過來， 此方法需要前後端配合完成。

可跨域的标簽：script、img等

<!--jsonp跨域通信原理-->

<script>

    var script = document.createElement('script');

    var success = function (data) {

        console.log(data);

    };

    script.src = 'http://api.study.com/01jsonp.php?callback=success';

    document.body.appendChild(script);

</script>

②  JQuery 的 jsonp JQuery 的 ajax 方法，設定 dataType 為 jsonp，進行跨域請求。

$.ajax({

    type:'get',

    url:'http://api.study.com/01jsonp.php',

    dataType:'jsonp',

    success: function (data) {

        console.log(data);

    }

});