- 博客主页：音符犹如代码
- 系列专栏：JavaWeb
- 关注博主，后期持续更新系列文章
- 如果有错误感谢请大家批评指出，及时修改
- 感谢大家点赞👍收藏⭐评论✍
Ajax的初识
意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML
作用：
- 数据交换：允许网页在不重新加载整个页面的情况下，从服务器获取最新的数据。
- 异步交互：当发送 AJAX 请求获取数据时，页面的其他操作和功能不会被阻塞，由于异步操作不需要等待数据返回就可以继续执行其他任务，能够更有效地利用系统资源，特别是在处理耗时的网络请求时。
原生Ajax:
官网文档：AJAX - XMLHttpRequest 对象
//1. 创建新的 XMLHttpRequest 对象
var xmlHttpRequest = new XMLHttpRequest();//2. 发送异步请求
xmlHttpRequest.open('GET','http://~');
xmlHttpRequest.send();//发送请求//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
//此处判断 4表示浏览器请求已完成就绪的响应数量，200表示请求的状态好是对的，没有错误
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
}
}
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios
Axios
介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具
官网：Axios中文文档 | Axios中文网
下边是两个来自官网的post的请求和get请求的代码
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});const axios = require('axios');
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 支持async/await用法
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}//请求方式的别名(来自官网)
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]])
