---

一、axios

1、什么是axios

• Axios 是專注于網絡數(shù)據請求的庫。
• 相比于原生的 XMLHttpRequest 對象，axios 簡單易用。
• 相比于 jQuery，axios 更加輕量化，只專注于網絡數(shù)據請求。

2、axios發(fā)起GET請求

• axios.get('url', { params: { /*參數(shù)*/ } }).then(callback)
• 例如：

var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {console.log(res.data)
})

3、axios發(fā)起POST請求

• axios.post('url', { /*參數(shù)*/ }).then(callback)
• 例如：

var dataObj = { address: '北京', location: '順義區(qū)' }
axios.post(url, dataObj).then(function (res) {console.log(res.data)
})

4、直接使用axios發(fā)起請求

 axios({method: '請求類型',url: '請求的URL地址',data: { /* POST數(shù)據 */ },params: { /* GET參數(shù) */ }}) .then(callback)

例如：

var paramsData = { name: '鋼鐵俠', age: 35 }
axios({method: 'GET',url: url,params: paramsData
}).then(function (res) {console.log(res.data)
})

axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/post',data: {name: '娃哈哈',age: 18,gender: '女'}
}).then(function (res) {console.log(res.data)})

二、跨域與JSONP

1、了解同源策略和跨域

• 如果兩個頁面的協(xié)議，域名和端口都相同，則兩個頁面具有相同的源。
• 例如，下表給出了相對于 http://www.test.com/index.html 頁面的同源檢測：

• 同源策略（英文全稱 Same origin policy）是瀏覽器提供的一個安全功能。
• MDN 官方給定的概念：同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的重要安全機制。
• 通俗的理解：瀏覽器規(guī)定，A 網站的 JavaScript，不允許和非同源的網站 C 之間，進行資源的交互，例如：

無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
無法接觸非同源網頁的 DOM
無法向非同源地址發(fā)送 Ajax 請求

• 同源指的是兩個 URL 的協(xié)議、域名、端口一致，反之，則是跨域。
• 出現(xiàn)跨域的根本原因：瀏覽器的同源策略不允許非同源的 URL 之間進行資源的交互。
• 瀏覽器允許發(fā)起跨域請求，但是，跨域請求回來的數(shù)據，會被瀏覽器攔截，無法被頁面獲取到！
• 現(xiàn)如今，實現(xiàn)跨域數(shù)據請求，最主要的兩種解決方案，分別是 JSONP 和 CORS。
• JSONP：出現(xiàn)的早，兼容性好（兼容低版本IE）。是前端程序員為了解決跨域問題，被迫想出來的一種臨時解決方案。缺點是只支持 GET 請求，不支持 POST 請求。
• CORS：出現(xiàn)的較晚，它是 W3C 標準，屬于跨域 Ajax 請求的根本解決方案。支持 GET 和 POST 請求。缺點是不兼容某些低版本的瀏覽器。

2、JSONP

JSONP (JSON with Padding) 是 JSON 的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據訪問的問題。

由于瀏覽器同源策略的限制，網頁中無法通過 Ajax 請求非同源的接口數(shù)據。但是 <script> 標簽不受瀏覽器同源策略的影響，可以通過 src 屬性，請求非同源的 js 腳本。

因此，JSONP 的實現(xiàn)原理，就是通過 <script> 標簽的 src 屬性，請求跨域的數(shù)據接口，并通過函數(shù)調用的形式，接收跨域接口響應回來的數(shù)據。

（1）實現(xiàn)一個簡單的JSONP

定義一個 success 回調函數(shù)：

<script>function success(data) {console.log('獲取到了data數(shù)據：')console.log(data)}</script>

通過 <script> 標簽，請求接口數(shù)據：

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

（2）JSONP的缺點

由于 JSONP 是通過 <script> 標簽的 src 屬性，來實現(xiàn)跨域數(shù)據獲取的，所以，JSONP 只支持 GET 數(shù)據請求，不支持 POST 請求。

