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] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E6=AC=A1=E4=BD=9C?=
 =?UTF-8?q?=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