Ajax-05
xhr（level-2）新特性
responseType屬性和response屬性
responseType: 表示預期服務器返回的數據的類型
- “” ，默認空
- text，和空一樣，表示服務器返回的數據是字符串格式
- json，表示服務器返回的是json格式
- document，表示服務器返回的是xml格式
<script>let xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (this.readyState === 4 && this.status === 200) {console.log(this.response);}};xhr.responseType = 'json'; // 指定，服務器返回的數據是json類型xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();</script>
response：響應
- 用于接收服務器返回的結果
- response可以接收任何類型的結果
- 會根據responseType指定的值，自動處理服務器返回的結果（
自動將JSON轉成JS）
onload事件
onloadend事件
onloadstart事件
<script>// window.onload = function () {// }let xhr = new XMLHttpRequest();// ajax請求完畢(成功)，當readyState===4的時候，會觸發xhr.onload事件xhr.onload = function () {// ? 能不能在這里接收到服務器返回的結果// ? 要不要加判斷，然后在接收結果console.log(this.response);};xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();/*相關的其他事件：- onload ajax請求成功之后觸發- onloadstart ajax請求之前觸發- onloadend ajax請求完成之后觸發（無論成功或失敗都會觸發）*/</script>
jQuery其他方法
$.ajax()其他選項
$.ajax({type: 'GET',url: 'xxxxx',data: {},success: function (res) {},contentType: false, // 默認值 application/x-www-form-urlencodedprocessData: false,/*下面的選項大家知道，了解即可*/timeout: 10, // 設置請求超時事件ontimeout: function () {}, // 請求超時之后的處理函數beforeSend: function () {}, // 發送請求之前觸發的函數complete: function () {}, // 表示請求響應結束之后觸發的函數（無論成功失敗）dataType: 'json', // 預期服務器返回數據的類型，相當于responseTypeheaders: {}, // 用于設置請求頭xhr: function () {let xhr = new XMLH........return xhr; // 必須return xhr對象}, // 允許我們自定義xhr對象來完成一些jQuery做不到的事
});
$.ajaxSetup();
全局配置ajax選項：
$.ajaxSetup({// 對象里面的內容，和$.ajax里面的對象的內容格式一樣timeout: 100, // 全局配置請求超時時間為100毫秒type: 'POST', // 全局配置請求方式為POST
});
$(document).ajaxStart();
- ajax請求開始，觸發的事件
$(document).ajaxStop();
- ajax請求終止后觸發的事件
例如：NProgress.start() 和 NProgress.done() 的作用相同
$.ajaxPrefilter();
在每個ajax請求發送之前，自定義ajax的選項或修改ajax的選項。
$.ajaxPrefilter(function (options) {// options是當前ajax請求的所有選項// 得到ajax請求的所有選項之后，可以對他進行修改
});
axios簡介
-
它是別人封裝的一個能夠實現ajax請求的庫。
-
體積小，文件大小官方說6kb。
-
專門用于處理ajax請求，比jQuery還要強大，沒有其他功能
// 有沒有類似 $.get的方法
axios.get('http://www.liulongbin.top:3006/api/getbooks').then(function (res) {console.log(res);});
https://github.com/axios/axios
跨域（理解）
同源策略
- 同源指的是，兩個url的 協議、域名、端口都相同，那么這兩個url就是同源的
- 如果兩個url的 協議、域名、端口只要要一個不一樣，叫做非同源
- 如果非同源，以下三種行為會受到限制
- DOM無法操作
- cookie無法獲取 (了解)
- Ajax請求無效
兩個url，指的是打開頁面的url，和ajax請求的地址
跨域Ajax請求
打開頁面的url 和 接口地址的url 如果非同源，就是跨域請求。
我們之前練習的所有案例，都是跨域請求，之所以能夠成功，是因為 liulongbin 老師的接口做了處理。
如何實現跨域請求：
- JSONP
- 出現的比較早，瀏覽器都支持。
- CORS
- 出現的完，但是是w3c的標準，是標準的解決ajax跨域問題的方法。
JSONP方案實現跨域請求
原生代碼實現JSONP：
- 前端（準備一個函數，比如叫做abc。并且設置好形參，準備接收結果）
- 前端（使用script標簽src屬性，去請求jsonp接口，必須指定callback參數，值就是abc）
細節問題：
- 請求，可以通過network查看，但是注意它不是ajax請求
- 通過network查看到，服務器返回一個字符串，這個字符串會被瀏覽器當做js代碼解釋
- 正規的JSONP接口，都必須傳遞callback參數，值是我們準備好的函數名。
jQuery方法實現JSONP
// 方法一：
$.getJSON('url?callback=?', data, callback);// 方法二：
$.ajax({url: '',data: {},success: function (res) {},dataType: 'jsonp' // 必須指定的一項
});
淘寶搜索建議案例
接口
淘寶搜索建議接口：'https://suggest.taobao.com/sug
請求參數： q – 我們輸入的值
步驟：
- 注冊輸入框的鍵盤彈起事件
- 判斷輸入框的值是否為空
- 使用JSONP請求接口，獲取搜索建議
- 將搜索建議渲染到頁面中（需要自定義ul和css樣式）
#sousuo, #sousuo li {list-style: none;padding: 0;margin: 0;
}
#sousuo li {height: 25px;line-height: 25px;padding-left: 5px;color: gray;
}
<!-- 下面的ul放到搜索區的后面 -->
<!-- 搜索建議區 -->
<ul id="sousuo"></ul>
// 注冊輸入框的keyup事件，當鍵盤彈起的時候，完成搜索
$('.ipt').keyup(function () {// 判斷輸入框的值是否為空let val = $(this).val().trim();if (val === '') {// 清空搜索建議列表$('#sousuo').empty();return;}// 發送JSONP請求，獲取搜索建議$.ajax({url: 'https://suggest.taobao.com/sug',data: {q: val},success: function (res) {// console.log(res);let str = '';res.result.forEach(item => {str += '<li>' + item[0] + '</li>';});// 把拼接好的li，放到ul中$('#sousuo').html(str);},dataType: 'jsonp' // 必須指定的});
});
CORS方案實現跨域請求
CORS翻譯過來，跨域資源共享。
CORS實現跨域，和前端沒有關系。前端還是正常的寫代碼，完成ajax請求即可。
CORS響應頭：https://developer.mozilla.org/zh-CN/docs/Glossary/CORS
CORS介紹：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
防抖和節流（掌握）
防抖
節流
枚舉)
類和結構體)
 屬性)