一、Bootstrap弹框
功能：不离开当前页面，显示单独内容，供用户操作
步骤：
- 引入bootstrap.css和bootstrap.js
- 准备弹框标签，确认结构
- 通过自定义属性，控制弹框显示和隐藏
在
<head>部分添加：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
在
<body>结束前添加：
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
bootstrap的modal弹框：添加modal类名（默认隐藏）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body><!-- 官网引入：https://v4.bootcss.com/docs/components/modal/ --><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></body>
</html>
二、图片上传
- 获取图片文件对象
- 使用FormData携带图片文件
- 提交表单数据到服务器，使用图片url网址
三、 XMLHttpRequest
定义：XHR对象用于与服务器交互，在AJAX编程中被大量使用
步骤：
- 创建XHR对象
- 配置请求方法和请求URl地址
- 监听loadend事件，接收响应结果
<body><script>const xhr = new XMLHttpRequest()xhr.open('GET','http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend',() => {console.log(xhr.response)//对响应结果做后续处理})xhr.send()</script>
</body>四、认识Promise
Promise：用于表示一个异步操作的最终完成（或失败）及其结果值
成功和失败状态，可以关联对应处理程序
成功调用：resolve（值）触发then（）执行
失败调用：reject（值）触发catch（）执行
<script>/*** 使用Promise管理异步任务*/ //1.创建Promise对象const p = new Promise((resolve,reject) => {//2.执行异步代码setTimeout(() => {resolve('成功')},2000)})//3.获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})</script>五、Promise三种状态
一个Promise对象，必然处于以下几种状态之一：
待定（pending）：初始状态，既没有被兑现，也没有被拒绝
已兑现（fulfilled）：操作成功完成
已拒绝（rejected）：操作失败
Promise对象一旦被兑现/拒绝，就是已敲定，状态无法再被改变
六、封装axios函数
<body><p class="my-p"></p><script>//1.定义myaxios函数，接收配置对象，返回Promise对象function myAxios(config) {return new Promise((resolve,reject) => {//2.发起xhr请求，默认请求方法为getconst xhr = new XMLHttpRequest()xhr.open(config.method || 'GET',config.url)xhr.addEventListener('loadend',() => {//3.调用成功/失败的处理程序if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}//4.使用myaxios函数，获取省份列表展示myAxios({url: 'http://hmajax.itheima.net/api/province'//其他不写，对于上面的get}).then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {console.log(error)document.querySelector('.my-p').innerHTML = error.message})</script>
</body>七、 同步代码和异步代码
同步代码：逐行执行，需原地等待结果后，才继续向下执行
异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数；例如setTimeout就是一个异步代码。
JS中的异步代码：
- setTimeout/setInterval
- 事件
- AJAX
异步代码依靠回调函数接收结果
八、Promise——链式调用
使用then函数返回新Promise 对象特性，一直串联下去