Ajax
什么是 ajax
- 一种由浏览器 发起 向 服务器 数据交互 的技术
- 全称是 Asynchronous Javascript And XML 翻译为 异步 js 和 xml
同步 & 异步
- 同步是 一种 阻塞 方式的代码执行过程
代码按照正常顺序就是 阻塞
console.log(1)
console.log(2)
- 异步是 一种 非阻塞 方式的代码执行过程 如 ajax、setInterval、setTimeout
console.log(0);
setInterval(() => {
console.log(2);
}, 1000);
console.log(1);
XML
一种类似html的数据格式，表示 数据是以 xml格式 在服务器和浏览器上进行传输的。 网络传输数据的格式可以大概理解为
- XML
- JSON 目前的主流方式
XML
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
JSON
JSON 目前的主流方式 - json 是一种类似对象的字符串
json 的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式
"{"name":"菜鸟教程","url":"www.runoob.com","slogan":"学的不仅是技术，更是梦想！"}"
浏览器和服务器交互的流程
- 浏览器负责发起请求
- 服务器负责响应请求
发起ajax的三大关键
- 请求地址 （URL）
告诉浏览器去哪个服务器地址和服务器交互数据
- 请求方式
让浏览器选择合适的方式和服务器交互
3.请求参数
1 可以告诉浏览器想要查询 手机中的 比如苹果 或者 华为
2 又或者做注册时 可以把数据提交给服务器
请求地址
请求地址主要是由后端程序员提供给前端工程师的使用的。 一般会通过文档的方式来告诉前端。
文档地址
https://docs.apipost.cn/preview/f62dc0b91dc8d8ea/c31d9a50dccf65e3?target_id=de83b57c-d2bc-44ba-9401-f5fa7b060cce#3a601b5f-1d2f-4657-97d1-f807c1e9953f
请求方式
发起ajax的5种方式
序号 请求方式 描述
- POST 向服务器新增数据
- GET 从服务器获取数据
- DELETE 删除服务器上的数据
- PUT 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
- PATCH 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
请求参数
某些数据，必须要传递规定给到服务器，才能成功获取到对应的数据
- 做注册时，你不传递个人信息给服务器，服务器无法办法登记你信息完成注册
- 做查询数据时，查询华为手机，你不传递如型号、价格、配置，服务器也无法给你返回合适的数据
工作中使用ajax的方式
- 原生底层的ajax
- 基于 ajax封装的js库 （axios，jquery）
- 面向现代浏览器的fetch
axios
中文官网地址：https://www.axios-http.cn/
英文官网地址：https://www.npmjs.com/package/axios
介绍
GET请求（不带参数）
- 可以在 url上来指定
- 可以通过 params 来指定
返回值介绍
可以在 url上传递
可以通过 params 来传递
GET 请求 （多个参数）
- 可以在 url 上来指定 /api/getbooks?bookname=红楼梦&author=曹雪芹
- 可以通过 params 来指定
可以在 url上传递
可以通过 params 来传递
params 只是让我们可以传递对象格式的参数，axios底层还是会把它转成 url的方式
POST 请求
在 axios 中，发送 post 请求时，需要在 data 中来传递参数
DELETE 请求
DELETE 请求 携带的参数 类似 GET 请求，需要在 params 中或者 url 上来添加
PUT 和 PATCH 请求
以上两个请求和 POST 请求类似，都是在 data 上 传递数据
form表单
阻止表单的默认行为
当一个form标签中出现以下几个按钮，点击按钮时，会导致页面刷新
<form action="">
<button>会刷新</button>
<button type="button">会刷新</button>
<input type="submit" value="会刷新" />
</form>
解决方案
- 给按钮设置 type = "button"
- 给 form 绑定 submit 事件，然后在事件中阻止默认行为
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止默认行为
console.log('不刷新了');
});
使用JQuery快速获取表单值
如果表单的字段比较多了，我们使用传统方式按个获取表单的值会很麻烦
这个时候可以借助 jQuery 中的 序列化 serialize方法来快速获取表单数据 serialize 返回的是 a=1&b=2&c=3的数据格式
序列化，其实就是一种把数据 转成字符串的 说法而已
<body>
<form>
<input id="bookname" type="text" placeholder="请输入书名" />
<input id="author" type="text" placeholder="请输入作者" />
<input id="publisher" type="text" placeholder="请输入出版社" />
<button>提交</button>
</form>
<script src="./jquery.js"></script>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止默认行为
const query=$("form").serialize();
});
</script>
</body>
原生js获取表单值
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const fd = new FormData(this); // this = form dom元素
const usp = new URLSearchParams(fd);
const query = usp.toString();
console.log(query);
});
</script>
axios请求方式的简写
在实际开发中，常用的 5 种请求方式分别是：
GET、POST、PUT、PATCH、DELETE
为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
-
axios.patch(url[, data[, config]])
axios 基地址和拦截器
基地址
方便我们后期统一修改 URL
修改前
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
})
修改后
axios.defaults.baseURL = 'http://www.itcbc.com:3006';
axios({
url: '/api/getbooks',
method: 'GET',
})
