• 博客主頁：音符猶如代碼
• 系列專欄：JavaWeb
• 關(guān)注博主，后期持續(xù)更新系列文章
• 如果有錯(cuò)誤感謝請(qǐng)大家批評(píng)指出，及時(shí)修改
• 感謝大家點(diǎn)贊👍收藏?評(píng)論??

Ajax的初識(shí)

意義：AJAX（Asynchronous JavaScript and XML）即異步 JavaScript 和 XML

作用：

• 數(shù)據(jù)交換：允許網(wǎng)頁在不重新加載整個(gè)頁面的情況下，從服務(wù)器獲取最新的數(shù)據(jù)。
• 異步交互：當(dāng)發(fā)送 AJAX 請(qǐng)求獲取數(shù)據(jù)時(shí)，頁面的其他操作和功能不會(huì)被阻塞，由于異步操作不需要等待數(shù)據(jù)返回就可以繼續(xù)執(zhí)行其他任務(wù)，能夠更有效地利用系統(tǒng)資源，特別是在處理耗時(shí)的網(wǎng)絡(luò)請(qǐng)求時(shí)。

原生Ajax:
官網(wǎng)文檔：AJAX - XMLHttpRequest 對(duì)象

//1. 創(chuàng)建新的 XMLHttpRequest 對(duì)象
var xmlHttpRequest  = new XMLHttpRequest();

//2. 發(fā)送異步請(qǐng)求
xmlHttpRequest.open('GET','http://~');
xmlHttpRequest.send();//發(fā)送請(qǐng)求

//3. 獲取服務(wù)響應(yīng)數(shù)據(jù)
xmlHttpRequest.onreadystatechange = function(){//此處判斷 4表示瀏覽器請(qǐng)求已完成就緒的響應(yīng)數(shù)量，200表示請(qǐng)求的狀態(tài)好是對(duì)的，沒有錯(cuò)誤if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}

上面是一個(gè)原生的Ajax的一個(gè)寫法，但是原生的Ajax太繁瑣甚至還有瀏覽器不兼容的問題，所以現(xiàn)在都是基于原生的Ajax的Axios

Axios

介紹：Axios是簡化的Ajax，對(duì)傳統(tǒng)的Ajax操作的簡化和改進(jìn)，也是一個(gè)更強(qiáng)大和便捷的http請(qǐng)求處理的工具

官網(wǎng)：Axios中文文檔 | Axios中文網(wǎng)

下邊是兩個(gè)來自官網(wǎng)的post的請(qǐng)求和get請(qǐng)求的代碼

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

const axios = require('axios');// 向給定ID的用戶發(fā)起請(qǐng)求
axios.get('/user?ID=12345').then(function (response) {// 處理成功情況console.log(response);}).catch(function (error) {// 處理錯(cuò)誤情況console.log(error);}).finally(function () {// 總是會(huì)執(zhí)行});// 上述請(qǐng)求也可以按以下方式完成（可選）
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).finally(function () {// 總是會(huì)執(zhí)行});  // 支持async/await用法
async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.error(error);}
}

//請(qǐng)求方式的別名(來自官網(wǎng))
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])