目录
在现代前端开发中，XMLHttpRequest 是一种用于与服务器进行异步交互的技术。在这篇介绍中，我们将通过一个简单的注册用户功能示例，学习如何使用 XMLHttpRequest 来提交数据。
目标
该示例展示了如何使用 XMLHttpRequest 发送一个 POST 请求，通过向服务器提交用户注册信息（如用户名和密码），实现用户注册的功能。
实现步骤
- 创建
XMLHttpRequest对象：首先，我们需要创建一个XMLHttpRequest对象，它用于与服务器进行交互。 - 配置请求：设置请求类型为 POST，指定请求的 URL 地址（这里我们使用了一个示例的注册接口）。
- 设置请求头：设置
Content-Type为application/json，告诉服务器请求体的数据格式为 JSON。 - 构建请求体：准备要提交的数据，通常是一个对象，表示用户的注册信息（如用户名和密码），然后将其转换为 JSON 字符串。
- 发送请求：通过
xhr.send()方法发送请求，传递 JSON 格式的用户数据。 - 监听请求响应：使用
loadend事件监听请求的完成，在响应中处理返回的结果（如成功或失败）。
代码实现
HTML 部分（界面）
首先，我们需要一个按钮来触发注册请求。在 HTML 中，只有一个按钮，点击后会触发用户注册的请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest_数据提交</title>
</head>
<body>
<button class="reg-btn">注册用户</button>
<script>
/**
* 目标：使用xhr进行数据提交-完成注册功能
*/
document.querySelector('.reg-btn').addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://hmajax.itheima.net/api/register');
xhr.addEventListener('loadend', () => {
// 处理响应数据
const data = JSON.parse(xhr.response);
console.log(data);
});
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 构建用户注册数据
const userObj = {
username: 'xiaoning12345',
password: 'abc123'
};
const userStr = JSON.stringify(userObj);
// 发送请求数据
xhr.send(userStr);
});
</script>
</body>
</html>
JavaScript 部分（逻辑）
- 事件绑定：通过
addEventListener给按钮绑定点击事件，在点击时触发注册请求。 - 创建
XMLHttpRequest对象：我们创建了一个XMLHttpRequest对象，使用open()方法配置为 POST 请求，并设置接口的 URL 地址。 - 设置请求头：通过
setRequestHeader方法设置请求头为Content-Type: application/json，告知服务器提交的数据是 JSON 格式。 - 准备数据：我们将用户的注册数据（用户名和密码）存储在一个对象中，并通过
JSON.stringify转换为 JSON 字符串。 - 发送请求：使用
xhr.send()方法将数据发送到服务器。 - 监听响应：通过
loadend事件监听请求的完成，获取服务器返回的数据，并使用JSON.parse解析响应内容，最终输出到控制台。
总结
这个示例展示了如何使用 XMLHttpRequest 发送带有 JSON 数据的 POST 请求。我们通过这个案例学习了如何与服务器交互，提交数据，并处理响应。这是一个基础的异步请求示例，适用于许多需要与后台进行数据交互的场景。