有這樣一個面試題: 什麼是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今天要做一個付錢的頁面,頁面顯示賬戶餘額,還要有一個付款的按鈕。蹬蹬蹬。。搞定了:
然後他需要一個資料庫,不然使用者重新整理一下,蹬蹬蹬。。又搞定了!接下來給按鈕加一個事件,加哪一個?我的DOM事件流有講事件處理程式喲!,於是小Po愉快的加上了DOM2級事件處理程式,接下來向後端發一個請求吧!
-
那就用form表單提交一個post這樣沒問題吧?蹬蹬蹬。。。。
那麼還有什麼可以傳送請求的,a標籤?不行,那個需要點選一下呢?而且a標籤看起來很奇怪不是嗎?那img標籤怎麼樣?好像可行哦,試試,蹬蹬蹬。。。
-
那就試試
<img>
來傳送請求吧
<img>
標籤裡面加了自動重新整理,這樣彈窗出來後不就可以自動重新整理了嗎?而且還有一個狗狗圖片傳過來,多有意思!簡直太棒!
於是A同志高興的提交了程式碼,沒過多久,就被打回來了,你這個請求還不錯,怎麼老是給傳個狗子過來,勞資不要狗,我要錢!你懂嗎?錢!
於是,為了這個低俗的需求,小Po又得重新找,這回找到了<script>
,這回別處岔子了。蹬蹬蹬。。。
-
最後嘗試下
<script>
,ORZ
於是小Po將img換成script,打出一個彈窗,嗯,有兩個彈窗,一個是HTML的,一個是伺服器中的,看會發生什麼。
然後付款,怎麼沒扣錢???
虛驚一場~~~原來是沒新增進body!!為啥?不為啥!記住吧。
竟然能在伺服器端可以使用js,小Po彷彿發現了新大陸!,於是悄悄的在伺服器返回的JS中操作了HTML,這樣就能扣錢而不用重新整理頁面,一舉兩得,一石二鳥,一箭雙鵰。。。。完美!!!!
於是小Po自信的提交了程式碼,然而,並板凳還沒坐熱,意見又來了。
“小Po啊,你醬紫我後端很難做啊(點根菸),你看看,我還要知道你頁面寫的是啥,我才能寫響應,這樣我都可以做前端,要你何用?!(彈了菸頭,踩滅)你在好好想想吧!還有哦,你這個<script>
付一次錢就在頁面新增一個script標籤,真的麻煩。這麼爛的程式碼,是要我帶20米的砍刀麼?(吐出煙霧,一臉gaygay)”。
小Po心驚膽顫的撿起鍵盤,顫巍巍的刪除了response裡面的程式碼,懷疑人生。算了,先ka掉重複script!再想解決辦法。
搞定!小Po重拾信心,還有什麼辦法解決程式碼太過於耦合呢?既然我不能放在後端,那我放在頁面裡面怎麼樣,可是這個程式碼怎麼執行呢?誒?放函式裡面,讓後端段響應的同時執行我頁面的函式不就OK啦。
“喂,解決沒?”
“大哥這樣怎麼樣?”
“不行!程式碼還是太多了,爺沒時間寫你那個什麼函式名字,你等會,我去找我的刀”
“(T T)ORZ”
-
抓緊時間,再看看問題怎麼解決
我帶個引數過去,讓後端能夠擷取函式名,響應的時候呼叫這個函式名對應的函式就好了,這樣就不會讓他知道我要執行什麼程式碼。耦合不就降下來了嗎?簡直是一舉。。。 =。= 先提交看看吧。
“來!頭伸過來。。”
“ 已經提交上去了。”
“是嗎?給你一次機會,嗯?!資料怎麼傳過去呢?”
“用json什麼放在‘我要傳輸的資料’ 的那個位置就好了。”
“嗯。。。還行,過得去,今天就不砍你啦。給你個紅包領著你的狗子回家吧。
“收工!”
jsonp為什麼沒有post
因為是動態建立script標籤呀,script不能發post請求呀。完!