關於JSONP跨域請求原理的深入解析
目錄
- 什麼是同源策略
- 什麼是ONP
- 練習
- jsonp的缺點
- 總結
什麼是同源策略
同源策略,它是由Netscape提出的一個著名的安全策略。現在所有支援 的瀏覽器都會使用這個策略。
簡單來講,域名,協議,埠相同。當一個瀏覽器的兩個tab頁中分別開啟來 百度和谷歌的頁面。當瀏覽器的百度tab頁執行一個的時候會檢查這個指令碼是屬於哪個頁面的,即檢查是否同源,只有和百度同源的指令碼才會被執行。如果非同源,那麼在請求資料時,瀏覽器會在控制檯中報一個異常,提示拒絕訪問。
什麼是JSONP
JSONP是JSON with Padding的略稱。它是一個非官方的協議,它允許在伺服器端整合Script tags返回至客戶端,通過script callback的形式實現跨域訪問(這僅僅是JSONP簡單的實現形式)
如何理解上面那句話
我們知道標籤中的src屬性既可以請求本地圖片,也可以請求網上資源。也就是說html中的src屬性是支援跨域的。同理jsonp跨域請求也是利用src屬性,只不過用的是標籤。
那麼我們來舉例看一下:
先寫一個html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <title>jsonp請求資源</title> <script type="text/javascript" src="./t10dJDpOqhnbz.js"></script> </body> </html>
在寫一個js檔案:
console.log("我被請求了!");
開啟控制檯可以看到:
jsonp實現了本地資料的請求,在這裡我們模擬了一下本地請求是怎麼實現的。
如果請求伺服器的資料該是怎樣去實現呢?
瞭解跨域請求模式:
我們先開啟百度的搜尋頁面,開啟控制檯,點選Network如下:
然後在頁面輸入一個b:
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=11020022466709590333256_1639545101298&_=1639545101299
關鍵字:wd=b
這是回撥函式
:
cb=jQuery11020022466709590333256_1639545101298&_=1639545101299
可以看到他的請求方式是GET方式,Jsonp的請求方式預設也是GET請求。通過get方式請求伺服器,伺服器返回的資料若是json字串將自動轉化為js物件。所以jsonp是需要伺服器端和客戶端相互配合的。
紅色方框是返回的關鍵字:
可以發現,我們並沒有寫callback方法,jQuery自動幫我們封裝了一個callback方法。我們修改CD為001後發現它的名字變成了001。
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,35475&wd=b&req=2&csor=1&cb=001
練習
獲取請求到的資料,並將它們顯示出來(百度搜索框)。
做法如下:
可以根據我們輸入的東西動態的建立指令碼,然後獲取回撥函式裡面的值的函式,然後頁面新增一個列表把它們顯示出來。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <script src="../12-5/js/jquery.js"></script> <style> input { width: 540px; height: 40px; border: 2px solid #4E6EF2; } li{ height: 40px; width: 411px; line-height: 40px; font-size: 16px; list-style: none; } </style> </head> <body> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"> <div> <input type="text" value =''> </div> <ul></ul> <script> // www.cppcns.com function getData(data){ var script = document.querySelector('#jsonp'); script.parentNode.removeChild(script); $('ul').html(''); for(var i =0;i<data.g.length;i++){ $('<li>'+data.g[i].q +'</li>').appendTo('ul');//將獲取到的資料加http://www.cppcns.com入列表 http://www.cppcns.com} } //動態生成script指令碼 function getList(wd){ var script = document.createElement('script'); script.id = 'jsonp'; script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd; document.body.appendChild(script); } //給input設定鍵盤事件。 //實現輸入文字後呼叫指令碼函式 var ipt = document.querySelector('input'); ipt.addEventListener('keyup',function(){ var wd = this.value; getList(wd); }) </script> </body> </html>
jsonp的缺點
- 只能傳送get請求。因為script只能傳送get請求
- 需要後臺配合。此種請求方式應該前後端配合,將返回結果包裝成callback(result)的形式。
總結
到此這篇關於JSONP跨域請求原理的文章就介紹到這了,更多相關JSONP跨域請求原理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!