柚子快報(bào)邀請(qǐng)碼778899分享：Ajax和其封裝的Axios

http://yzkb.51969.com/

Author：Dawn_T17便

目錄

一.關(guān)于XML

二.Ajax

介紹

Ajax工作步驟

原生Ajax-?XMLHttpRequest 對(duì)象?

1.創(chuàng)建 XMLHttpRequest 對(duì)象

2.定義回調(diào)函數(shù)

4.發(fā)送請(qǐng)求

5.標(biāo)準(zhǔn)格式

6.案例?

7.方法和屬性

方法

?屬性

?原生Ajax被舍棄

?三.Axios

Axios介紹

發(fā)送請(qǐng)求?

請(qǐng)求方式別名?

四.案例總結(jié)

一.關(guān)于XML

XML（可擴(kuò)展標(biāo)記語(yǔ)言，Extensible Markup Language）是一種標(biāo)記語(yǔ)言，設(shè)計(jì)的目的主要是用于存儲(chǔ)和傳輸數(shù)據(jù)。

以下是 XML 的一些關(guān)鍵特點(diǎn)和重要方面：

特點(diǎn)：

自描述性：XML 文檔中的標(biāo)記能夠清晰地描述數(shù)據(jù)的含義和結(jié)構(gòu)，使其具有良好的可讀性和可理解性?？蓴U(kuò)展性：用戶可以根據(jù)具體需求自定義標(biāo)記，從而靈活地適應(yīng)各種不同的數(shù)據(jù)類型和結(jié)構(gòu)。平臺(tái)無(wú)關(guān)性：XML 數(shù)據(jù)可以在不同的操作系統(tǒng)、編程語(yǔ)言和應(yīng)用程序之間輕松地進(jìn)行交換和處理，具有很強(qiáng)的跨平臺(tái)能力。嚴(yán)格的語(yǔ)法：要求標(biāo)記必須正確嵌套、屬性值需用引號(hào)括起來(lái)等，以確保數(shù)據(jù)的準(zhǔn)確性和完整性。

結(jié)構(gòu)：

一個(gè) XML 文檔通常由以下部分組成：

聲明：?，指定 XML 的版本和編碼方式。根元素：整個(gè)文檔有且只有一個(gè)根元素，它包含了文檔中的所有其他元素。子元素：位于根元素內(nèi)部，可以多層嵌套。屬性：元素可以具有屬性，用于提供關(guān)于元素的額外信息。

John

20

Jane

21

Bruce Eckel

Eric Matthes

二.Ajax

介紹

AJAX 并不是編程語(yǔ)言。

AJAX 是一種從網(wǎng)頁(yè)訪問(wèn) Web 服務(wù)器的技術(shù)。

Ajax（Asynchronous JavaScript and XML），即異步 JavaScript 和 XML ，是一種在網(wǎng)頁(yè)開(kāi)發(fā)中用于實(shí)現(xiàn)異步數(shù)據(jù)交互和頁(yè)面局部更新的技術(shù)組合。

Ajax 的核心概念是在不刷新整個(gè)網(wǎng)頁(yè)的情況下，通過(guò) JavaScript 發(fā)送異步請(qǐng)求到服務(wù)器，獲取數(shù)據(jù)，并動(dòng)態(tài)更新網(wǎng)頁(yè)的部分內(nèi)容。這使得網(wǎng)頁(yè)能夠提供更流暢、更快速和更具響應(yīng)性的用戶體驗(yàn)。

同步（Synchronous）：

當(dāng)進(jìn)行同步操作時(shí)，程序會(huì)按照順序依次執(zhí)行每個(gè)任務(wù)，并且在當(dāng)前任務(wù)完成之前，不會(huì)繼續(xù)執(zhí)行后續(xù)任務(wù)。這意味著程序會(huì)等待當(dāng)前操作完成，并獲取其結(jié)果后，才會(huì)繼續(xù)進(jìn)行下一步。

例如，在同步的函數(shù)調(diào)用中，調(diào)用者會(huì)被阻塞，直到被調(diào)用的函數(shù)返回結(jié)果。這就像你去銀行柜臺(tái)辦理業(yè)務(wù)，你必須等待當(dāng)前業(yè)務(wù)辦理完成后，才能進(jìn)行下一個(gè)動(dòng)作。

