ajax：XMLHttpRequest基本使用

最新推荐文章于 2024-10-11 16:49:16 发布

听海边涛声

最新推荐文章于 2024-10-11 16:49:16 发布

阅读量219

点赞数 8

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/panghuangang/article/details/140378997

版权

说明

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

使用XMLHttpRequest的步骤：

创建XMLHttpRequest对象
配置请求方法和请求url地址。方法大小写都是可以的
监听loadend事件，接收响应结果
发起请求

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 配置请求方法 和 请求 url 地址
xhr.open('请求方法', '请求的url网址')
// 监听loadend 事件，接收响应结果
xhr.addEventListener('loadend', () => {
  // 响应结果处理
  console.log(xhr.response)
})
// 发起请求
xhr.send()

示例

目标：使用XMLHttpRequest，获取并展示省份的名字

<!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. 发起请求
    */
    // 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()

    // 2. 配置请求方法和请求 url 地址
    // 方法大小写都是可以的
    xhr.open('GET', 'https://hmajax.itheima.net/api/province')

    // 3. 监听 loadend 事件，接收响应结果
    xhr.addEventListener('loadend', () => {
      console.log('响应返回的消息：')
      console.log(xhr.response)
      // 将json字符串转换为对象
      const data = JSON.parse(xhr.response)
      // 将数组转换为字符串
      console.log('将数组转换为字符串:')
      console.log(data.list.join('<br>'))
      document.querySelector('.my-p').innerHTML = data.list.join('<br>')
    })

    // 4. 发起请求
    xhr.send()
  </script>
</body>

</html>