跨域與JSONP
目錄
能夠知道什麼是同源策略和跨域
能夠知道什麼是JSONP
能夠說出JSONP的實現原理
能夠知道防抖和節流的概念
1.1同源策略
1.什麼是同源
如果兩個頁面的協議，域名和埠都相同，則兩個具有相同的源
例如，下標給出了相對於http://www.test.com/index.html頁面的同源檢測：
2.什麼是同源策略
同源策略（英文全稱Same origin policy）是瀏覽器提供的一個安全功能。
MDN官方給定的概念：同源策略限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動這是一個用於隔離潛在惡意檔案的重要檔案的重要安全機制。
通俗的理解：瀏覽器規定，A網站的JavaScript，不允許和非同源的網站C之間，進行資源互動 ，例如：
1.無法讀取非同源網頁的Cookie、LocalStorage和lndexedDB
2.無法解除非同源網頁的DOM
3.無法向非同源地址傳送Ajax請求
1.2跨域
1.什麼是跨域
同源指的是兩個URL的協議、域名、埠一致，反之，則是跨域。
出現跨域的根本原因:瀏覽器的同源策略不允許非同源的URL之間進行資源的互動。
網頁: http://www.test.com/index.html
介面: http://www.api.com/userlist
2.瀏覽器對跨域請求的攔截
注意:瀏覽器允許發起跨域請求，但是，跨域請求回來的資料，會被瀏覽器攔截，無法被頁面獲取到！
3.如何實現跨域請求
現如今，實現跨域資料請求，最主要的兩種解決方案，分別是JSONP 和CORS。
JSONP:出現的早，相容性好（相容低版本IE)。是前端程式設計師為了解決跨域問題，被迫想出來的一種臨時解決方案。缺點是隻支援GET請求，不支援POST請求。
CORS:出現的較晚，它是W3C標準，屬於跨域 Ajax請求的根本解決方案。支援GET和POST請求。缺點是不相容某些低版本的瀏覽器。
2.1什麼是JSONP
JSONP（JSON with Padding）是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題
2.2JSONP的實現原理
由於瀏覽器同源策略的限制，網頁中無法通過Ajax請求非同源的介面資料。但是<script>標籤不受瀏覽器同源策略的影響，可以通過src屬性，請求非同源的js 指令碼。
因此，JSONP 的實現原理，就是通過<script>標籤的src屬性，請求跨域的資料介面，並通過函式呼叫的形式，接收跨域介面響應回來的資料。
發起跨域請求出現的問題：
<script> $.ajax({ method: "GET", url: "http://ajax.frontend.itheima.net:3006", data: { name: "ls", age: 15, }, success: function (res) { console.log(res); }, }); </script>
2.3自己實現一個簡單的JSONP
JSONP不屬於Ajax
<!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></body>
<script>
function abc(data) {
console.log("JSONP響應回來的資料是:");
console.log(data);
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=ls&age=30"></script>
</html>
2.4JSONP的缺點
由於JSONP是通過<script>標籤src屬性，來實現跨域資料獲取的，所以，JSONP只支援GET資料請求，不支援POST請求
注意：JSONP和Ajax之間沒有任何關係，不能把JSONP請求資料的方式叫做Ajax，因為JSONP沒有用到XMLHttpRequest這個物件
2.5jQuery中的JSONP
jQuery提供的$.ajax()函式，除了可以發起真正的Ajax資料請求之外，還能狗發起JSONP資料請求，例如：
<script> $(function () { // 發起JSONP的請求 $.ajax({ url: "http://ajax.frontend.itheima.net:3006/apu/jsonp?name=zs&age=20", // 代表我們要發起JSONP的資料請求 dataType: "jsonp", success: function (res) { console.log(res); }, }); }); </script>
2.6自定義引數及回撥函式名稱
在使用jQuery發起JSONP請求時，如果想要自定義JSONP的引數以及回撥函式名稱，可以通過如下兩個引數來指定：
<script> $(function () { // 發起JSONP的請求 $.ajax({ url: "http://ajax.frontend.itheima.net:3006/apu/jsonp?name=zs&age=20", // 代表我們要發起JSONP的資料請求 dataType: "jsonp", jsonp: "cb", jsonpCallback: "abc", success: function (res) { console.log(res); }, }); }); </script>
2.7jQuery中JSONP的實現過程
jQuery中的JSONP，也是通過<script>標籤的src屬性實現跨域資料訪問的，只不過，jQuery採用的是動態建立移除<script>標籤的方式，來發起JSONP資料請求。
在發起JSONP請求的時候，動態向<header>中append一個<script>標籤；
在JSONP請求成功後，動態從<header>中移除剛才append中移除剛才append進去的<script>標籤
<!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>
<button id="btnJSONP">發起JSONP請求</button>
</body>
<script src="/lib/jquery.min.js"></script>
<script>
$(function () {
$("#btnJSONP").on("click", function () {
$.ajax({
url: "http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=順義",
dataType: "jsonp",
jsonpCallback: "abc",
success: function (res) {
console.log(res);
},
});
});
});
</script>
</html>
3.防抖和節流
防抖
1.什麼是防抖
防抖策略（debounce） 是當事件被觸發後，延遲n秒後再執行回撥，如果在這n秒內事件又被觸發，則重新計時。
只執行最後一次動作
2.防抖的應用場景
使用者在輸入框中連續輸入一串字元時，可以通過防抖策略，只在輸入完後，才執行查詢的請求，這樣才更有效減少請求次數，節約請求資源；
注意： 如果沒有設定防抖，那麼每輸入一個字元就會請求一次很浪費請求資源
3.實現輸入框的防抖
節流
1.什麼節流
節流策略（throttle），顧名思義，可以減少一段時間內事件的觸發頻率。
防止按下多次射擊無限制攻速
2.節流的應用場景
1.滑鼠連續不斷地觸發某事件（如點選），只在單位時間內只觸發一次；
2.懶載入時要監聽計算滾動條的位置，但不必每次滑動都觸發，可以降低計算頻率，而不必去浪費CPU資源
3.節流閥的概念
高鐵衛生間是否被佔用，由紅綠燈控制，紅燈表示被佔用，綠燈表示可使用。
假設每個人上衛生間都需要花費5分鐘，則五分鐘之內，被佔用的衛生間無法被其他人使用。上一個人使用完畢後，需要將紅燈重置為綠燈，表示下一個人可以使用衛生間。
下一個人在上衛生間之前，需要先判斷控制燈是否為綠色，來知曉能否上衛生間。
節流閥為空，表示可以執行下次操作;不為空，表示不能執行下次操作。
當前操作執行完，必須將節流閥重置為空，表示可以執行下次操作了。
每次執行操作前，必須先判斷節流閥是否為空。
使用節流優化滑鼠跟隨效果：
4.防抖和節流的區別
防抖：如果事件頻繁觸發，防抖能保證只有最後一次觸發生效！前面N多次的觸發都會被忽略！
節流：如果事件被頻繁觸發，節流能夠減少事件觸發頻率，因此，節流是有選擇地執行一部分事件