1. JsonP實現跨域訪問的原理分析:
1.首先理解幾個知識點:
1.跨域:所謂跨域,就是指當 服務器A 響應(回來的html) 中有向 服務器B 發送的請求,當然這樣說不太
準確,準確地說:只要 :協議,IP,端口,三者中有一個不同,那麼都會出現同源訪問策略問題,這個時候
的訪問都是跨域訪問;
2.<Script> 這個是引用外部js的一個標籤,這個標籤 沒有同源訪問策略的限制,所有它可以很方便地訪問
其他服務器上的js資源,簡而言之,這個標籤中的 src 可以跨域請求js;
2.1補充一個知識點:就是 我們根據經驗知道:我們用 <script> 訪問遠程js數據時,返回的結果數據會
原原本本地被放到我們的 <script>標籤中; 如果返回的是一個函數調用形式: show(data) ,
那麼 show() 方法會直接執行;
3.JSONP(JSON with Padding)是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域數據訪問的問題。
padding 襯墊,此處意思是在 json 數據外又加了一層"襯子": callback(json數據);
2.基於以上知識點,我們很容易相當利用 <Script> 的跨域訪問功能,讓它作爲載體,將我們需要的數據封裝到這
個載體上,一併傳回來,那麼我們就要寫一個函數,這個函數的功能就是,給它一個 url,它會根據這個url創建
一個 <script src = url> 然後直接把我們的 url 請求發送到指定服務器,我們更關心的是數據返回的問題,
我們是如何將數據返回的呢? 我們在服務端
2. JsonP實現跨域訪問的原理分析之終極總結:
其實 JsonP 實現跨域訪問可以說是一個不成文的協議了,爲什麼這麼說呢? 因爲這個需要服務器端和瀏覽器端
按照約定做一些事情:
1.瀏覽器端: 要創建一個<script src=url> 實現跨域請求到其他服務器,只是請求,還有響應要考慮:
2.瀏覽器端,根據JsonP約定 要在url 後加一個callback=fanhui 參數, 這個參數以後會在服務器返回時作爲JsonP的P
部分: fanhui(服務器返回的json數據); 返回給瀏覽器的<script> 那麼此時此刻,服務器已經完成了將數據返回,
並且同時會調用一個名叫 fanhui 的函數;
3.在第2.步中,我們已經知道,服務器將返回 JsonP [fanhui(服務器返回的json數據)] 給<script> 直接觸發了:fanhui()
函數被調用,所以我們應該在<script>中預先定義好 fanhui(data) 這個函數,這樣在服務器端返回 JsonP時,直接調用
到了這個方法;同時我們也獲得了其中的數據;
簡而言之:1. 瀏覽器端的<script src=url> 實現了跨域url的請求,
2. 服務器端返回的 JsonP 實現對 請求的響應;
3. 瀏覽器端預置 的 與JsonP 中的 P 同名的 函數,實現了數據的接收;