“约见”面试官系列之常见面试题之第六十七篇之jsonp原理和实现（建议收藏）
一、 同源策略
所有支持Javascript的瀏覽器都會使用同源策略這個安全策略。看看百度的解釋：
同源策略，它是由Netscape提出的一個著名的安全策略。 現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。 當一個瀏覽器的兩個tab頁中分別打開百度和谷歌的頁面 當一個百度瀏覽器執行一個腳本的時候會檢查這個腳本是屬于哪個頁面的 即檢查是否同源，只有和百度同源的腳本才會被執行。而解決這種同源策略的方法稱之為跨域
跨域的方法有很多種,這里介紹一下最經典的jsonp跨域
二、JSON和JSONP
JSONP和JSON好像啊，他們之間有什么聯系嗎？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。對于JSON大家應該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。
JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。--來源百度
JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充)， 我們先看下面的小例子然后再詳細介紹。
三、跨域的簡單原理
光看定義還不是很明白，那首先我們先來手動做個簡單易懂的小測試。新建一個asp.net的web程序，添加sample.html網頁和一個test.js文件，代碼如下：
sample.html的代碼：
//sample.html <!DOCTYPE> <html> <head><title>test</title><script type="text/javascript" src="test.js"></script> </head> <body> </body> </html>test.js的代碼：
//test.jsalert("success");打開sample.html后會跳出"success”這樣的這樣的信息框，這似乎并不能說明什么， 跨域問題到底怎么解決呢？
好，現在我們模擬下非同源的環境，剛才我們不是已經用Visual Studio新建了一個Web程序嗎(這里我們叫A程序)，現在我們再打開一個新的Visual Studio再新建一個Web程序(B程序)，將我們的之前的test.js文件從A程序中移除然后拷貝到B程序中。
兩個程序都運行起來后，Visual Studio會啟動內置服務器，假設A程序是localhost:20001,B程序是localhost:20002，這就模擬了一個非同源的環境了(雖然域名相同但端口號不同，所以是非同源的)。
OK，我們接下來應該改下sample.html里的代碼，因為test.js文件在B程序上了，url也就變成了localhost:20002。
sample.html部分代碼:
<script type="text/javascript" src="http://localhost:20002/test.js"></script>請保持AB兩個Web程序的運行狀態，當你再次刷新localhost:20001/sample.html的時候，和原來一樣跳出了"success"的對話框.
是的，成功訪問到了非同源的localhost:20002/test.js這個所謂的遠程服務了。到了這一步，相信大家應該已經大概明白如何跨域訪問了的原理了。
<script>標簽的src屬性并不被同源策略所約束，所以可以獲取任何服務器上腳本并執行。
四、JSONP的實現模式--CallBack
剛才的小例子講解了跨域的原理，我們回上去再看看JSONP的定義說明中講到了javascript callback的形式。那我們就來修改下代碼，如何實現JSONP的javascript callback的形式。
程序A中sample的部分代碼：
<script type="text/javascript"> //回調函數 function callback(data) {alert(data.message); } </script> <script type="text/javascript" src="http://localhost:20002/test.js"></script>程序B中test.js的代碼：
//調用callback函數，并以json數據形式作為闡述傳遞，完成回調callback({message:"success"});這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然后在遠程服務上調用這個函數并且將JSON 數據形式作為參數傳遞，完成回調。
將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義吧。
一般情況下，我們希望這個script標簽能夠動態的調用，而不是像上面因為固定在html里面所以沒等頁面顯示就執行了，很不靈活。我們可以通過javascript動態的創建script標簽，這樣我們就可以靈活調用遠程服務了。
程序A中sample的部分代碼：
<script type="text/javascript">function callback(data) {alert(data.message);}//添加<script>標簽的方法function addScriptTag(src){var script = document.createElement('script');script.setAttribute("type","text/javascript");script.src = src;document.body.appendChild(script);}window.onload = function(){addScriptTag("http://localhost:20002/test.js");} </script>程序B的test.js代碼不變，我們再執行下程序，是不是和原來的一樣呢。
如果我們再想調用一個遠程服務的話，只要添加addScriptTag方法，傳入遠程服務的src值就可以了。
這里說明下為什么要將addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，這個script標簽是被添加到body里的，由于我們寫的javascript代碼是在head標簽中，document.body還沒有初始化完畢呢，所以我們要通過window.onload方法先初始化頁面，這樣才不會出錯。
上面的例子是最簡單的JSONP的實現模型，不過它還算不上一個真正的JSONP服務。
我們來看一下真正的JSONP服務是怎么樣的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?
q=?這個問號是表示你要搜索的內容，最重要的是第二個callback=?這個是正如其名表示回調函數的名稱，也就是將你自己在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調。有點羅嗦了，還是看看實現代碼吧:
<script type="text/javascript">//添加<script>標簽的方法function addScriptTag(src){var script = document.createElement('script');script.setAttribute("type","text/javascript");script.src = src;document.body.appendChild(script);}window.onload = function(){//搜索apple，將自定義的回調函數名result傳入callback參數中addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");}//自定義的回調函數resultfunction result(data) {//我們就簡單的獲取apple搜索結果的第一條記錄中url數據alert(data.responseData.results[0].unescapedUrl);} </script>五、jQuery對JSONP的實現
jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(詳細可以參考JQ實現jsonp)。
那我們就來修改下程序A的代碼，改用jQuery的getJSON方法來實現(下面的例子沒用用到向服務傳參，所以只寫了getJSON(url,[callback]))：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){alert(data.name + " is a a" + data.sex);}); </script>結果是一樣的，要注意的是在url的后面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback后面的那個問號是內部自動生成的一個回調函數名。這個函數名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。
當然，加入說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎么辦呢？我們可以使用$.ajax方法來實現(參數較多，詳細可以參考http://api.jquery.com/jQuery.ajax)。先來看看如何實現吧：
沒錯，jsonpCallback就是可以指定我們自己的回調方法名person，遠程服務接受callback參數的值就不再是自動生成的回調名，而是person。dataType是指定按照JSOPN方式訪問遠程服務。
利用jQuery可以很方便的實現JSONP來進行跨域訪問。先暫時寫到這吧。
本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
總結
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第六十七篇之jsonp原理和实现（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 精密星历介绍与使用
- 下一篇： 2022 百度之星程序设计大赛复赛 D.