主打一个实用
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
在上一篇的基础上还需要安装body-parser用于结构请求体中的内容
npm install body-parser
源码：
express.js
//引入express
const express = require('express');
const bodyParser = require('body-parser');
//创建应用对象
const app = express();
app.use(bodyParser.json());
//创建路由规则
//req是请求对象，是对请求报文的封装
//res是响应对象，是对响应报文的封装
app.get('/server/:name', (request, response) => {//获取路由参数const name = request.params.name;//获取查询参数idconst id = request.query.id;//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应体response.send(`HELLO AJAX GET ${id} ${name}`);
});app.all('/server', (request, response) => {//获取请求体参数const {str} = request.body;//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');//设置响应体response.send(`HELLO AJAX POST ${str}`);// response.send("HELLO AJAX POST");
});//监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...');
})
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>AJAX GET 请求</title><style>#result {width: 300px;height: 200px;border: solid 1px gray;}</style></head><body><button id="sendGetXhr">点击发送Get请求</button><button id="sendPostXhr">点击发送Post请求</button><div id="result"></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>const sendGetBut = document.getElementById("sendGetXhr");const sendPostBut = document.getElementById("sendPostXhr");const result = document.getElementById("result");axios.defaults.baseURL = "http://127.0.0.1:8000";//绑定点击事件sendGetBut.addEventListener("click", sendGetXhr);sendPostBut.addEventListener("click", sendPostXhr);// 发送axios Get请求function sendGetXhr() {axios.get("/server/jack", { params: { id: 999 } }).then((res) => {addContent(res.data)}).catch((err) => {console.log(err);});}// 发送axios Post请求function sendPostXhr() {axios.post("/server",{str: "post",},{params: {id: 200,vip: 9,},headers: {height: 100,weight: 180},}).then((res) => {addContent(res.data)}).catch((err) => {console.log(err);});}//在result中新增内容(换行)function addContent(content) {if(result.innerHTML.length !=0){result.innerHTML +='</br>';}result.innerHTML +=content;}
</script></body>
</html>效果演示:
由于axios库过于全面，一时不知道还有没有更新其他库的用法的必要了，后面学到了其它有用的内容再来更新该专栏🤣🤣🤣