一、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请求，默认请求方法为get
const 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 对象特性，一直串联下去
