面試題-探索JSONP

Pomelo1213發表於2018-02-03

有這樣一個面試題: 什麼是jsonp,jsonp為什麼沒有post。那麼,我們先看看什麼是jsonp,瞭解了在看這個問題。

什麼是JSONP


JSONP是JSON with Padding的略稱。它是一個非官方的協議,它允許在伺服器整合JavaScript返回至 客戶端,通過javascript callback形式實現跨域訪問。

為什麼會有跨域這個說法呢?


因為同源策略!瀏覽器安全是來自於同源策略。什麼是同源策略呢?我們知道在網路中安全非常重要,不然你的密碼,賬號,重要資料都會被別人竊取,別人可以在網上獲取到這些資料,模仿成你,騙過瀏覽器,為所欲為,這樣的情況是不允許發生的。於是就有了同源策略一說。 規定如下:

協議相同
域名相同
埠相同
複製程式碼

滿足以上要求的網頁稱為同源下的網頁。

例如:
http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(埠不同
複製程式碼

不同源的網頁共有三種行為會受到限制:

1. Cookie、LocalStorage、IndexDB無法讀取。
2. DOM無法獲得。
3. AJAX請求不能傳送。
複製程式碼

這樣一來,就很安全了!那麼這麼做有好處,為什麼還需要跨域呢?因為不方便,因為同源策略一棒子打死了一片,有人用著不舒服,於是就有了jsonp跨域。說的這麼高大上,可以說就是一個script小技巧。

說了這麼鋪墊知識,下面開始一段Long story簡潔版 jsonp (多圖預警!!!)

Long Story


小Po今天要做一個付錢的頁面,頁面顯示賬戶餘額,還要有一個付款的按鈕。蹬蹬蹬。。搞定了:

面試題-探索JSONP

面試題-探索JSONP
然後他需要一個資料庫,不然使用者重新整理一下,蹬蹬蹬。。又搞定了!

面試題-探索JSONP

接下來給按鈕加一個事件,加哪一個?我的DOM事件流有講事件處理程式喲!,於是小Po愉快的加上了DOM2級事件處理程式,接下來向後端發一個請求吧!

  • 那就用form表單提交一個post這樣沒問題吧?蹬蹬蹬。。。。

面試題-探索JSONP
成功的完成了,可是有個問題我必須的重新整理一下才會顯示,這樣是不是體驗很不順暢。

那麼還有什麼可以傳送請求的,a標籤?不行,那個需要點選一下呢?而且a標籤看起來很奇怪不是嗎?那img標籤怎麼樣?好像可行哦,試試,蹬蹬蹬。。。

  • 那就試試<img>來傳送請求吧

面試題-探索JSONP
不錯,不錯,我在<img>標籤裡面加了自動重新整理,這樣彈窗出來後不就可以自動重新整理了嗎?而且還有一個狗狗圖片傳過來,多有意思!簡直太棒!

於是A同志高興的提交了程式碼,沒過多久,就被打回來了,你這個請求還不錯,怎麼老是給傳個狗子過來,勞資不要狗,我要錢!你懂嗎?錢!

於是,面試題-探索JSONP為了這個低俗的需求,小Po又得重新找,這回找到了<script>,這回別處岔子了。蹬蹬蹬。。。

  • 最後嘗試下<script>,ORZ

於是小Po將img換成script,打出一個彈窗,嗯,有兩個彈窗,一個是HTML的,一個是伺服器中的,看會發生什麼。

面試題-探索JSONP

然後付款,怎麼沒扣錢???

面試題-探索JSONP

虛驚一場~~~原來是沒新增進body!!為啥?不為啥!記住吧。

竟然能在伺服器端可以使用js,小Po彷彿發現了新大陸!,於是悄悄的在伺服器返回的JS中操作了HTML,這樣就能扣錢而不用重新整理頁面,一舉兩得,一石二鳥,一箭雙鵰。。。。完美!!!!

面試題-探索JSONP

於是小Po自信的提交了程式碼,然而,並板凳還沒坐熱,意見又來了。

“小Po啊,你醬紫我後端很難做啊(點根菸),你看看,我還要知道你頁面寫的是啥,我才能寫響應,這樣我都可以做前端,要你何用?!(彈了菸頭,踩滅)你在好好想想吧!還有哦,你這個<script>付一次錢就在頁面新增一個script標籤,真的麻煩。這麼爛的程式碼,是要我帶20米的砍刀麼?(吐出煙霧,一臉gaygay)”。

小Po心驚膽顫的撿起鍵盤,顫巍巍的刪除了response裡面的程式碼,懷疑人生。算了,先ka掉重複script!再想解決辦法。

面試題-探索JSONP

搞定!小Po重拾信心,還有什麼辦法解決程式碼太過於耦合呢?既然我不能放在後端,那我放在頁面裡面怎麼樣,可是這個程式碼怎麼執行呢?誒?放函式裡面,讓後端段響應的同時執行我頁面的函式不就OK啦。

面試題-探索JSONP

“喂,解決沒?”

“大哥這樣怎麼樣?”

“不行!程式碼還是太多了,爺沒時間寫你那個什麼函式名字,你等會,我去找我的刀”

“(T T)ORZ”

  • 抓緊時間,再看看問題怎麼解決

我帶個引數過去,讓後端能夠擷取函式名,響應的時候呼叫這個函式名對應的函式就好了,這樣就不會讓他知道我要執行什麼程式碼。耦合不就降下來了嗎?簡直是一舉。。。 =。= 先提交看看吧。

面試題-探索JSONP

“來!頭伸過來。。面試題-探索JSONP面試題-探索JSONP

面試題-探索JSONP 已經提交上去了。”

“是嗎?給你一次機會,嗯?!資料怎麼傳過去呢?”

“用json什麼放在‘我要傳輸的資料’ 的那個位置就好了。”

“嗯。。。還行,過得去,今天就不砍你啦。給你個紅包領著你的狗子回家吧。面試題-探索JSONP

“收工!”

jsonp為什麼沒有post


因為是動態建立script標籤呀,script不能發post請求呀。完!

相關文章