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

目录

目标

步骤说明

完整代码：

HTML 部分

代码解析：

总结：

---

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

目标

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

步骤说明

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

完整代码：

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('
') 使用 innerHTML 将城市列表渲染到页面上，以
标签作为分隔符，使每个城市显示在新的一行。

总结：

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

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