diff --git "a/21 \345\215\242\344\272\250\350\200\200/1.axios\347\232\204\344\275\277\347\224\250.md" "b/21 \345\215\242\344\272\250\350\200\200/1.axios\347\232\204\344\275\277\347\224\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a5b4ea580171b5b674bd444c3033e8ff3c926715
--- /dev/null
+++ "b/21 \345\215\242\344\272\250\350\200\200/1.axios\347\232\204\344\275\277\347\224\250.md"	
@@ -0,0 +1,186 @@
+##  1. axios 使用
+
+ 引入 axios.js: [https://cdn.jsdelivr.net/npm/axios@1.5.1/dist/axios.min.js](https://gitee.com/link?target=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Faxios%401.5.1%2Fdist%2Faxios.min.js)
+
+ 使用 axios 函数，传入配置对象，再用 **.then** 回调函数接收结果，并做后续处理
+
+```
+<script src="https://cdn.jsdelivr.net/npm/axios@1.5.1/dist/axios.min.js"></script>
+<script>
+axios({
+	url:'目的资源地址'
+}).then(result =>{
+	// 对服务器返回的数据做后续处理
+})
+ </script>
+```
+
+**URL ：统一资源定位器**，是因特网上标准的资源资源地址
+
+组成：
+
+ 协议（规定了浏览器与服务器传输数据的格式）
+
+ 域名（规定访问的是那个服务器）
+
+ 资源路径（标识资源的具体位置）
+
+**axios - 查询参数**
+
+语法：
+
+```
+<- 浏览器提供给服务器额外信息，获取对应的数据->
+<script>
+axios({
+	url:'目的资源地址',
+    params:{
+        //当属性名和值名 同名时可以只写一个，如：pname:pname, => pname,
+    	参数名: 值		// 如：pname:'福建省'
+	}	
+}).then(result =>{
+	// 对服务器返回的数据做后续处理
+})
+ </script>
+```
+
+注意：axios 在运行时把参数名和值，拼接到**url?pname=福建省**
+
+**常用请求方法**
+
+请求：
+
+```
+<script>
+axios({
+	url:'目的资源地址',
+    method: 'get',	    // method：请求方法，默认是 get 可以省略
+    params:{		   // params：查询参数
+    	参数名: 值		// 如：pname:'福建省'
+	}	
+}).then(result =>{
+	// 对服务器返回的数据做后续处理
+})
+ </script>
+```
+
+提交：
+
+```
+<script>
+axios({
+	url:'目的资源地址',
+    method: 'post',	    // post：表示提交数据
+   data: {			   // data：提交数据
+       参数名: 值
+   }
+}).then(result =>{
+	// 对服务器返回的数据做后续处理
+})
+ </script>
+```
+
+**axios 错误处理**
+
+场景：再次注册相同的账号，会遇到报错信息
+
+通过 ==catch== 方法，传入回调函数并定义形参
+
+```
+<button>注册账号</button>
+<script>
+    document.querySelector('button').addEventListener('click', () => {
+        axios({
+            url: 'http://hmajax.itheima.net/api/register',
+            method: 'post',
+            data: {
+                username: 'itheima001',
+                password: '123456'
+            }
+        }).then(result => {
+            //创建成功
+            console.log(result);
+        }).catch(error => {
+            //创建失败
+            console.log(error);
+            alert(error.response.data.message)
+        })
+    })
+</script>
+```
+
+## 2. HTTP 协议
+
+规定了浏览器发送及服务器返回内容的==格式==
+
+**HTTP协议 - 请求报文**：浏览器发送给服务器的内容
+
+组成：请求行、请求头、空行、请求体
+
+**HTTP协议 - 响应报文**：服务器按照 HTTP 协议要求的==格式==，返回给浏览器的==内容==
+
+组成：
+
+- ==响应行（状态行）==：协议、==HTTP 响应状态码==、状态信息
+- ==响应头==：以键值对的格式携带的附加信息，比如：==Content-Type==
+- 空行：分隔响应头，空行之后的是服务器返回的资源
+- ==响应体==：返回的资源
+
+### 作业
+
+##### 聊天机器人
+
+```js
+ <script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script>
+      // 获取机器人回答消息 - 接口地址: http://hmajax.itheima.net/api/robot
+      let num = 0
+      const chatTab = document.querySelector('.chat')
+    const chatList = document.querySelector('.chat_list')
+      document.querySelector('.send_img').addEventListener('click', (e) => {
+        let spoken = document.querySelector('.chat_input').value;
+        document.querySelector('.send_img').style.pointerEvents='none'
+        const chatMeUl = document.createElement('ul')
+        chatMeUl.innerHTML=`
+      <li class="right">
+          <span>${spoken}</span>
+          <img src="./assets/me.png" alt="">
+        </li>
+      `
+        chatTab.appendChild(chatMeUl)
+        chatTab.scrollTop= num+=126
+        axios({
+          method: 'get',
+          url: 'http://hmajax.itheima.net/api/robot',
+          params: { spoken }
+        })
+          .then((results) => {
+            
+            document.querySelector('.send_img').style.pointerEvents='auto'
+            const { text } = results.data.data.info
+            const chatItUl = document.createElement('ul')
+            chatItUl.innerHTML=`
+      <li class="left">
+        <img src="./assets/you.png" alt="">
+          <span>${text}</span>
+        </li>
+      `
+        chatTab.appendChild(chatItUl)
+       const lastList = document.querySelector('li')
+       chatTab.scrollTop= num+=126
+   ;
+          })
+          .catch()
+      })
+
+      console.log(chatList.scrollTop)
+      // 查询参数名: spoken
+      // 查询参数值: 我说的消息
+
+
+
+
+    </script>
+</body>
+```
+
diff --git "a/21 \345\215\242\344\272\250\350\200\200/XMLHttpRequest\345\257\271\350\261\241 Ajax.md" "b/21 \345\215\242\344\272\250\350\200\200/XMLHttpRequest\345\257\271\350\261\241 Ajax.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d3d8b5952dd34ef464287ec779226e8590c9f66e
--- /dev/null
+++ "b/21 \345\215\242\344\272\250\350\200\200/XMLHttpRequest\345\257\271\350\261\241 Ajax.md"	
@@ -0,0 +1,63 @@
+#### XMLHttpRequest 对象
+
+使用步骤：
+
+~~~ html
+<script>
+	// 1. 创建 XHP 对象
+ 	const xhr = new XMLHttpRequest()
+    // 2. 调用 open 方法，设置 URL 和 请求方法
+    xhr.open('请求方法','请求的URL网址')
+    // 3. 监听 loadend 事件（外部资源加载完毕），接收结果
+    xhr.addEventListener('loadend',() =>{
+        // 响应结果
+        log(xhr.response)
+    })
+    // 4. 调用 send 方法，发送请求
+    xhr.send()
+</script>
+~~~
+
+#### XMLHttpRequest - 数据提交
+
+通过 XHR 提交用户名和密码，完成注册功能
+
+~~~ html
+<button class="reg-btn">注册用户</button>
+<script>
+    // 1. 给按钮添加点击事件
+    document.querySelector('.reg-btn').addEventListener('click', () => {
+        // 2. 创建 XHR 对象
+        const xhr = new XMLHttpRequest()
+        // 3. 指定请求方法，URL地址
+        xhr.open('post', 'http://hmajax.itheima.net/api/register')
+        // 4. 添加 loadend 事件
+        xhr.addEventListener('loadend', () => {
+            // 返回的请求信息
+            console.log(xhr.response);
+        })
+
+        // 5. 设置请求头，告诉服务器内容类型（JSON字符串）
+        xhr.setRequestHeader('Content-Type', 'application/json')
+        // 6. 准备提交的数据
+        const userObj = {
+            username: 'itheima007',
+            password: '7654321'
+        }
+        // 7. 将该对象转换为 JSON字符串
+        const userStr = JSON.stringify(userObj)
+        // 8. 将字符串上传到服务器
+        xhr.send(userObj)
+    })
+</script>
+~~~
+
+#### xhr对象执行收发数据的五种状态：
+
+| 状态码 | 说明                                                         |
+| ------ | ------------------------------------------------------------ |
+| 0      | （**未初始化**）未启动                                       |
+| 1      | （**启动**）已经调用 open()，但尚未调用 send()               |
+| 2      | （**发送**）发送状态，已经调用 send()，但尚未接收到响应      |
+| 3      | （**接收**）已经接收到部分响应数据                           |
+| 4      | （**完成**）已经接收到全部响应数据，而且已经可以在浏览器中使用了 |
\ No newline at end of file