From 8c3482f44d818c742aa9d8666f7ecbf6e0f72257 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E4=BA=A8=E8=80=80?= <2640788668@qq.com>
Date: Thu, 7 Dec 2023 13:33:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...tpRequest\345\257\271\350\261\241 Ajax.md" | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 "21 \345\215\242\344\272\250\350\200\200/XMLHttpRequest\345\257\271\350\261\241 Ajax.md"

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 0000000..d3d8b59
--- /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
-- 
Gitee


From d566be967c270fa741db560c7f78869190096da1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E4=BA=A8=E8=80=80?= <2640788668@qq.com>
Date: Fri, 8 Dec 2023 01:08:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E4=B8=80?=
 =?UTF-8?q?=E6=AC=A1=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...os\347\232\204\344\275\277\347\224\250.md" | 186 ++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 "21 \345\215\242\344\272\250\350\200\200/1.axios\347\232\204\344\275\277\347\224\250.md"

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 0000000..a5b4ea5
--- /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>
+```
+
-- 
Gitee