Web开发 Ajax 2024/3/31
Ajax
异步的Javascript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
原生Ajax
1.准备数据地址
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div>
</body>
<script>
// 1.创建XMLHttpRequest
var xmlHttpRequest=new XMLHttpRequest();
//2.发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();
//3.获取服务响应数据
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;
}
}
</script>
</html>Axios
对原生的Ajax进行了封装，简化书写，快速开发。
Axios入门
1.引入Axios的js文件
2.使用Axios发送请求，并获取响应结果
axios({
method:"get",
url:"xxx"
}).then((result)=>{
console.log(result.data);
}); axios({
method:"post",
url:"xxx",
data:"id=1"
}).then((result)=>{
console.log(result.data);
});前后端分离开发
api接口文档
帮助实现前后端分离
YApi 接口文档管理平台
1.添加项目
2.添加分类
3.添加接口
mock服务
为前端生成测试数据
前端工程化
是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
vue-cli
是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境：NodeJS