XMLHttpRequest基础使用

一、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>

运行结果如下：

image

二、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>

运行结果如下：

image

 

posted @ 2026-01-23 20:25  chenlight  阅读(9)  评论(0)    收藏  举报