同源策略跨域防抖節流
阿新 • • 發佈：2021-10-21
同源
同源概念：若
通俗的理解：瀏覽器規定，A 網站的 JavaScript，不允許和非同源的網站 C 之間，進行資源的互動，例如：
① 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
② 無法接觸非同源網頁的 DOM
③ 無法向非同源地址傳送 Ajax 請求
現如今，實現跨域資料請求，最主要的兩種解決方案，分別是 JSONP（前端方案） 和 CORS（後端方案）。
JSONP：出現的早，相容性好（相容低版本IE）。是前端程式設計師為了解決跨域問題，被迫想出來的一種臨時解決方案。缺點是只支援 GET 請求，不支援 POST 請求。
CORS：出現的較晚，它是 W3C 標準，屬於跨域 Ajax 請求的根本解決方案。支援 GET 和 POST 請求。缺點是不相容某些低版本的瀏覽器
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/jquery.js"></script> 10 </head> 11 12 <body> 13 <script> 14 $.ajax({ 15 method: 'GET', 16 url: 'http://www.liulongbin.top:3006/api/jsonp', 17 data: { 18 name: 'zs', 19 age: 20 20 }, 21 success: function (res) { 22 console.log(res) 23 } 24 }) 25 </script> 26 </body> 27 28 </html>
1 $.ajax({ 2 url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20', 3 // 如果要使用 $.ajax() 發起 JSONP 請求，必須指定 datatype 為 jsonp 4 dataType: 'jsonp', 5 success: function(res) { 6 console.log(res) 7 } 8 })
1 $.ajax({ 2 url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20', 3 dataType: 'jsonp', 4 // 傳送到服務端的引數名稱，預設值為 callback 5 jsonp: 'callback', 6 // 自定義的回撥函式名稱，預設值為 jQueryxxx 格式 7 jsonpCallback: 'abc', 8 success: function(res) { 9 console.log(res) 10 } 11 })
-
-
在
JSONP請求成功以後，動態從<header>中移除剛才append進去的<script>標籤；
示列如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/jquery.js"></script> 10 </head> 11 12 <body> 13 <button id="btnJSONP">發起JSONP資料請求</button> 14 <script> 15 $(function () { 16 $('#btnJSONP').on('click', function () { 17 $.ajax({ 18 url: 'http://liulongbin.top:3006/api/jsonp?address=北京&location=順義', 19 // 傳送到服務端的引數名稱，預設值為 callback 20 dataType: 'jsonp', 21 // 自定義的回撥函式名稱，預設值為 jQueryxxx 格式 22 jsonpCallback: 'abc', 23 success: function (res) { 24 console.log(res) 25 } 26 }) 27 }) 28 }) 29 </script> 30 </body> 31 32 </html>