💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
前言
本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习AJAX的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，希望广大网友一起监督学习，互相进步!
目录
1. Bootstrap 弹框_属性控制
1.1 什么是 Bootstrap 弹框？
不离开当前页面，显示单独内容，供用户操作
1.2 如何使用 Bootstrap 弹框呢？
-
先引入 bootstrap.css 和 bootstrap.js 到自己网页中
-
准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系 官方文档
-
通过自定义属性，通知弹框的显示和隐藏，语法如下：
<button data-bs-toggle="modal" data-bs-target="css选择器">
显示弹框
</button>
<button data-bs-dismiss="modal">Close</button>
完整代码:
<!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>Bootstrap 弹框</title>
<!-- 引入bootstrap.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--
目标：使用Bootstrap弹框
1. 引入bootstrap.css 和 bootstrap.js
2. 准备弹框标签，确认结构
3. 通过自定义属性，控制弹框的显示和隐藏
-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
显示弹框
</button>
<!--
弹框标签
bootstrap的modal弹框，添加modal类名（默认隐藏）
-->
<div class="modal my-box" tabindex="-1">
<div class="modal-dialog">
<!-- 弹框-内容 -->
<div class="modal-content">
<!-- 弹框-头部 -->
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 弹框-身体 -->
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<!-- 弹框-底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</body>
</html>2. Bootstrap 弹框_JS控制
为什么需要 JS 方式控制呢？
-
当我显示之前，隐藏之前，需要执行一些 JS 逻辑代码，就需要引入 JS 控制弹框显示/隐藏的方式了
-
例如：
-
点击编辑姓名按钮，在弹框显示之前，在输入框填入默认姓名
-
点击保存按钮，在弹框隐藏之前，获取用户填入的名字并打印
-
语法:
// 创建弹框对象
const modalDom = document.querySelector('css选择器')
const modal = new bootstrap.Modal(modelDom)
// 显示弹框
modal.show()
// 隐藏弹框
modal.hide()什么时候用属性控制，什么时候用 JS 控制 Bootstrap 弹框的显示/隐藏?
直接出现/隐藏用属性方式控制，如果需要先执行一段 JS 逻辑再显示/隐藏就用 JS 方式控制
3. 图片上传
-
什么是图片上传？
-
就是把本地的图片上传到网页上显示
-
-
图片上传怎么做？
-
先依靠文件选择元素获取用户选择的本地文件，接着提交到服务器保存，服务器会返回图片的 url 网址，然后把网址加载到 img 标签的 src 属性中即可显示
-
-
为什么不直接显示到浏览器上，要放到服务器上呢？
-
因为浏览器保存是临时的，如果你想随时随地访问图片，需要上传到服务器上
-
-
图片上传怎么做呢？
-
先获取图片文件对象
-
使用 FormData 表单数据对象装入（因为图片是文件而不是以前的数字和字符串了所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递（可以查看请求体-确认请求体结构）
const fd = new FormData() fd.append(参数名, 值) -
提交表单数据对象，使用服务器返回图片 url 网址
-
案例:
<!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>图片上传</title>
</head>
<body>
<!-- 文件选择元素 -->
<input type="file" class="upload">
<img src="" alt="" class="my-img">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/**
* 目标：图片上传，显示到网页上
* 1. 获取图片文件
* 2. 使用 FormData 携带图片文件
* 3. 提交到服务器，获取图片url网址使用
*/
// 文件选择元素->change改变事件
document.querySelector('.upload').addEventListener('change', e => {
// 1. 获取图片文件
console.log(e.target.files[0])
// 2. 使用 FormData 携带图片文件
const fd = new FormData()
fd.append('img', e.target.files[0])
// 3. 提交到服务器，获取图片url网址使用
axios({
url: 'http://hmajax.itheima.net/api/uploadimg',
method: 'POST',
data: fd
}).then(result => {
console.log(result)
// 取出图片url网址，用img标签加载显示
const imgUrl = result.data.data.url
document.querySelector('.my-img').src = imgUrl
})
})
</script>
</body>
</html>
4. XMLHttpRequest - 基础使用
-
AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
-
axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数
-
学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理
语法:
XHR使用步骤
- 1. 创建 XHR 对象
- 2. 调用 open 方法，设置 url 和请求方法
- 3. 监听 loadend 事件，接收结果
- 4. 调用 send 方法，发起请求
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
const data = JSON.parse(xhr.response) //json转对象 因为这里是原生的，没有进行封装过
console.log(data.list.join('<br>'))
document.querySelector('.my-p').innerHTML = data.list.join('<br>')
})5. XMLHttpRequest - 数据提交
-
注意1：但是这次没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用
-
注意2：没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换
-
注意3：原生 XHR 需要在 send 方法调用时，传入请求体携带
核心代码如下:
document.querySelector('.reg-btn').addEventListener('click', () => {
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://hmajax.itheima.net/api/register')
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
})
// 设置请求头-告诉服务器内容类型（JSON字符串）
xhr.setRequestHeader('Content-Type', 'application/json')
// 准备提交的数据
const userObj = {
username: '大学生小郑是帅哥111',
password: '12345678'
}
const userStr = JSON.stringify(userObj)
// 设置请求体，发起请求
xhr.send(userStr)
})
6. Promise
-
什么是 Promise ？
-
Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值
-
-
Promise 的好处是什么？
-
逻辑更清晰（成功或失败会关联后续的处理函数）
-
了解 axios 函数内部运作的机制
-
能解决回调函数地狱问题
-
-
Promise 管理异步任务，语法怎么用？
- 1. new Promise 对象执行异步任务
- 2. 用 resolve 关联 then 的回调函数传递成功结果
- 3.用 reject 关联 catch 的回调函数传递失败结果
// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {
// 2. 执行异步任务-并传递结果
// 成功调用: resolve(值) 触发 then() 执行
// 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
// 成功
}).catch(error => {
// 失败
})7. Promise 的状态
Promise 有哪三种状态？
待定（pending）：初始状态，既没有被兑现，也没有被拒绝
已兑现（fulfilled）：操作成功完成
已拒绝（rejected）：操作失败
Promise 的状态改变有什么用：调用对应函数，改变 Promise 对象状态后，内部触发对应回调函数传参并执行
注意：每个 Promise 对象一旦被兑现/拒绝，那就是已敲定了，状态无法再被改变
❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
