柚子快報激活碼778899分享：前端 AJAX復習總結(jié)
柚子快報激活碼778899分享：前端 AJAX復習總結(jié)
AJAX復習總結(jié)
AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術(shù)）,是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。簡單來說，AJAX就是讓網(wǎng)頁變得更快、更靈活的一種方法
舉個例子：當你瀏覽一個網(wǎng)站時有一個搜索框，每次你輸入搜索內(nèi)容提交后，整個頁面重新刷新，再顯示搜索結(jié)果，這樣也太慢了些?。?！
但有了AJAX之后，當我們在搜索框輸入內(nèi)容提交時，它會悄悄在后臺與服務(wù)器通信，獲取搜索結(jié)果，然后只更新網(wǎng)頁搜索結(jié)果部分，頁面其它部分保持不變
基礎(chǔ)知識
axios基本使用
axios是一個基于 Promise 的 HTTP 客戶端，是一個第三方庫
1）引入 axios.js 文件到自己的網(wǎng)頁中：axios.js文件鏈接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2）明確axios函數(shù)的使用語法
axios({
url: '目標資源地址'
}).then((result) => {
// 對服務(wù)器返回的數(shù)據(jù)做后續(xù)處理
})
錯誤處理
使用 axios 的 catch 方法，捕獲這次請求響應(yīng)的錯誤并做后續(xù)處理
axios({
// ...請求選項
}).then(result => {
// 處理成功數(shù)據(jù)
}).catch(error => {
// 處理失敗錯誤
})
認識URL
定義：統(tǒng)一資源定位符，簡稱網(wǎng)址，用于訪問服務(wù)器上資源 組成：三部分組成（協(xié)議-鑰匙、域名-地址、資源路徑-物品位置）
1）http協(xié)議：超文本傳輸協(xié)議，規(guī)定了瀏覽器和服務(wù)器傳遞數(shù)據(jù)的格式
2）域名：標記服務(wù)器在互聯(lián)網(wǎng)中的位置，想訪問哪臺服務(wù)器，就得先知道它的域名
3）資源路徑：一個服務(wù)器有多個資源，根據(jù)標記看你想要訪問哪條
查詢參數(shù)
定義：攜帶給服務(wù)器額外信息，讓服務(wù)器返回我想要的某一部分數(shù)據(jù)而不是全部數(shù)據(jù) 用法：在 url 網(wǎng)址后面用?拼接格式：http://xxxx.com/xxx/xxx?參數(shù)名1=值1&參數(shù)名2=值2 axios攜帶參數(shù)
常用請求方法
如：GET，POST，PUT，DELETE，PATCH（這些都是http協(xié)議規(guī)定的），每個單詞對應(yīng)一種對服務(wù)器資源要執(zhí)行的操作
GET 和 POST 請求方法的區(qū)別
GET是從服務(wù)器上獲取數(shù)據(jù)，POST是向服務(wù)器上傳遞數(shù)據(jù)的GET通過URL來傳遞參數(shù)，POST是放在請求體中GET會被瀏覽器主動緩存, POST不會，需要手動設(shè)置瀏覽器回退的時候, GET不會重新提交, 而POST會重新提交表單Params主要用于傳遞GET請求的URL（查詢）參數(shù)；data主要用于傳遞POST請求的請求體數(shù)據(jù)
HTTP協(xié)議-請求報文
就是瀏覽器發(fā)送給服務(wù)器的內(nèi)容，如注冊用戶，發(fā)送的請求報文 組成：請求行（1）、請求頭（2-11）、空行（12）、請求體（13） 通過谷歌的網(wǎng)頁面板查看請求報文
HTTP協(xié)議-響應(yīng)報文
響應(yīng)行（狀態(tài)行）：協(xié)議、HTTP響應(yīng)狀態(tài)碼、狀態(tài)信息 響應(yīng)頭：以鍵值對的格式攜帶的附加信息，比如 Content-Type 空行：分隔響應(yīng)頭，空行之后的是返回給瀏覽器的資源 響應(yīng)體：返回的資源 HTTP 響應(yīng)狀態(tài)碼用來表明請求是否成功完成
form-seralize插件
是為了快速收集表單元素的值
Bootstrap彈框
不離開當前頁面，顯示單獨的內(nèi)容，如點擊添加，出現(xiàn)一個小頁面
顯示彈框
AJAX原理
XMLHttpRequest學習
基礎(chǔ)使用
AJAX的原理就是window 提供的 XMLHttpRequest axios 是對 XHR 相關(guān)代碼進行了封裝，讓我們只關(guān)心傳遞的接口參數(shù) 學習 XHR 可以了解 axios 內(nèi)部與服務(wù)器交互過程的真正原理
查詢參數(shù)
在調(diào)用 open 方法的時候，在 url? 后面按照指定格式拼接參數(shù)名和值
數(shù)據(jù)提交
1.這次沒有axios幫助我們，需要自己設(shè)置請求體 Content-Type：application/json，告訴服務(wù)的，發(fā)過去內(nèi)容為 JSON 字符串
2.需要自己將 JS 對象轉(zhuǎn)成 JSON 字符串
3.原生 XHR 需要在 send 方法調(diào)用時，傳入請求體攜帶
Promise學習
基礎(chǔ)認識
表示（管理）一個異步操作最終狀態(tài)和結(jié)果值的對象 通過學習Promise,可以知道成功和失敗狀態(tài)，可以關(guān)聯(lián)對應(yīng)處理函數(shù)，了解 axios 內(nèi)部運作的原理。 語法：
Promise三種狀態(tài)
每個 Promise 對象必定處于以下三種狀態(tài)之一：
待定（pending）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕已兌現(xiàn)（fulfilled）：操作成功完成已拒絕（rejected）：操作失敗
用 Promise 管理 XHR 異步任務(wù)
基于 Promise 和 XHR 封裝 myAxios 函數(shù)
AJAX進階
同步代碼和異步代碼
同步代碼：逐行執(zhí)行，需原地等待結(jié)果后，才繼續(xù)向下執(zhí)行
異步代碼：調(diào)用后耗時，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待），在將來完成后觸發(fā)回調(diào)函數(shù)傳遞結(jié)果；如：setTimeout 、 setInterval，事件，AJAX；依靠回調(diào)函數(shù)來接收
const result = 0 + 1
console.log(result)
setTimeout(() => {
console.log(2)
}, 2000)
document.querySelector('.btn').addEventListener('click', () => {
console.log(3)
})
document.body.style.backgroundColor = 'pink'
console.log(4)
//打印順序：1，4，2
回調(diào)函數(shù)地獄
在回調(diào)函數(shù)中嵌套回調(diào)函數(shù)，一直嵌套下去就形成了回調(diào)函數(shù)地獄 問題：可讀性差，異常捕獲困難
Promise鏈式調(diào)用
基本用法
依靠 then() 方法會返回一個新生成的 Promise 對象特性，繼續(xù)串聯(lián)下一環(huán)任務(wù)，直到結(jié)束 解決回調(diào)函數(shù)嵌套問題
解決回調(diào)函數(shù)地獄問題
每個 Promise 對象中管理一個異步任務(wù)，用 then 返回 Promise 對象，串聯(lián)起來
async 函數(shù)和 await
基本用法
在 async 函數(shù)內(nèi)，使用 await 關(guān)鍵字取代 then 函數(shù)，等待獲取 Promise 對象成功狀態(tài)的結(jié)果值 await替代 then 方法來提取 Promise 對象成功狀態(tài)的結(jié)果
捕獲錯誤
用 try catch 捕獲同步流程的錯誤
事件循環(huán)
JavaScript 單線程（某一刻只能執(zhí)行一行代碼），為了讓耗時代碼不阻塞其他代碼運行，設(shè)計了事件循環(huán)模型它允許代碼在單線程上異步執(zhí)行，在調(diào)用?？臻e時，反復調(diào)用任務(wù)隊列里回調(diào)函數(shù)執(zhí)行機制 習題練習：
宏任務(wù)與微任務(wù)
ES6 之后引入了 Promise 對象， 讓 JS 引擎也可以發(fā)起異步任務(wù) 異步任務(wù)劃分為：
宏任務(wù)：由瀏覽器環(huán)境執(zhí)行的異步代碼
微任務(wù)：由 JS 引擎環(huán)境執(zhí)行的異步代碼
Promise.all 靜態(tài)方法
合并多個 Promise 對象，等待所有同時成功完成（或某一個失?。?，做后續(xù)邏輯
柚子快報激活碼778899分享：前端 AJAX復習總結(jié)
相關(guān)閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Twitter推特優(yōu)選
