使用XMLHttpRequest发送带查询参数的 GET 请求并动态展示数据

目标

步骤说明

完整代码：

[HTML 部分](#HTML 部分)

代码解析：

总结：

在这个示例中，我们展示了如何使用 XMLHttpRequest 进行带有查询参数的 AJAX 请求。目标是通过 GET 请求向服务器传递参数，并获取与该参数相关的数据。以下是完整的代码和详细的讲解：

目标

使用 XMLHttpRequest 对象与服务器进行异步通信，并携带查询参数。
向服务器请求某个省的城市列表，展示广东省下属的所有城市。

步骤说明

创建 XMLHttpRequest 对象 ：首先我们创建了一个 XMLHttpRequest 对象，负责与服务器进行通信。
配置请求 ：使用 xhr.open() 方法配置请求，设置请求类型为 GET，并且添加查询参数 pname=广东省，请求 URL 是 http://hmajax.itheima.net/api/city?pname=广东省。
监听 loadend 事件 ：当请求完成后，监听 loadend 事件，获取服务器返回的数据。
解析 JSON 数据 ：通过 xhr.response 获取响应内容，将其解析为 JSON 格式，并提取城市列表。
动态更新页面 ：使用 innerHTML 将城市列表显示到 HTML 页面中的 p 标签中。

完整代码：

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>
  <p class="city-p"></p>
  <script>
    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    */
   const xhr = new XMLHttpRequest()
   // 这里是 GET 请求，并带有查询参数 pname=广东省
   xhr.open('GET','http://hmajax.itheima.net/api/city?pname=广东省')
   // 监听请求完成后的事件
   xhr.addEventListener('loadend', () => {
    // 将响应数据解析为 JSON 格式
    const data = JSON.parse(xhr.response)
    // 将城市列表显示到页面
    document.querySelector('.city-p').innerHTML = data.list.join('<br>')
   })
   // 发送请求
   xhr.send()
  </script>
</body>

</html>

代码解析：

XMLHttpRequest 对象 ：const xhr = new XMLHttpRequest() 创建了一个新的 XMLHttpRequest 对象，负责与服务器通信。
open() 方法 ：xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=广东省') 设定请求的 HTTP 方法为 GET，请求的 URL 为 'http://hmajax.itheima.net/api/city?pname=广东省'。这里的 pname=广东省 是我们传递给服务器的查询参数。
loadend 事件监听 ：xhr.addEventListener('loadend', () => { ... }) 监听请求结束事件，并在请求结束后执行回调函数。该函数将返回的响应（JSON 格式数据）解析并处理。
JSON 解析 ：const data = JSON.parse(xhr.response) 解析从服务器返回的 JSON 数据。
动态更新页面 ：document.querySelector('.city-p').innerHTML = data.list.join('<br>') 使用 innerHTML 将城市列表渲染到页面上，以 <br> 标签作为分隔符，使每个城市显示在新的一行。

总结：

该示例展示了如何使用 XMLHttpRequest 向服务器发送带有查询参数的请求，并展示如何在获取响应后动态地将数据渲染到页面中。在实际开发中，类似的技术可以用于与后端 API 交互，动态加载数据。

通过这个示例，你可以更好地理解如何使用 XMLHttpRequest 携带查询参数以及如何处理服务器返回的 JSON 数据。这种基本的 AJAX 技术对前端开发非常重要，尤其在需要与服务器进行异步通信时。