什么是XMLHttpRequest？及其详细使用说明

`XMLHttpRequest` 是一种浏览器提供的 JavaScript 对象，用于在不重新加载整个页面的情况下与服务器进行数据交互。它是实现 AJAX 技术的核心，用于发送异步请求并接收响应数据，常用于动态网页更新。本文介绍了 `XMLHttpRequest` 的基本使用，包括如何创建请求、配置请求方法和 URL、发送请求、监听响应、以及处理返回的数据。通过具体示例，展示了如何使用 `XMLH

还是鼠鼠

1694人浏览 · 2025-02-09 19:14:16

还是鼠鼠 · 2025-02-09 19:14:16 发布

什么是 XMLHttpRequest？

XMLHttpRequest 的基本使用流程：

示例一：使用 XMLHttpRequest 获取数据并显示

XMLHttpRequest 是一种浏览器内置的 JavaScript 对象，它允许浏览器与服务器进行异步通讯，从而无需刷新整个网页即可与服务器交换数据。XMLHttpRequest 最常用于 AJAX（Asynchronous JavaScript and XML）技术中，用来实现动态网页更新，提供更流畅的用户体验。

通过 XMLHttpRequest 对象，开发者可以向服务器发送请求并接收响应，而这些过程都是在后台进行的，用户不会察觉到页面的刷新或重载。最常见的应用场景包括：数据查询、提交表单、动态加载页面内容等。

`XMLHttpRequest` 的基本使用流程：

创建一个 XMLHttpRequest 对象；
配置请求方式（如 GET 或 POST）和请求的 URL 地址；
发送请求并监听服务器响应；
接收响应并处理数据。

示例一：使用 `XMLHttpRequest` 获取数据并显示

以下是一个简单的示例，演示如何使用 XMLHttpRequest 发送请求，获取数据并将其显示在网页上。

HTML 和 JavaScript 代码

<!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>

  <p class="my-p"></p>

  <script>
    /**
     * 目标：使用 XMLHttpRequest 对象与服务器进行通信，获取数据并展示
     * 1. 创建 XMLHttpRequest 对象
     * 2. 配置请求方法和 URL 地址
     * 3. 监听 loadend 事件，接收响应数据
     * 4. 发起请求
     */
    
    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();
    
    // 配置请求方式及 URL 地址
    xhr.open('GET', 'http://hmajax.itheima.net/api/province');
    
    // 监听请求结束事件
    xhr.addEventListener('loadend', () => {
      // 解析服务器返回的数据
      const data = JSON.parse(xhr.response);
      
      // 将数据展示在页面中
      document.querySelector('.my-p').innerHTML = data.list.join('<br>');
    });

    // 发送请求
    xhr.send();
  </script>
  
</body>

</html>

代码解释

创建 XMLHttpRequest 对象：
```
const xhr = new XMLHttpRequest();
```
这行代码创建了一个新的 XMLHttpRequest 对象，它将用于发送和接收数据。
配置请求方法和 URL：
```
xhr.open('GET', 'http://hmajax.itheima.net/api/province');
```
使用 open() 方法来配置请求。第一个参数是请求方法（在这里是 GET），第二个参数是请求的 URL 地址（该 URL 返回一个省份列表）。
监听 loadend 事件：
```
xhr.addEventListener('loadend', () => {
 const data = JSON.parse(xhr.response);
 document.querySelector('.my-p').innerHTML = data.list.join(' ');
});
```
loadend 事件在请求完成后触发。当服务器响应返回时，我们可以通过 xhr.response 获取响应的内容。然后将 JSON 格式的响应数据解析并显示在网页上。
发送请求：
```
xhr.send();
```
调用 send() 方法来实际发送请求到服务器。

示例二：发送带有查询参数的请求

XMLHttpRequest 不仅可以用于简单的 GET 请求，还可以携带查询参数（如搜索关键字、分类等）来获取特定的数据。以下是一个带有查询参数的请求示例。

HTML 和 JavaScript 代码

<!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>
  <p class="city-p"></p>

  <script>
    /**
     * 目标：使用 XMLHttpRequest 发送带有查询参数的 GET 请求，
     * 查询广东省的下属城市列表
     */
    const xhr = new XMLHttpRequest();
    
    // 配置 GET 请求，并携带查询参数
    xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=广东省');
    
    // 监听请求结束事件
    xhr.addEventListener('loadend', () => {
      // 解析服务器返回的数据
      const data = JSON.parse(xhr.response);
      
      // 将城市列表展示在页面中
      document.querySelector('.city-p').innerHTML = data.list.join('<br>');
    });
    
    // 发送请求
    xhr.send();
  </script>

</body>

</html>

代码解释

配置带查询参数的 GET 请求：
```
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=广东省');
```
在 GET 请求的 URL 后面附加了查询参数 pname=广东省，表示查询广东省下属的城市列表。
处理响应并展示城市列表：
```
document.querySelector('.city-p').innerHTML = data.list.join(' ');
```
当服务器返回数据后，将返回的城市列表以   标签连接并显示在页面中的  元素中。

`XMLHttpRequest` 的常用方法

open(method, url)：初始化一个请求，method 是请求方式（如 GET 或 POST），url 是请求的目标地址。
send()：发送请求。对于 GET 请求，可以直接调用 send()；对于 POST 请求，通常需要先设置请求体（如 send(data)）。
setRequestHeader(header, value)：设置请求头。用于发送请求时指定附加的 HTTP 头部信息。
addEventListener(event, callback)：监听事件，比如 loadend 事件，处理请求的完成。

总结

XMLHttpRequest 是实现异步请求和动态网页更新的基础工具，广泛用于现代网页应用中，尤其是在 AJAX 技术中。通过 XMLHttpRequest，开发者可以从服务器获取数据并更新网页，而无需重新加载整个页面。虽然 XMLHttpRequest 已经被较新的 Fetch API 所取代，但它仍然是学习和理解前端开发中异步请求的一个重要工具。

本示例展示了如何使用 XMLHttpRequest 进行基础的请求操作，以及如何携带查询参数向服务器发送 GET 请求，处理响应数据并动态更新页面内容。