当前位置：首页 > article >正文

XMLHttpRequest的基础使用

article 2025/2/10 1:16:20

详细介绍：

完整代码：

总结：

这段代码展示了如何使用 XMLHttpRequest 对象实现基础的与服务器进行数据交互。通过这段代码，学习者可以理解如何向服务器发送请求并接收响应。

详细介绍：

HTML部分：在HTML中，我们使用了一个简单的标签来显示从服务器获取的数据。这部分HTML结构非常基础，只包含一个段落元素用于显示数据。
```

```
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(' ');
});
```
- 发起请求：使用 xhr.send() 发送请求。send() 方法没有参数，因为这是一个 GET 请求，不需要额外的数据发送给服务器。
```
xhr.send();
```
功能实现：
- 数据获取：从 http://hmajax.itheima.net/api/province 获取的数据通常是一个包含省份列表的JSON对象。
- 数据渲染：当请求完成并且数据成功返回时，data.list 数组中的所有省份名称会被拼接成   标签分隔的文本，并显示在页面的  元素中。

完整代码：

<!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 进行数据交互。

查看全文

http://www.kler.cn/a/538597.html