完全弄懂jsonp原理及實現方法

時間 2019-12-08

標籤完全弄懂 jsonp 原理實現方法欄目 JSON 简体版

原文原文鏈接

1、同源策略

全部支持Javascript的瀏覽器都會使用同源策略這個安全策略。看看百度的解釋：javascript

同源策略，它是由Netscape提出的一個著名的安全策略。
如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。
當一個瀏覽器的兩個tab頁中分別打開百度和谷歌的頁面
當一個百度瀏覽器執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的
即檢查是否同源，只有和百度同源的腳本纔會被執行。

而解決這種同源策略的方法稱之爲跨域
跨域的方法有不少種,這裏介紹一下最經典的jsonp跨域html

2、JSON和JSONP

JSONP和JSON好像啊，他們之間有什麼聯繫嗎？java

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。對於JSON你們應該是很瞭解了吧，不是很清楚的朋友能夠去json.org上了解下，簡單易懂。jquery

JSONP是JSON with Padding的略稱。它是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。--來源百度web

　　JSONP就像是JSON+Padding同樣(Padding這裏咱們理解爲填充)，咱們先看下面的小例子而後再詳細介紹。
　　ajax

3、跨域的簡單原理

光看定義還不是很明白，那首先咱們先來手動作個簡單易懂的小測試。新建一個asp.net的web程序，添加sample.html網頁和一個test.js文件，代碼以下：json

sample.html的代碼：api

//sample.html

<!DOCTYPE> <html> <head> <title>test</title> <script type="text/javascript" src="test.js"></script> </head> <body> </body> </html>

test.js的代碼：跨域

//test.js alert("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屬性並不被同源策略所約束，因此能夠獲取任何服務器上腳本並執行。

4、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的部分代碼：
```

程序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數據傳入這個方法完成回調。有點羅嗦了，仍是看看實現代碼吧：

### 5、jQuery對JSONP的實現 jQuery框架也固然支持JSONP，可使用`$.getJSON(url,[data],[callback])`方法(詳細能夠參考<a href="http://api.jquery.com/jQuery.getJSON/" target="_blank">JQ實現jsonp</a>)。 那咱們就來修改下程序A的代碼，改用jQuery的getJSON方法來實現(下面的例子沒用用到向服務傳參，因此只寫了getJSON(url,[callback]))：

結果是同樣的，<b>要注意的是在url的後面必須添加一個callback參數，這樣getJSON方法纔會知道是用JSONP方式去訪問服務</b>，callback後面的那個問號是內部自動生成的一個回調函數名。這個函數名你們能夠debug一下看看，好比jQuery17207481773362960666_1332575486681。 　　固然，加入說咱們想<b>指定本身的回調函數名</b>，或者說服務上規定了固定回調函數名該怎麼辦呢？咱們可使用`$.ajax`方法來實現(參數較多，詳細能夠參考http://api.jquery.com/jQuery.ajax)。先來看看如何實現吧：

```

沒錯，jsonpCallback就是能夠指定咱們本身的回調方法名person，遠程服務接受callback參數的值就再也不是自動生成的回調名，而是person。dataType是指定按照JSOPN方式訪問遠程服務。

　　利用jQuery能夠很方便的實現JSONP來進行跨域訪問。先暫時寫到這吧。