同步的優(yōu)點(diǎn)是邏輯簡(jiǎn)單、易于理解和調(diào)試。但缺點(diǎn)是如果某個(gè)操作耗時(shí)較長(zhǎng)，會(huì)導(dǎo)致整個(gè)程序的執(zhí)行被阻塞，降低了程序的響應(yīng)性和效率。

異步（Asynchronous）：

異步操作允許程序在發(fā)起一個(gè)操作后，不必等待該操作完成就可以繼續(xù)執(zhí)行后續(xù)的代碼。當(dāng)異步操作完成時(shí)，通常會(huì)通過(guò)回調(diào)函數(shù)、事件或其他通知機(jī)制來(lái)告知程序結(jié)果。

比如，在異步的網(wǎng)絡(luò)請(qǐng)求中，程序發(fā)送請(qǐng)求后可以繼續(xù)執(zhí)行其他任務(wù)，當(dāng)服務(wù)器響應(yīng)返回時(shí)，通過(guò)事先設(shè)置的回調(diào)函數(shù)來(lái)處理響應(yīng)數(shù)據(jù)。這類似于你在銀行辦理業(yè)務(wù)時(shí)，留下電話號(hào)碼，然后去做其他事情，銀行辦理完后會(huì)打電話通知你。

異步的優(yōu)點(diǎn)是能夠提高程序的并發(fā)性和響應(yīng)性，不會(huì)因?yàn)槟硞€(gè)耗時(shí)操作而阻塞整個(gè)程序的執(zhí)行。但異步編程相對(duì)復(fù)雜，需要處理回調(diào)函數(shù)、可能的并發(fā)問(wèn)題等，增加了編程的難度和代碼的復(fù)雜性。

Ajax工作步驟

網(wǎng)頁(yè)中發(fā)生一個(gè)事件（頁(yè)面加載、按鈕點(diǎn)擊）由 JavaScript 創(chuàng)建 XMLHttpRequest 對(duì)象XMLHttpRequest 對(duì)象向 web 服務(wù)器發(fā)送請(qǐng)求服務(wù)器處理該請(qǐng)求服務(wù)器將響應(yīng)發(fā)送回網(wǎng)頁(yè)由 JavaScript 讀取響應(yīng)由 JavaScript 執(zhí)行正確的動(dòng)作（比如更新頁(yè)面）

原生Ajax-?XMLHttpRequest 對(duì)象?

XMLHttpRequest 對(duì)象是 AJAX 的基石。

創(chuàng)建 XMLHttpRequest 對(duì)象定義回調(diào)函數(shù)打開(kāi) XMLHttpRequest 對(duì)象向服務(wù)器發(fā)送請(qǐng)求

XMLHttpRequest 對(duì)象

所有現(xiàn)代瀏覽器都支持?XMLHttpRequest 對(duì)象。

XMLHttpRequest 對(duì)象可用于在后臺(tái)與 Web 服務(wù)器交換數(shù)據(jù)。這意味著可以更新網(wǎng)頁(yè)的部分內(nèi)容，而無(wú)需重新加載整個(gè)頁(yè)面

1.創(chuàng)建 XMLHttpRequest 對(duì)象

所有現(xiàn)代瀏覽器（Chrome、Firefox、IE、Edge、Safari、Opera）都有內(nèi)置的?XMLHttpRequest 對(duì)象。

創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法：

variable = new XMLHttpRequest();

2.定義回調(diào)函數(shù)

回調(diào)函數(shù)是作為參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)。

在這種情況下，回調(diào)函數(shù)應(yīng)包含響應(yīng)準(zhǔn)備就緒時(shí)要執(zhí)行的代碼。

xhttp.onload = function() {

// 當(dāng)響應(yīng)準(zhǔn)備就緒時(shí)要做什么

}

4.發(fā)送請(qǐng)求

如需向服務(wù)器發(fā)送請(qǐng)求，您可以使用 XMLHttpRequest 對(duì)象的?open()?和?send()?方法：

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

5.標(biāo)準(zhǔn)格式

// 創(chuàng)建 XMLHttpRequest 對(duì)象

const xhttp = new XMLHttpRequest();

// 定義回調(diào)函數(shù)

xhttp.onload = function() {

// 您可以在這里使用數(shù)據(jù)

}

// 發(fā)送請(qǐng)求

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

