目录
目标
步骤说明
完整代码：
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 部分
<!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 技术对前端开发非常重要，尤其在需要与服务器进行异步通信时。