同源政策：
什麼是同源：隻有在兩個頁面的協定(http：//或者https：//)、域名(www.baidu.com)、端口号(80端口，預設是80)都相同的情況下，這兩個頁面才是同源的。
同源政策限制的能力：非同源的兩個頁面，不能互相通路對方設定的本機存儲資料、不能互相操作對方的DOM、ajax不能互相發送請求。
什麼是跨域：在一台伺服器的頁面中，請求另一台伺服器的資料。這種行為就是跨域(兩個非同源伺服器互相請求資料)。
AJAX規避同源政策(JSONP)：
jsonp的本質：
1、利用标簽的src屬性可以加載任意伺服器的接口内容的特性，把要請求的跨域伺服器接口設定在該src屬性中，并憑借一個回調函數作為參數；
2、在伺服器端收到請求後，取出傳進來的函數名，拼接成函數執行的形式，把前端需要的資料設定在函數參數中，一塊返還給前端；
3、前端在收到了伺服器傳回的函數執行碼時，開始觸發回調函數，在回調函數中就可以擷取到想要的資料了；
代碼如下：// 1、建立script标簽
var scriptTag = document.createElement('script');
// 2、設定标簽類型
scriptTag.type = 'text/javascript';
// 3、設定請求的接口
scriptTag.src = 'http://10.0.153.197:8888/news?callback=getData';
// 4、拼接标簽進文檔流
window.onload = function() {
document.head.appendChild(scriptTag);
}
// 設定回調函數
function getData (data) {
console.log(data);
}
JSONP的用戶端具體實作：
1、我們知道，哪怕跨域js檔案中的代碼(當然指符合web腳本安全政策的)，web頁面也是可以無條件執行的。
遠端伺服器remoteserver.com根目錄下有個remote.js檔案代碼如下：alert('我是遠端檔案');
本地伺服器localserver.com下有個jsonp.html頁面代碼如下：
毫無疑問，頁面将會彈出一個提示窗體，顯示跨域調用成功。
2、現在我們在jsonp.html頁面定義一個函數，然後在遠端remote.js中傳入資料進行調用。
remote.js檔案代碼如下：localHandler({"result":"我是遠端js帶來的資料"});
jsonp.html頁面代碼如下：varlocalHandler=function(data){
alert('我是本地函數，可以被跨域的remote.js檔案調用，遠端js帶來的資料是：'+data.result);
};
運作之後檢視結果，頁面成功彈出提示視窗，顯示本地函數被跨域的遠端js調用成功，并且還接收到了遠端js帶來的資料。但是又一個問題出現了，我怎麼讓遠端js知道它應該調用的本地函數叫什麼名字呢？畢竟是jsonp的服務者都要面對很多服務對象，而這些服務對象各自的本地函數都不相同啊？我們接着往下看。
3、其實隻要服務端提供的js腳本是動态生成的就行了，這樣調用者可以傳一個參數過去告訴服務端“我想要一段調用XXX函數的js代碼，請你傳回給我”，于是伺服器就可以按照用戶端的需求來生成js腳本并響應了。
看jsonp.html頁面的代碼：//得到航班資訊查詢結果後的回調函數varflightHandler=function(data){
alert('你查詢的航班結果是：票價'+data.price+'元，'+'餘票'+data.tickets+'張。');
};
//提供jsonp服務的url位址(不管是什麼類型的位址，最終生成的傳回值都是一段javascript代碼)
var url="http://flightQuery.com/jsonp/flightResult.aspx？code=CA1998&callback=flightHandler";
//建立script标簽，設定其屬性
var script=document.createElement('script');
script.setAttribute('src', url);
//把script标簽加入head，此時調用開始
document.getElementsByTagName('head')[0].appendChild(script);
這次的代碼變化比較大，不再直接把遠端js檔案寫死，而是編碼實作動态查詢，而這也正是jsonp用戶端實作的核心部分，本例中的重點也就在于如何完成jsonp調用的全過程。
我們看到調用的url中傳遞了一個code參數，告訴伺服器我要查的是CA1998次航班的資訊，而callback參數則告訴伺服器，我的本地回調函數叫做flightHandler，是以請把查詢結果傳入這個函數中進行調用。
OK，伺服器很聰明，這個叫做flightResult.aspx的頁面生成了一段這樣的代碼提供給jsonp.html(服務端的實作這裡就不示範了，與你選用的語言無關，說到底就是拼接字元串)：flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
我們看到，傳遞給flightHandler函數的是一個json，它描述了航班的基本資訊。運作一下頁面，成功彈出提示視窗，jsonp的執行全過程順利完成！
作者：天上的牛_No1
連結：https://www.jianshu.com/p/0c5d7b1b3931