一、Ajax原理
1.1 ajax原理-XMLHttpRequest
![](https://img-blog.csdnimg.cn/direct/2ad45c8f52d8478e928a8d1b08b69a6f.png)
1.2 使用XMLHttpRequest
![](https://img-blog.csdnimg.cn/direct/0b0e422815714355a9489cd14b07feb0.png)
小结
![](https://img-blog.csdnimg.cn/direct/b1d144a56fb34ead8fa966c3b6787538.png)
1.3 XMLHttpRequest-查询参数
![](https://img-blog.csdnimg.cn/direct/56e367ccdcc8486ab3d4757c50cbbbdf.png)
案例:地区查询 XMLHttpRequest数据获取
![](https://img-blog.csdnimg.cn/direct/778aab467b474468991e0f136233430a.png)
1.4 XMLHttpRequest-数据提交
![](https://img-blog.csdnimg.cn/direct/247b8b58facf4a9dae7971702f06b326.png)
1.5 Promise
![](https://img-blog.csdnimg.cn/direct/c141eee387db4963a70b16829c0cda0d.png)
小结
![](https://img-blog.csdnimg.cn/direct/d9b2bb23e850460fb847b8f0a3c1f556.png)
1.6 Promise 三种状态
![](https://img-blog.csdnimg.cn/direct/0be9a6ee6ee14dff9e54c7eaabcbea08.png)
案例:使用Promise +XHR 获取省份列表
![](https://img-blog.csdnimg.cn/direct/dd0026747a0248608d9620ba13bfa67f.png)
1.7 封装_简易axios_获取省份列表
![](https://img-blog.csdnimg.cn/direct/0efc3b501c2b46e7ad0c42b4c2795ecb.png)
1.8 封装_简易axios_获取地区列表
![](https://img-blog.csdnimg.cn/direct/75d80f7dd53c41e79e8e8140a522bea1.png)
1.9 封装_简易axios_注册用户
![](https://img-blog.csdnimg.cn/direct/086ccb56bef64dd0bc0480d3393511f2.png)
1.10 案例:天气预报
![](https://img-blog.csdnimg.cn/direct/65cd19ef8467417bbc7a8311ee7d7eb7.png)
二、ajax进阶
2.1 同步代码和异步代码
![](https://img-blog.csdnimg.cn/direct/66b45c8efa1a48b4a9286d3d3140ca63.png)
小结
![](https://img-blog.csdnimg.cn/direct/8130fa9bffd94de1954be9333f86a234.png)
2.2 回调函数地狱
![](https://img-blog.csdnimg.cn/direct/e89596097d764657b793b6ee6ae8335b.png)
小结
![](https://img-blog.csdnimg.cn/direct/7fa2456ffe3c42a0b6361582a6481e31.png)
2.3 Promise-链式调用
![](https://img-blog.csdnimg.cn/direct/9be7f24f3e73495f89ed6b7c593d7e32.png)
小结
![](https://img-blog.csdnimg.cn/direct/1747cbd12d8c4a3188bc8ae2eb8c0aae.png)
2.4 Promise链式应用
![](https://img-blog.csdnimg.cn/direct/cfdc719b82f548578f072967cf3f5f9b.png)
2.5 async函数和await关键字
![](https://img-blog.csdnimg.cn/direct/3516cb5dd35f4820915b69a14771e736.png)
2.6 async函数和await捕获错误
![](https://img-blog.csdnimg.cn/direct/5df120bdc727432ea4f82b332b529b8a.png)
2.7 认识-事件循环(EventLoop)
![](https://img-blog.csdnimg.cn/direct/d21872c30d724986a6a0837cc5422757.png)
![](https://img-blog.csdnimg.cn/direct/507e8454c97c4274b9d1b9aaf4d43530.png)
小结
![](https://img-blog.csdnimg.cn/direct/918f8016fa4949a0a43b6f298fc885d6.png)
2.8 事件循环-练习
2.9 宏任务与微任务
![](https://img-blog.csdnimg.cn/direct/0bb32058626a4c028ba962b2864de048.png)
![](https://img-blog.csdnimg.cn/direct/d11e9af851df45029b73afd0c8886a91.png)
小结
![](https://img-blog.csdnimg.cn/direct/bf25cb55f3014f938a106d6a140adb57.png)
2.10 promise.all静态方法
![](https://img-blog.csdnimg.cn/direct/0cc78c9aff68499ab135e38f19f39e0c.png)
案例:商品分类
![](https://img-blog.csdnimg.cn/direct/2778c8e820704f0a8f202f2f939a57ff.png)
案例:学习反馈-省市区切换
![](https://img-blog.csdnimg.cn/direct/0a3caf83989e4630be418c2d8d4da94e.png)
案例:学习反馈-数据提交
![](https://img-blog.csdnimg.cn/direct/f971259c24ff448eb80bde3fb05a12e6.png)