柚子快報(bào)激活碼778899分享：前端 AJAX復(fù)習(xí)總結(jié)

http://yzkb.51969.com/

AJAX復(fù)習(xí)總結(jié)

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術(shù)）,是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。簡(jiǎn)單來(lái)說(shuō)，AJAX就是讓網(wǎng)頁(yè)變得更快、更靈活的一種方法

舉個(gè)例子：當(dāng)你瀏覽一個(gè)網(wǎng)站時(shí)有一個(gè)搜索框，每次你輸入搜索內(nèi)容提交后，整個(gè)頁(yè)面重新刷新，再顯示搜索結(jié)果，這樣也太慢了些?。?！

但有了AJAX之后，當(dāng)我們?cè)谒阉骺蜉斎雰?nèi)容提交時(shí)，它會(huì)悄悄在后臺(tái)與服務(wù)器通信，獲取搜索結(jié)果，然后只更新網(wǎng)頁(yè)搜索結(jié)果部分，頁(yè)面其它部分保持不變

基礎(chǔ)知識(shí)

axios基本使用

axios是一個(gè)基于 Promise 的 HTTP 客戶端，是一個(gè)第三方庫(kù)

1）引入 axios.js 文件到自己的網(wǎng)頁(yè)中：axios.js文件鏈接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2）明確axios函數(shù)的使用語(yǔ)法

axios({

url: '目標(biāo)資源地址'

}).then((result) => {

// 對(duì)服務(wù)器返回的數(shù)據(jù)做后續(xù)處理

})

錯(cuò)誤處理

使用 axios 的 catch 方法，捕獲這次請(qǐng)求響應(yīng)的錯(cuò)誤并做后續(xù)處理

axios({

// ...請(qǐng)求選項(xiàng)

}).then(result => {

// 處理成功數(shù)據(jù)

}).catch(error => {

// 處理失敗錯(cuò)誤

})

認(rèn)識(shí)URL

定義：統(tǒng)一資源定位符，簡(jiǎn)稱網(wǎng)址，用于訪問(wèn)服務(wù)器上資源 組成：三部分組成（協(xié)議-鑰匙、域名-地址、資源路徑-物品位置）

1）http協(xié)議：超文本傳輸協(xié)議，規(guī)定了瀏覽器和服務(wù)器傳遞數(shù)據(jù)的格式

2）域名：標(biāo)記服務(wù)器在互聯(lián)網(wǎng)中的位置，想訪問(wèn)哪臺(tái)服務(wù)器，就得先知道它的域名

3）資源路徑：一個(gè)服務(wù)器有多個(gè)資源，根據(jù)標(biāo)記看你想要訪問(wèn)哪條

查詢參數(shù)

定義：攜帶給服務(wù)器額外信息，讓服務(wù)器返回我想要的某一部分?jǐn)?shù)據(jù)而不是全部數(shù)據(jù) 用法：在 url 網(wǎng)址后面用?拼接格式：http://xxxx.com/xxx/xxx?參數(shù)名1=值1&參數(shù)名2=值2 axios攜帶參數(shù)

常用請(qǐng)求方法

如：GET，POST，PUT，DELETE，PATCH（這些都是http協(xié)議規(guī)定的），每個(gè)單詞對(duì)應(yīng)一種對(duì)服務(wù)器資源要執(zhí)行的操作

注冊(cè)用戶

GET 和 POST 請(qǐng)求方法的區(qū)別

GET是從服務(wù)器上獲取數(shù)據(jù)，POST是向服務(wù)器上傳遞數(shù)據(jù)的GET通過(guò)URL來(lái)傳遞參數(shù)，POST是放在請(qǐng)求體中GET會(huì)被瀏覽器主動(dòng)緩存, POST不會(huì)，需要手動(dòng)設(shè)置瀏覽器回退的時(shí)候, GET不會(huì)重新提交, 而POST會(huì)重新提交表單Params主要用于傳遞GET請(qǐng)求的URL（查詢）參數(shù)；data主要用于傳遞POST請(qǐng)求的請(qǐng)求體數(shù)據(jù)

HTTP協(xié)議-請(qǐng)求報(bào)文

就是瀏覽器發(fā)送給服務(wù)器的內(nèi)容，如注冊(cè)用戶，發(fā)送的請(qǐng)求報(bào)文 組成：請(qǐng)求行（1）、請(qǐng)求頭（2-11）、空行（12）、請(qǐng)求體（13） 通過(guò)谷歌的網(wǎng)頁(yè)面板查看請(qǐng)求報(bào)文

HTTP協(xié)議-響應(yīng)報(bào)文

響應(yīng)行（狀態(tài)行）：協(xié)議、HTTP響應(yīng)狀態(tài)碼、狀態(tài)信息 響應(yīng)頭：以鍵值對(duì)的格式攜帶的附加信息，比如 Content-Type 空行：分隔響應(yīng)頭，空行之后的是返回給瀏覽器的資源 響應(yīng)體：返回的資源 HTTP 響應(yīng)狀態(tài)碼用來(lái)表明請(qǐng)求是否成功完成

