跨域的產生原因：

由於瀏覽器同源策略的限制，非同源下的請求，都會產生跨域問題，jsonp即是為了解決這個問題出現的一種簡便解決方案。

同源策略即：同一協議，同一域名，同一埠號。當其中一個不滿足時，我們的請求即會發生跨域問題。

舉個簡單的例子：

1. http://www.abc.com:3000到https://www.abc.com:3000的請求會出現跨域（域名、埠相同但協議不同）
2. http://www.abc.com:3000到http://www.abc.com:3001的請求會出現跨域（域名、協議相同但埠不同）
3. http://www.abc.com:3000到http://www.def.com:3000的請求會出現跨域（域名不同）

突破同源策略限制：

現在知道了同源策略，那我們就來看下jsonp是如何突破同源策略的限制實現跨域的

首先，不知道大家有沒有注意，不管是我們的script標籤的src還是img標籤的src，或者說link標籤的href他們沒有被同源策略所限制，比如我們有可能使用一個網路上的圖片，就可以請求得到。是不是發現了點什麼，這些標籤的src和link屬性，並沒有受同源策略的限制。但是卻可以發起get請求拿到資料，說到這裡jsonp的實現原理就浮出水面了。jsonp就是使用同源策略這一“漏洞”，實現的跨域請求（這也是jsonp跨域只能用get請求的原因所在）。想象一下，既然是個get請求，那麼服務端一定可以接收到，並做出反饋。ok，知道這兩點之後，我們開始具體使用jsonp進行跨域請求。

JSONP跨域實現：

根據上邊所說的，我們要用過利用srcipt標籤的src屬性來實現，那麼我們如何做呢，我們來看一段簡單的程式碼，為了方便，我這裡使用jQuery：

$('#btn').click(function(){
			var frame = document.createElement('script');
			frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
			$('body').append(frame);
		});

　　我們點選按鈕的時候，建立了一個script標籤(即會發送一個get請求到src指向的地址)，src地址是"localhost:3000/article-list",這個src地址，就是我們請求的服務端介面。注意，這裡我們有是那個引數，name,age和callback，name和age不說了，這跟我們平時普通的get請求引數無異。主要說下callback這個引數，callback引數就是核心所在。為什麼要定義callback呢？首先我們知道，這個get請求已經被髮出去了，那麼我們如何介面請求回來的資料呢，callback=func則可以幫我們做這件事。我們繼續看下邊的程式碼 ：

<button id="btn">點選</button>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').click(function(){
			var frame = document.createElement('script');
			frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
			$('body').append(frame);
		});
		
		function func(res){
			alert(res.message+res.name+'你已經'+res.age+'歲了');
		}
  </script>

總結：

需要注意的是，callback引數定義的方法是需要前後端定義好的，具體什麼名字，商討好就可以了。其實jsonp的整個過程就類似於前端宣告好一個函式，後端返回執行函式。執行函式引數中攜帶所需的資料，整個過程實際非常簡單易懂，如有疑問大家可以在下方留言，我會及時回覆。