想必聽過“跨域”這個詞的開發人員都應該知道JSONP，它是一種非正式傳輸協議，常常用於解決瀏覽器跨域數據訪問的問題。
JSONP究竟是啥？
網上關於這方面的文章很多，但是很多講得並不淺顯易懂，相信很多人看完還是一頭霧水。今天我們就一起來了解一下它的由來。
瞭解之前，我們先來看看下面幾個概念：
JSON：即JavaScrip對象標記，是一種輕量級的數據交換格式。示例：{name: '今日頭條', title: "架構之美", nums: 102, content: ""}
跨域：這裏我們指狹義的跨域，即同源策略限制，也就是說，只要協議、域名、端口三者中任何一個不同，就視爲異域，該策略會阻止一個域上加載的腳本去操作異域上的文檔。在這裏相信有許多想要學習web前端的同學，大家可以+下web前端學習分享裙：陸伍玖+肆柒玖+捌陸零，即可免費領取一整套系統的 web前端學習教程！
瞭解完基本的概念之後，我們就看一下它的應用場景：
假如有這麼一個應用場景：A域名下的某個頁面加載完成之後需要異步去請求B域名下某個URL返回的數據並顯示出來。這個時候直接使用Ajax去請求的話就會返回無權限訪問的問題。怎麼解決這個問題呢？
聰明的我們發現，Web頁面的JS文件通常放置於CDN上，可以正常執行，沒有受到跨域的影響；
那麼我們只要在B域名的服務器上將要返回的數據以JSON的格式寫進JS文件中，A域名的頁面就可以獲取到這些數據了。
另一問題，A域名如何使用自己定義的函數來處理返回的這些數據呢？答案就是A域名傳遞一個callback參數給B域名，B域名返回JSON數據的包裝（所以叫JSONP）：callback(JSON)，這樣瀏覽器就會在A域名下的頁面就會調起callback函數。
看到這裏還不是很明白，沒事，繼續看下面的例子：
我們在local.html頁面定義一個函數，然後在遠程remote.js中傳入數據進行調用。
remote.js內容如下：
運行上面代碼之後，成功彈出了'A域名本地函數，可以被異域的remote.js文件調用'的提示信息，跨域請求成功了。
但是通常遠程JS文件並不知道本地函數名叫啥，要解決這問題很簡單，只要動態生成B域名下的JS腳本並傳入callback回調函數名，一切問題就迎刃而解了，我們更新一下代碼。
代碼改動比較大，沒有直接寫死JS文件，而是實現動態生成，這也是本文JSONP核心實現了。看到這裏，你應該明白它是個什麼東西了吧。
JSONP的優缺點
優點
1.與利用XHR對象發送Ajax請求不同，JSONP可以跨越同源策略；
2.JSONP的兼容性好，可以在衆多瀏覽器中運行。
缺點
1.只支持GET一種類型的HTTP請求，應用場景有限；
2.調用失敗時缺少必要的提示信息，不方便排查問題；
3.存在一定的安全風險，但可以使用Referer和Token校驗進行規避。
jquery中的實現
原理其實是一樣的，只是jq對方法進行了封裝，方便調用，並且生成了回調函數進行處理。