想必聽過“跨域”這個詞的開發人員都應該知道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對方法進行了封裝，方便呼叫，並且生成了回撥函式進行處理。