6.案例?

先存一份數(shù)據(jù)，用JSON格式保存

然后點(diǎn)擊設(shè)置的按鈕，在后臺(tái)異步獲取數(shù)據(jù)并放在div1標(biāo)簽下（就會(huì)展示出來(lái)）

如下

?

7.方法和屬性

方法

new XMLHttpRequest()創(chuàng)建新的 XMLHttpRequest 對(duì)象。abort()取消當(dāng)前請(qǐng)求。getAllResponseHeaders()返回頭部信息。getResponseHeader()返回特定的頭部信息。open(method,?url,?async,?user,?psw) 規(guī)定請(qǐng)求。

method：請(qǐng)求類型 GET 或 POSTurl：文件位置async：true（異步）或 false（同步）user：可選的用戶名psw：可選的密碼send()向服務(wù)器發(fā)送請(qǐng)求，用于 GET 請(qǐng)求。send(string)向服務(wù)器發(fā)送請(qǐng)求，用于 POST 請(qǐng)求。setRequestHeader()將標(biāo)簽/值對(duì)添加到要發(fā)送的標(biāo)頭。

?屬性

onload定義接收到（加載）請(qǐng)求時(shí)要調(diào)用的函數(shù)。onreadystatechange定義當(dāng) readyState 屬性發(fā)生變化時(shí)調(diào)用的函數(shù)。readyState 保存 XMLHttpRequest 的狀態(tài)。

0：請(qǐng)求未初始化1：服務(wù)器連接已建立2：請(qǐng)求已收到3：正在處理請(qǐng)求4：請(qǐng)求已完成且響應(yīng)已就緒responseText以字符串形式返回響應(yīng)數(shù)據(jù)。responseXML以 XML 數(shù)據(jù)返回響應(yīng)數(shù)據(jù)。status 返回請(qǐng)求的狀態(tài)號(hào)

200: "OK"403: "Forbidden"404: "Not Found"如需完整列表請(qǐng)?jiān)L問(wèn)?Http 消息參考手冊(cè) statusText返回狀態(tài)文本（比如 "OK" 或 "Not Found"）

?原生Ajax被舍棄

原生 Ajax 雖然在早期的 Web 開(kāi)發(fā)中被廣泛使用，但現(xiàn)在在一些情況下使用得相對(duì)較少

原因：

代碼復(fù)雜性：原生 Ajax 的實(shí)現(xiàn)涉及較多的底層細(xì)節(jié)和狀態(tài)管理，代碼相對(duì)復(fù)雜，編寫(xiě)和維護(hù)起來(lái)可能較為繁瑣。跨瀏覽器兼容性：不同瀏覽器對(duì)?XMLHttpRequest?對(duì)象的實(shí)現(xiàn)可能存在細(xì)微差異，需要處理兼容性問(wèn)題。異步編程模型的復(fù)雜性：處理異步請(qǐng)求的回調(diào)函數(shù)可能導(dǎo)致代碼可讀性降低，出現(xiàn)回調(diào)地獄（Callback Hell）的問(wèn)題，使得代碼結(jié)構(gòu)難以理解和維護(hù)。新的技術(shù)和框架的出現(xiàn)：隨著前端開(kāi)發(fā)的發(fā)展，出現(xiàn)了許多更高級(jí)和方便的技術(shù)和框架，如?fetch API?、Axios?等，它們提供了更簡(jiǎn)潔、更強(qiáng)大和更易于使用的接口來(lái)進(jìn)行 HTTP 請(qǐng)求。開(kāi)發(fā)效率和代碼組織：現(xiàn)代的前端開(kāi)發(fā)更注重開(kāi)發(fā)效率和代碼的組織性，新的技術(shù)和框架通常能夠更好地與組件化開(kāi)發(fā)、狀態(tài)管理等模式結(jié)合，提高開(kāi)發(fā)效率和代碼質(zhì)量。

然而，在某些特定的簡(jiǎn)單場(chǎng)景或?qū)π阅芤髽O高的情況下，原生 Ajax 仍然可能被使用。但總體而言，對(duì)于大多數(shù)常見(jiàn)的 Web 開(kāi)發(fā)需求，開(kāi)發(fā)者更傾向于使用更新的、更便捷的技術(shù)來(lái)進(jìn)行數(shù)據(jù)請(qǐng)求和交互。

