一分鐘說完JSONP請求，面試滿分答案ヾ(≧▽≦*)o

時間 2019-11-07

原文原文鏈接

Hi~我是Tom，今天咱們來聊聊面試官很喜歡問，可是平時開發又沒什麼卵用的JSONP請求吧😫javascript

何爲JSONP

JSONP是JSON with Padding的略稱，JSONP爲民間提出的一種跨域解決方案，經過客戶端的script標籤發出的請求方式。html

那請求何須作得如此麻煩，直接使用ajax作請求豈不美哉，這裏便要涉及到一個同源和跨域的問題，往下。java

同源請求和跨域請求

同源策略，它是由Netscape網景公司提出的一個著名的安全策略。
複製代碼

如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。面試

而全部非同源的請求（即 域名，協議，端口 其中一種或多種不相同），都會被做爲跨域請求，瀏覽器會將其非同源的響應數據丟棄。ajax

這裏能夠理解爲是瀏覽器在搞事情，服務端確確實實有返回數據，瀏覽器接收到返回的數據，發現咱們請求的是一個非同源的數據，瀏覽器再將其響應報文丟棄掉。json

而經過一些標籤發出的請求則不會被進行同源檢查，好比script標籤，img標籤等等，本文講述JSONP即是經過script標籤作的請求。後端

JSONP的實現流程

圖示：

流程：

在發請求先，準備一個全局的接收函數跨域

window.myCallback = (res)=>{			//聲明一個全局函數 'callback'，用於接收響應數據
    console.log(res)
}
複製代碼

在html建立script標籤，發出請求瀏覽器

<html>
	....
	<script> window.myCallback = (res)=>{ //這裏爲上一步定義的全局函數 console.log(res) } </script>
    <script url="xxx?callback=myCallback"> //script標籤的請求必須在寫在定義全局函數以後 //這裏需將全局函數的函數名做爲參數callback的value傳遞 //這裏callback這個鍵名是先後端約定好的 </script> 
	</body>
</html>
複製代碼

服務端接收到請求，將以下數據相應回安全

myCallback({			//一個函數的調用，將數據做爲參數傳遞進去，再將整個函數的調用返回給客戶端
	name:'ahreal',
    age:18
})
複製代碼

客戶端接收到服務端的相應，至關於：

<html>
	....
	<script> window.myCallback = (res)=>{ //這裏爲上一步定義的全局函數 console.log(res) } </script>
    <script> //將接收到的數據做爲script標籤裏面的內容展開執行 myCallback({ name:'ahreal', age:18 }) </script> 
	</body>
</html>
複製代碼

控制檯輸出

JSONP和AJAX請求的異同

相同點：

使用的目的一致，都是客戶端向服務端請求數據，將數據拿回客戶端進行處理。

不一樣點：

ajax請求是一種官方推出的請求方式，經過xhr對象去實現，jsonp是民間發明，script標籤實現的請求。
ajax是一個異步請求，jsonp是一個同步請求
ajax存在同源檢查，jsonp不存在同源檢查，後端無需作解決跨域的響應頭。
ajax支持各類請求的方式，而jsonp只支持get請求
ajax的使用更加簡便，而jsonp的使用較爲麻煩。

面試

到這裏，JSONP的相關概念，已經闡述完畢，面試官問你JSONP請求的時候，兩步走，1. JSONP是什麼 2. JSONP怎麼作。

面試官：說說JSONP請求吧。
我：JSONP請求首先是爲了解決跨域問題而存在的一種民間解決方案balabala...
    瀏覽器存在同源安全機制balabala...
    經過標籤的形式發請求balabala...
    須要和後端同窗進行約束balabala...
    只能使用get請求balabala...
複製代碼

答道這裏JSONP這道題你已經回答了80分了，若是這時候你可以蹦出一句：

emm...我曾經使用原生js封裝過一個jsonp的插件，balabala...
複製代碼

那麼你將會是100分的回答，那不少同窗可能會問，

但是我沒封裝過JSONP的插件啊喂！
複製代碼

彆着急，我爲你準備了另一篇封裝JSONP請求插件的博客，裏面完整的闡述了思路和代碼的實現。我很是建議你好好讀一下，這將對你學習JSONP的請求有巨大的幫助。

傳送門：咱們來動手寫一個JSONP的插件吧！

End

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。