form-seralize插件

是為了快速收集表單元素的值

Bootstrap彈框

不離開當(dāng)前頁(yè)面，顯示單獨(dú)的內(nèi)容，如點(diǎn)擊添加，出現(xiàn)一個(gè)小頁(yè)面

顯示彈框

AJAX原理

XMLHttpRequest學(xué)習(xí)

基礎(chǔ)使用

AJAX的原理就是window 提供的 XMLHttpRequest axios 是對(duì) XHR 相關(guān)代碼進(jìn)行了封裝，讓我們只關(guān)心傳遞的接口參數(shù) 學(xué)習(xí) XHR 可以了解 axios 內(nèi)部與服務(wù)器交互過(guò)程的真正原理

查詢參數(shù)

在調(diào)用 open 方法的時(shí)候，在 url? 后面按照指定格式拼接參數(shù)名和值

數(shù)據(jù)提交

1.這次沒有axios幫助我們，需要自己設(shè)置請(qǐng)求體 Content-Type：application/json，告訴服務(wù)的，發(fā)過(guò)去內(nèi)容為 JSON 字符串

2.需要自己將 JS 對(duì)象轉(zhuǎn)成 JSON 字符串

3.原生 XHR 需要在 send 方法調(diào)用時(shí)，傳入請(qǐng)求體攜帶

注冊(cè)用戶

Promise學(xué)習(xí)

基礎(chǔ)認(rèn)識(shí)

表示（管理）一個(gè)異步操作最終狀態(tài)和結(jié)果值的對(duì)象 通過(guò)學(xué)習(xí)Promise,可以知道成功和失敗狀態(tài)，可以關(guān)聯(lián)對(duì)應(yīng)處理函數(shù)，了解 axios 內(nèi)部運(yùn)作的原理。 語(yǔ)法：

Promise三種狀態(tài)

每個(gè) Promise 對(duì)象必定處于以下三種狀態(tài)之一：

待定（pending）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕已兌現(xiàn)（fulfilled）：操作成功完成已拒絕（rejected）：操作失敗

用 Promise 管理 XHR 異步任務(wù)

基于 Promise 和 XHR 封裝 myAxios 函數(shù)

AJAX進(jìn)階

同步代碼和異步代碼

同步代碼：逐行執(zhí)行，需原地等待結(jié)果后，才繼續(xù)向下執(zhí)行

異步代碼：調(diào)用后耗時(shí)，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待），在將來(lái)完成后觸發(fā)回調(diào)函數(shù)傳遞結(jié)果；如：setTimeout 、 setInterval，事件，AJAX；依靠回調(diào)函數(shù)來(lái)接收

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ù)地獄 問(wèn)題：可讀性差，異常捕獲困難

Promise鏈?zhǔn)秸{(diào)用

基本用法

依靠 then() 方法會(huì)返回一個(gè)新生成的 Promise 對(duì)象特性，繼續(xù)串聯(lián)下一環(huán)任務(wù)，直到結(jié)束 解決回調(diào)函數(shù)嵌套問(wèn)題

解決回調(diào)函數(shù)地獄問(wèn)題

每個(gè) Promise 對(duì)象中管理一個(gè)異步任務(wù)，用 then 返回 Promise 對(duì)象，串聯(lián)起來(lái)

async 函數(shù)和 await

基本用法

在 async 函數(shù)內(nèi)，使用 await 關(guān)鍵字取代 then 函數(shù)，等待獲取 Promise 對(duì)象成功狀態(tài)的結(jié)果值 await替代 then 方法來(lái)提取 Promise 對(duì)象成功狀態(tài)的結(jié)果

捕獲錯(cuò)誤

用 try catch 捕獲同步流程的錯(cuò)誤

事件循環(huán)

JavaScript 單線程（某一刻只能執(zhí)行一行代碼），為了讓耗時(shí)代碼不阻塞其他代碼運(yùn)行，設(shè)計(jì)了事件循環(huán)模型它允許代碼在單線程上異步執(zhí)行，在調(diào)用?？臻e時(shí)，反復(fù)調(diào)用任務(wù)隊(duì)列里回調(diào)函數(shù)執(zhí)行機(jī)制 習(xí)題練習(xí)：

宏任務(wù)與微任務(wù)

ES6 之后引入了 Promise 對(duì)象， 讓 JS 引擎也可以發(fā)起異步任務(wù) 異步任務(wù)劃分為：

宏任務(wù)：由瀏覽器環(huán)境執(zhí)行的異步代碼

微任務(wù)：由 JS 引擎環(huán)境執(zhí)行的異步代碼

Promise.all 靜態(tài)方法

合并多個(gè) Promise 對(duì)象，等待所有同時(shí)成功完成（或某一個(gè)失敗），做后續(xù)邏輯

柚子快報(bào)激活碼778899分享：前端 AJAX復(fù)習(xí)總結(jié)

http://yzkb.51969.com/

相關(guān)閱讀