AJAX与axios实战：从原理到应用
AJAX入门
定义：AJAX是异步的JavaScript和XML (Asynchronous JavaScript And XML) 。简单点说,就是使用XMLHttpRequest 对象与服务器通信。 它可以使用 JSON, XML, HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的"异步"特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据，或更新页面。
概念: AJAX是浏览器与服务器进行数据通信的技术
怎么用 AJAX?
- 先使用axios [ek’sious]库,与服务器进行数据通信
- 基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
- Vue、React 项目中都会用到 axios
- 再学习XMLHttpRequest对象的使用,了解AJAX底层原理
axios
语法：
- 引入 axios.js: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
- 使用 axios
- 函数传入配置对象
- 再用 .then 回调函数接收结果，并做后续处理
axios({
url:'目标资源地址'
}).then((result)=>{
// 对服务器返回的数据做后续处理
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class = "my-p"></p>
<!-- 1. 引用axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//2. 使用axios函数
axios({
url: "http://hmajax.itheima.net/api/province"
}).then(result => {
console.log(result)
// 多打印，确认属性名
console.log(result.data.list)
console.log(result.data.list.join('<br>'))
// 把准备好的省份列表，插入到页面
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>');
})
</script>
</body>
</html>
认识URL
什么是URL？
定义:统一资源定位符(英语: Uniform Resource Locator,缩写: URL,或称统一资源定位器、定位地址、URL地址) 俗称网页地址,简称网址,是因特网上标准的资源的地址(Address) ,如同在网络上的门牌。它最初是由蒂姆·伯纳 斯-李发明用来作为万维网的地址,现在它已经被万维网联盟编制为因特网标准RFC 1738它。
例如：
- 网页资源：https://www.baidu.com/index.html
- 图片资源：https//www.itheima.com/images/logo.png
- 数据资源：https//hmajax.itheima.net/api/province
- …
概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源
组成：协议 + 域名 + 资源路径
http//hmajax.itheima.net/api/province
-
协议：
http 协议：超文本传输协议,规定浏览器和服务器之间传输数据的格式http//hmajax.itheima.net/api/province- 协议范围：http，https, …
-
域名：标记服务器在互联网中的方位（必须）
- http//
hmajax.itheima.net/api/province
- http//
-
资源路径：标记资源在服务器下的具体位置
- http//hmajax.itheima.net
/api/province
- http//hmajax.itheima.net
URL 查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法: http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
axios-查询参数
语法：使用 axios 提供的 params 选项
注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值
城市列表: http://hmajax.itheima.net/api/city?pname=河北省
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/city', //'目标资源地址',
params: {
pname: '河北省' // 参数名：值
}
}).then(result => {
// 对服务器返回的数据做后续处理
console.log(result.data.list);
document.querySelector('p').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
</html>
请求方法
请求方法：对服务器资源，要执行的操作
| 请求方法 | 操作 |
|---|---|
| GET | 获取数据 |
| POST | 提交数据 |
| PATCH | 修改数据（部分） |
| PUT | 修改数据（全部） |
| DELETE | 删除数据 |
axios请求配置
- url：请求的 URL 网址
- method：请求的方法，GET可以省略（不区分大小写）
- data：提交数据
axios({
url: '目标资源地址' ,
method: '请求方法',
data: {
参数名：值
}
}).then(result =>{
// 对服务器返回的数据做后续处理
})
axios错误处理
语法:在 then方法的后面,通过点语法调用 catch方法,传入回调函数并定义形参
axios({
// 请求选项
}).then(result =>{
// 对服务器返回的数据做后续处理
}).catch(error => {
// 处理错误
})
HTTP协议 - 请求报文
HTTP协议：规定了浏览器发送及服务器返回内容的格式
请求报文：浏览器按照HTTP协议要求的格式,发送给服务器的内容
请求报文的格式
请求报文的组成部分有：
- 请求行：请求方法，URL,协议
- 请求头：以键值对的格式携带的附加信息，比如：Content-Type
- 空行：分隔请求头,空行之后的是发送给服务器的资源
- 请求体：发送的资源
HTTP协议 - 相应报文
响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容
- 响应行（状态行）：协议、HTTP 响应状态码、状态信息
- 响应头：以键值对的格式携带的附加信息,比如: Content-Type
- 空行：分隔响应头，空行之后的是服务器返回的资源
- 响应体：返回的资源
HTTP 响应状态码：用来表明请求是否成功完成
| 状态码 | 说明 |
|---|---|
| 1xx | 信息 |
| 2xx | 成功 |
| 3xx | 重定向消息 |
| 4xx | 客户端错误 |
| 5xx | 服务端错误 |
接口文档
接口文档：描述接口的文章
接口:使用AJAX和服务器通讯时,使用的URL,请求方法,以及参数
黑马前端接口文档：https://apifox.com/apidoc/project-1937884/doc-1695440
form-serialize
作用：快速收集表单元素的值
const form = document.querySelector('.example-form')
const data = serialize(form, {hash: true, empty: true})
BS 弹框
Bootstrap
- 功能：不离开当前页面,显示单独内容,供用户操作
- 步骤：
- 引入 bootstrap.css 和 bootstrap.js
- 准备弹框标签，确认结构
- 通过自定义属性，控制弹框的显示和隐藏
Bootstrap 弹窗
- 通过属性控制,弹框显示或隐藏
- 通过JS 控制，弹框显示或隐藏
图片上传
- 获取图片文件对象
- 使用FormData携带图片文件
- 提交表单数据到服务器，使用图片url网址
const fd = new FormData()
fd.append(参数名, 值)
AJAX原理
XMLHttpRequest
定义：XMLHttpRequest (XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX 编程中被大量使用。
关系：axios 内部采用 XMLHttpRequest 与服务器交互
好处：掌握使用 XHR 与服务器进行数据交互，了解 axios 内部原理
使用XMLHttpRequest
步骤：
- 创建 XMLHttpRequest 对象
- 配置请求方法和请求url地址
- 监听loadend事件，接收响应结果
- 发起请求
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求ur1网址')
xhr.addEventListener('loadend', () => {
// 响应结果
console.log(xhr.response)
})
xhr.send()
XMLHttpRequest - 查询参数
-
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
-
语法： http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
XMLHttpRequest- 数据提交
- 需求：通过XHR提交用户名和密码,完成注册功能
- 核心：
- 请求头设置Content-Type: application/json
- 请求体携带JSON字符串
const xhr = new XMLHttpRequest()
xhr.open('请求方法'，'请求ur1网址')
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
})
//告诉服务器,我传递的内容类型,是JSON字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 准备数据并转成JSON字符串
const user = {username: 'itheima007', password: '7654321' }
const userStr = JSON.stringify(user)
// 发送请求体数据
xhr.send(userstr)
Promise
- 定义：Promise 对象用于表示一个异步操作的最终完成(或失败)及其结果值。
- 好处：
- 逻辑更清晰
- 了解axios函数内部运作机制
- 能解决回调函数地狱问题
- 成功和失败状态，可以关联对应处理程序
- Promise 使用步骤：
//1. 创建Promise对象 const p = new Promise((resolve, reject) => { // 2.执行异步任务-并传递结果 // 成功调用：resolve(值) 触发 then(）执行 // 失败调用：reject(值） 触发 catch() 执行 }) //3. 接收结果 p.then(result =>{ // 成功1 ).catch(error => // 失败 )
Promise - 三种状态
-
作用：了解Promise对象如何关联的处理函数,以及代码执行顺序
-
概念：一个Promise对象,必然处于以下几种状态之一
状态 说明 待定(pending) 初始状态，既没有被兑现，也没有被拒绝 已兑现(fulfilled) 意味着，操作成功完成 已拒绝(rejected) 意味着，操作失败 -
注意： Promise对象一旦被兑现/拒绝就是已敲定了,状态无法再被改变
同步代码和异步代码
同步代码：
- 我们应该注意的是，实际上浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作,在上一行完成后才会执行下一行。这样做是很有必要的,因为每一行新的代码都是建立在前面代码的基础之上的。这也使得它成为一个同步程序。
- 逐行执行,需原地等待结果后,才继续向下执行。
异步代码：
- 异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果。
- 异步代码：调用后耗时,不阻塞代码继续执行(不必原地等待) ,在将来完成后触发一个回调函数
回调函数地狱：
- 需求：展示默认第一个省,第一个城市,第一个地区在下拉菜单中
- 概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
- 缺点：可读性差,异常无法捕获,耦合性严重,牵一发动全身
Promise - 链式调用
- 概念：依靠 then() 方法会返回一个新生成的 Promise 对象特性,继续串联下一环任务,直到结束
async 和 await
- 定义：async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例,并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。
async 和 await 错误捕获
-
使用
try...catch -
try…catch 语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。
-
语法：
try{ // 要执行的代码 } catch (error){ // error 接收的是错误信息 // try里代码如果有错误，直接进入这里执行 }
事件循环（EventLoop）
- 概念：JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型与其它语言中的模型截然不同,比如C和Java.
- 原因: JavaScript单线程(某一刻只能执行一行代码) ,为了让耗时代码不阻塞其他代码运行,设计了事件循环模型
- 定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环
宏任务与微任务
ES6之后引入了Promise对象,让JS引擎也可以发起异步
任务异步任务分为：
-
宏任务：由浏览器环境执行的异步代码
任务（代码） 执行所在环境 JS脚本执行事件（script） 浏览器 setTimeout/setinterval 浏览器 AJAX请求完成事件 浏览器 用户交互事件等 浏览器 -
微任务：由JS 引擎环境执行的异步代码
任务（代码） 执行所在环境 Promised对象.then() JS引擎 Promise本身是同步的，而then和catch回调函数是异步的
-
JavaScript内代码如何执行？
- 执行第一个script脚本事件宏任务,里面同步代码
- 遇到宏任务/微任务交给宿主环境,有结果回调函数进入对应队列
- 当执行栈空闲时，清空微任务队列，再执行下一个宏任务，从1再来
Promise.all静态方法
语法：
const p = Promise.all([Promise对象, Promise对象, ...])
p.then(result => {
// result结果：[Promise对象成功结果，Promise对象成功结果，...]
}).catch(error => {
//第一个失败的Promise对象，抛出的异常
})
验证码登录流程
- 目标:完成验证码登录,后端设置验证码默认为246810
- 原因：因为短信接口不是免费的，防止攻击者恶意盗刷
- 步骤：
- 在utils/request.js配置axios请求基地址
- 作用:提取公共前缀地址,配置后axios请求时都会baseURL + url
- 收集手机号和验证码数据
- 基于axios调用验证码登录接口
- 使用Bootstrap的Alert警告框反馈结果给用户
- 在utils/request.js配置axios请求基地址
token鉴权
- 概念：访问权限的令牌，本质上是一串字符串
- 创建：正确登录后，由后端签发并返回
- 作用：判断是否有登录状态等，控制访问权限
- 注意：前端只能判断 token 有无，而后端才能判断 token 的有效性
axios拦截器
- 需求：设置用户昵称
- 语法：axios 可以在 headers 选项传递请求头参数
axios({
url:'目标资源地址',
headers: {
Authorization: `Bearer $${localStorage.getItem('token')}`
}
})
- 问题：很多接口，都需要携带token令牌字符串d
- 解决：在请求拦截器统一设置公共headers选项
- axios请求拦截器：发起请求之前,触发的配置函数,对请求参数进行额外配置
富文本编辑器
-
富文本：带样式,多格式的文本,在前端一般使用标签配合内联样式实现
-
富文本编辑器：用于编写富文本内容的容器
-
目标：发布文章页,富文本编辑器的集成
-
使用： wangEditor 插件
-
步骤：参考文档
- 引入 CSS 定义样式
- 定义 HTML 结构
- 引入 JS 创建编辑器
- 监听内容改变,保存在隐藏文本域(便于后期收集)
HTML学习
Web移动端学习
JS基础学习
Web API学习
JS进阶学习
ajax学习
Node.js与Webpack学习
Git学习
vue学习—更新中
小程序学习—学习中
XML教学视频
扫一扫
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
