当前位置：首页 > news >正文

javaweb -Ajax

news 来源：原创 2025/6/19 11:35:49

Ajax的定义

Ajax（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用的技术，允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分内容。

Ajax的核心特点

异步通信：通过后台与服务器交互，用户操作不受干扰。

局部刷新：仅更新页面特定部分，提升用户体验。

技术组合：依赖 JavaScript、XML（或 JSON）、HTML/CSS 和 XMLHttpRequest 对象。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

如上图，输入文字，浏览器根据文字给出对应的推荐内容，这就是一种异步交互。

同步请求的过程如下图

异步请求的过程如下图

Axios

使用原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

一、引入Axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

也可以下载一个axios的js文件放在目录中引用

入门程序

点击按钮时，使用Axios发送请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title>
</head>
<body><input type="button" value="获取数据GET" id="btnGet"><input type="button" value="操作数据POST" id="btnPost"><script src="js/axios.js"></script><script>//发送GET请求document.querySelector('#btnGet').addEventListener('click', () => {//axios发起异步请求axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',method:'GET'}).then((result)=>{console.log(result.data);//成功回调函数}).catch((error)=>{console.log(error);//失败回调函数`})})//发送POST请求document.querySelector('#btnPost').addEventListener('click', () => {axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',method:'POST'}).then((result)=>{console.log(result.data);//成功回调函数}).catch((error)=>{console.log(error);//失败回调函数`})})</script>
</body>
</html>

以下有个小程序可以凸显出axios的异步请求的特点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title>
</head>
<body><input type="button" value="获取数据GET" id="btnGet"><input type="button" value="操作数据POST" id="btnPost"><script src="js/axios.js"></script><script>//发送GET请求document.querySelector('#btnGet').addEventListener('click', () => {axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {console.log(result.data);})//异步输出（异步请求，此处不需要等待服务器，因此更快）console.log('异步输出');})//发送POST请求document.querySelector('#btnPost').addEventListener('click', () => {axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update',id='1').then((result) => {console.log(result.data);}).catch((err) => {});})</script>
</body>
</html>

当按下获取数据GET按钮时，axios的get方法启用，然后程序继续往下走，往控制栏里输出‘异步输出’，然后get方法获取到服务器端的数据，输出对应数据。

Vue的生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

其中我们需要重点关注的是mounted，其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender" v-model="searchForm.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" name="position" v-model="searchForm.job"><option value=""></option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="button" v-on:click="search">查询</button><button type="button" @click="clear">清空</button></form><!-- 表格展示区 --><table><!-- 表头 --><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体内容 --><tbody><tr v-for="(item, index) in empList" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.gender == 1 ?'男':'女'}}</td><!-- 插值表达式不能出现在标签内部，只能出现在标签属性中 --><td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td><td><span v-if="item.job==1">班主任</span><span v-else-if="item.job==2">讲师</span><span v-else-if="item.job==3">学工主管</span><span v-else-if="item.job==4">教研主管</span><span v-else-if="item.job==5">咨询师</span><span v-else>其他</span></td><!-- <td><span v-show="item.job==1">班主任</span><span v-show="item.job==2">讲师</span><span v-show="item.job==3">学工主管</span><span v-show="item.job==4">教研主管</span><span v-show="item.job==5">咨询师</span></td> --><td>{{item.entrydate}}</td><td>{{item.updatetime}}</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script src="js/axios.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchForm:{//封装用户输入的查询条件name:'',gender:'',job:''},empList:[]}},//定义方法methods: {async search(){//发送ajax请求获取数据// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {//     this.empList = result.data.data;// })// console.log('===========================');let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.empList = result.data.data;},clear(){this.searchForm={name:'',gender:'',job:''};this.search(); }},//钩子函数mounted() {//页面加载完成后，发送ajax请求获取数据this.search();},}).mount('#container')</script></body>
</html>