目录
详细介绍：
完整代码：
总结：
这段代码展示了如何使用 XMLHttpRequest 对象实现基础的与服务器进行数据交互。通过这段代码，学习者可以理解如何向服务器发送请求并接收响应。
详细介绍：
-
HTML部分：在HTML中，我们使用了一个简单的
<p>标签来显示从服务器获取的数据。这部分HTML结构非常基础，只包含一个段落元素用于显示数据。<p class="my-p"></p> -
JavaScript部分：核心逻辑是在JavaScript部分实现的。我们使用了
XMLHttpRequest对象来发起请求，获取服务器返回的数据，并将其显示在页面上。- 创建 XMLHttpRequest 对象：首先，通过
new XMLHttpRequest()创建了一个新的 XMLHttpRequest 对象，这是与服务器进行通信的主要工具。
const xhr = new XMLHttpRequest();- 配置请求：使用
xhr.open()方法配置请求。这里我们指定了请求方法为GET，并给出了请求的 URL（http://hmajax.itheima.net/api/province），即获取省份数据的API地址。
xhr.open('GET', 'http://hmajax.itheima.net/api/province');- 监听
loadend事件：当请求完成（无论成功与否）时，会触发loadend事件。在该事件的回调函数中，我们使用xhr.response获取返回的数据。为了将返回的数据呈现给用户，我们先使用JSON.parse()将其转换为 JavaScript 对象，然后将list数组中的元素渲染到页面中。
xhr.addEventListener('loadend', () => {const data = JSON.parse(xhr.response);document.querySelector('.my-p').innerHTML = data.list.join('<br>'); });- 发起请求：使用
xhr.send()发送请求。send()方法没有参数，因为这是一个GET请求，不需要额外的数据发送给服务器。
xhr.send(); - 创建 XMLHttpRequest 对象：首先，通过
-
功能实现：
- 数据获取：从
http://hmajax.itheima.net/api/province获取的数据通常是一个包含省份列表的JSON对象。 - 数据渲染：当请求完成并且数据成功返回时，
data.list数组中的所有省份名称会被拼接成<br>标签分隔的文本，并显示在页面的<p>元素中。
- 数据获取：从
完整代码：
<!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. 发起请求*/const xhr = new XMLHttpRequest()xhr.open('GET','http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', () => {// console.log(xhr.response);const data = JSON.parse(xhr.response)// console.log(data.list.join('<br>'));document.querySelector('.my-p').innerHTML = data.list.join('<br>')})xhr.send()</script>
</body></html>
总结：
- XMLHttpRequest 是实现AJAX（Asynchronous JavaScript and XML）的传统方法之一，允许网页与服务器进行异步通信而无需重新加载页面。
- 通过这段代码，学习者可以掌握如何向服务器发送
GET请求并处理响应数据，进而渲染到页面中。 - 学会这种方式后，你可以实现动态数据加载、异步获取数据并实时更新页面内容的功能，极大提升了网页的用户体验。
这段代码简单易懂，适合初学者学习如何使用 XMLHttpRequest 进行数据交互。