?三.Axios

Axios介紹

發(fā)送請(qǐng)求?

一.?

method: "get"?：指定請(qǐng)求方法為?GET?。url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"?：指定了要請(qǐng)求的 URL 地址。.then(result => {...})?：這是一個(gè)?Promise?的?then?方法。當(dāng) Axios 發(fā)送的請(qǐng)求成功并接收到響應(yīng)后，then?方法會(huì)被調(diào)用。

result?：是包含響應(yīng)數(shù)據(jù)和相關(guān)信息的對(duì)象。result.data?：獲取服務(wù)器返回的實(shí)際數(shù)據(jù)，并使用?console.log?打印到控制臺(tái)。

?二.

axios({...})?：創(chuàng)建了一個(gè)?axios?請(qǐng)求的配置對(duì)象。

method: "post"?：指定請(qǐng)求方法為?POST?。url: "http://yapi.smart - xwork.cn/mock/169327/emp/deleteById"?：請(qǐng)求的目標(biāo) URL 。data: "id=1"?：請(qǐng)求發(fā)送的數(shù)據(jù)，這里是一個(gè)鍵值對(duì)?id=1?。.then(result => {...})?：是?axios?請(qǐng)求成功后的回調(diào)函數(shù)。當(dāng)請(qǐng)求成功并收到響應(yīng)后，該回調(diào)函數(shù)會(huì)被執(zhí)行。

result?：包含了響應(yīng)的相關(guān)信息。console.log(result.data)?：打印出響應(yīng)數(shù)據(jù)中的?data?部分。

?TIP

當(dāng)使用?axios?發(fā)送請(qǐng)求并處理響應(yīng)時(shí)，result?對(duì)象通常包含以下一些常見(jiàn)的屬性和方法：

data：這是服務(wù)器返回的實(shí)際數(shù)據(jù)。status：HTTP 響應(yīng)的狀態(tài)碼，例如 200、404 等。statusText：與狀態(tài)碼對(duì)應(yīng)的文本描述，如 "OK" 、"Not Found" 等。headers：響應(yīng)的頭部信息，包含了關(guān)于響應(yīng)的各種元數(shù)據(jù)，如內(nèi)容類型、緩存控制等。

請(qǐng)求方式別名?

Axios 提供了一些請(qǐng)求方式的別名方法，以便更方便地發(fā)送不同類型的請(qǐng)求，常見(jiàn)的包括：

axios.get(url[, config])?：用于發(fā)送?GET?請(qǐng)求。axios.post(url, data[, config])?：用于發(fā)送?POST?請(qǐng)求。axios.put(url, data[, config])?：用于發(fā)送?PUT?請(qǐng)求。axios.delete(url[, config])?：用于發(fā)送?DELETE?請(qǐng)求。axios.patch(url, data[, config])?：用于發(fā)送?PATCH?請(qǐng)求。

這些別名方法使得在使用 Axios 發(fā)送不同類型的 HTTP 請(qǐng)求時(shí)，代碼更加簡(jiǎn)潔和直觀。

四.案例總結(jié)

要求：在頁(yè)面加載完成后，后臺(tái)異步獲取數(shù)據(jù)，并渲染在屏幕上

目標(biāo)結(jié)果：

后臺(tái)數(shù)據(jù)（JSON格式）?

代碼?

TIP：

因?yàn)橐笤诩虞d完頁(yè)面后異步請(qǐng)求數(shù)據(jù)，所以在Vue生命周期中的mounted（掛載）鉤子函數(shù)里寫(xiě)獲得后臺(tái)數(shù)據(jù)的Axious代碼。

this.emps = result.data.data;這句代碼

1.result.data用來(lái)獲得服務(wù)器返回的數(shù)據(jù)

2.result.data.data表示獲得服務(wù)器返回的數(shù)據(jù)中的data數(shù)據(jù)（JSON文件中有名為data的數(shù)據(jù)）

3.this.emps?Vue中有數(shù)據(jù)->空的emps數(shù)組，用this.調(diào)用這個(gè)空數(shù)組（this指這個(gè)Vue）

4.可以直接用等號(hào)，將獲得數(shù)據(jù)賦給變量

柚子快報(bào)邀請(qǐng)碼778899分享：Ajax和其封裝的Axios

http://yzkb.51969.com/

推薦閱讀