一、XMLHttpRequest基础使用的4大步骤如下：
<!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><script>/*** 目标：使用XMLHttpRequest对象与服务器通信* 1. 创建 XMLHttpRequest 对象* 2. 配置请求方法和请求 url 地址* 3. 监听 loadend 事件，接收响应结果* 4. 发起请求*/// 1、创建XMLHttpRequest 对象const xhr = new XMLHttpRequest();// 2、配置请求方法和请求 url 地址xhr.open('GET','https://jsonplaceholder.typicode.com/todos/1');// 3、监听 loadend 事件，接收响应结果xhr.addEventListener('loadend',() => {console.log(xhr.response)})// 4、发起请求xhr.send()</script>
</body></html>运行结果如下：
二、XMLHttpRequest（XHR）携带查询参数（URL 参数）的简单示例
XMLHttpRequest（XHR）携带查询参数（URL 参数）的简单示例，这是日常开发中 GET 请求最常用的场景，核心是把参数拼接到请求 URL 后，格式为 URL?参数1=值1&参数2=值2。一、基础示例（手动拼接参数）
这个示例展示最基础的用法：向服务器发送带
userId=1 和 completed=false 两个查询参数的 GET 请求，获取未完成的待办事项。// 1. 创建 XHR 对象
const xhr = new XMLHttpRequest();// 2. 定义基础 URL 和查询参数
const baseUrl = 'https://jsonplaceholder.typicode.com/todos';
// 拼接查询参数：注意 URL 后加 ?，参数间用 & 分隔
const queryParams = '?userId=1&completed=false';
const fullUrl = baseUrl + queryParams;// 3. 配置 GET 请求（第三个参数 true 为异步，默认值）
xhr.open('GET', fullUrl);// 4. 设置响应数据格式为 JSON（方便直接使用）
xhr.responseType = 'json';// 5. 监听请求成功
xhr.onload = function() {// 判断响应状态码是否成功（200-299 都算成功）if (xhr.status >= 200 && xhr.status < 300) {console.log('请求成功，返回数据：', xhr.response);} else {console.error('请求失败，状态码：', xhr.status);}
};// 6. 监听网络错误（如断网）
xhr.onerror = function() {console.error('网络错误，无法连接服务器');
};// 7. 发送请求（GET 请求 send 传 null 即可）
xhr.send(null);对应的html代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="./xhr参数示例.js"></script>
</body>
</html>运行结果如下：