注意：JSONP 和 Ajax 之間沒有任何關系，不能把 JSONP 請求數(shù)據的方式叫做 Ajax，因為 JSONP 沒有用到 XMLHttpRequest 這個對象。

（3）jQuery中的JSONP

jQuery 提供的 $.ajax() 函數(shù)，除了可以發(fā)起真正的 Ajax 數(shù)據請求之外，還能夠發(fā)起 JSONP 數(shù)據請求，例如：

 $.ajax({url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',// 如果要使用 $.ajax() 發(fā)起 JSONP 請求，必須指定 datatype 為 jsonpdataType: 'jsonp',success: function(res) {console.log(res)}})

默認情況下，使用 jQuery 發(fā)起 JSONP 請求，會自動攜帶一個 callback=jQueryxxx 的參數(shù)，jQueryxxx 是隨機生成的一個回調函數(shù)名稱。

（4）自定義參數(shù)及回調函數(shù)名稱

在使用 jQuery 發(fā)起 JSONP 請求時，如果想要自定義 JSONP 的參數(shù)以及回調函數(shù)名稱，可以通過如下兩個參數(shù)來指定：

 $.ajax({url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',dataType: 'jsonp',// 發(fā)送到服務端的參數(shù)名稱，默認值為 callbackjsonp: 'callback',// 自定義的回調函數(shù)名稱，默認值為 jQueryxxx 格式jsonpCallback: 'abc',success: function(res) {console.log(res)}})

（5）jQuery中JSONP的實現(xiàn)過程

jQuery 中的 JSONP，也是通過 <script> 標簽的 src 屬性實現(xiàn)跨域數(shù)據訪問的，只不過，jQuery 采用的是動態(tài)創(chuàng)建和移除 <script> 標簽的方式，來發(fā)起 JSONP 數(shù)據請求。

在發(fā)起 JSONP 請求的時候，動態(tài)向 <header> 中 append 一個 <script> 標簽；

在 JSONP 請求成功以后，動態(tài)從 <header> 中移除剛才 append 進去的 <script> 標簽；

三、案例：淘寶搜索

1、UI效果

2、獲取用戶輸入的搜索關鍵詞

// 監(jiān)聽文本框的 keyup 事件$('#ipt').on('keyup', function() {// 獲取用戶輸入的內容var keywords = $(this).val().trim()// 判斷用戶輸入的內容是否為空if (keywords.length <= 0) {return}// TODO：獲取搜索建議列表})

3、封裝getSuggestList函數(shù)

function getSuggestList(kw) {$.ajax({// 指定請求的 URL 地址，其中，q 是用戶輸入的關鍵字url: 'https://suggest.taobao.com/sug?q=' + kw,// 指定要發(fā)起的是 JSONP 請求dataType: 'jsonp',// 成功的回調函數(shù)success: function(res) { console.log(res) }})}

4、渲染建議列表的UI結構

（1）定義搜索建議列表

<div class="box"><!-- tab 欄區(qū)域 --><div class="tabs"></div><!-- 搜索區(qū)域 --><div class="search-box"></div><!-- 搜索建議列表 --><div id="suggest-list"></div></div>

（2）定義模板結構

 <!-- 模板結構 --><script type="text/html" id="tpl-suggestList">{{each result}}<div class="suggest-item">{{$value[0]}}</div>{{/each}}</script>

（3） 定義渲染模板結構的函數(shù)

 // 渲染建議列表function renderSuggestList(res) {// 如果沒有需要渲染的數(shù)據，則直接 returnif (res.result.length <= 0) {return $('#suggest-list').empty().hide()}// 渲染模板結構var htmlStr = template('tpl-suggestList', res)$('#suggest-list').html(htmlStr).show()}

（4）搜索關鍵詞為空時隱藏搜索建議列表

 $('#ipt').on('keyup', function() {// 獲取用戶輸入的內容var keywords = $(this).val().trim()// 判斷用戶輸入的內容是否為空if (keywords.length <= 0) {// 如果關鍵詞為空，則清空后隱藏搜索建議列表return $('#suggest-list').empty().hide()}getSuggestList(keywords)})

5、輸入框防抖

防抖策略（debounce）是當事件被觸發(fā)后，延遲 n 秒后再執(zhí)行回調，如果在這 n 秒內事件又被觸發(fā)，則重新計時。

• 防抖動的 timer定義

 var timer = null                    

• 定義防抖的函數(shù)

 function debounceSearch(keywords) { timer = setTimeout(function() {// 發(fā)起 JSONP 請求getSuggestList(keywords)}, 500)}

• 在觸發(fā) keyup 事件時，立即清空 timer

 $('#ipt').on('keyup', function() {  clearTimeout(timer)// ...省略其他代碼debounceSearch(keywords)})

6、緩存搜索的建議列表

• 定義全局緩存對象

var cacheObj = {}

• 將搜索結果保存到緩存對象中

 // 渲染建議列表function renderSuggestList(res) {// ...省略其他代碼// 將搜索的結果，添加到緩存對象中var k = $('#ipt').val().trim()cacheObj[k] = res}

• 優(yōu)先從緩存中獲取搜索建議

 // 監(jiān)聽文本框的 keyup 事件$('#ipt').on('keyup', function() {// ...省略其他代碼// 優(yōu)先從緩存中獲取搜索建議if (cacheObj[keywords]) {return renderSuggestList(cacheObj[keywords])}// 獲取搜索建議列表debounceSearch(keywords)})

四、防抖和節(jié)流

1、防抖

見標題三（案例：淘寶搜索）下的輸入框防抖

2、節(jié)流

（1）概念

節(jié)流策略（throttle），顧名思義，可以減少一段時間內事件的觸發(fā)頻率。

（2）節(jié)流案例 – 鼠標跟隨效果

• 1、渲染UI結構并美化樣式

<!-- UI 結構 -->
<img src="./assets/angel.gif" alt="" id="angel" />

/* CSS 樣式 */
html, body {margin: 0;padding: 0;overflow: hidden;
}
#angel {position: absolute;
}

• 2、不使用節(jié)流時實現(xiàn)鼠標跟隨效果

$(function() {// 獲取圖片元素var angel = $('#angel')// 監(jiān)聽文檔的 mousemove 事件$(document).on('mousemove', function(e) {// 設置圖片的位置$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')})
})

• 3、節(jié)流閥的概念

節(jié)流閥為空，表示可以執(zhí)行下次操作；不為空，表示不能執(zhí)行下次操作。

當前操作執(zhí)行完，必須將節(jié)流閥重置為空，表示可以執(zhí)行下次操作了。

每次執(zhí)行操作前，必須先判斷節(jié)流閥是否為空。

• 4、使用節(jié)流優(yōu)化鼠標跟隨效果

$(function() {var angel = $('#angel')var timer = null // 1.預定義一個 timer 節(jié)流閥$(document).on('mousemove', function(e) {// 3.判斷節(jié)流閥是否為空，如果不為空，則證明距離上次執(zhí)行間隔不足16毫秒if (timer) { return } timer = setTimeout(function() {$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')// 2.當設置了鼠標跟隨效果后，清空 timer 節(jié)流閥，方便下次開啟延時器timer = null }, 16)})
})

3、防抖和節(jié)流的區(qū)別

• 防抖：如果事件被頻繁觸發(fā)，防抖能保證只有最后一次觸發(fā)生效！前面 N 多次的觸發(fā)都會被忽略！
• 節(jié)流：如果事件被頻繁觸發(fā)，節(jié)流能夠減少事件觸發(fā)的頻率，因此，節(jié)流是有選擇性地執(zhí)行一部分事件！