XMLHttpRequest基本使用

最新推荐文章于 2025-06-20 22:15:06 发布

前端榴莲

最新推荐文章于 2025-06-20 22:15:06 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/lllcuigu/article/details/133705844

本文介绍了XMLHttpRequest的基本使用，包括GET和POST请求的实现，以及AJAX技术的应用。还讲解了如何进行URL编码和解码，以处理中文字符在HTTP请求中的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XMLHttpRequest基本使用

1.XMLHttpRequest（简称xhr）是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来了的

2.用xhr发起get请求

创建xhr对象
调用xhr. open（）函数
调用xhr. send（）函数
监听xhr.onreadystatechange事件

3.使用xhr发起post请求

创建xhr对象
调用xhr. open（）函数
设置Content-Type属性（固定写法）
调用xhr.send（）函数,同时指定要发送的数据
监听xhr.onreadystatechange事件

XMLHttpRequest - 基础使用

AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数
学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理

语法：

案例：获取所有省份列表并展示到页面上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
        </p>
        <script>
            // 1.创建xhr对象
            const xhr=new XMLHttpRequest()
            // 2.设置请求方法，请求url
            xhr.open('get','http://hmajax.itheima.net/api/province')
            // 3.监听loadend事件，接收响应结果
            xhr.addEventListener('loadend',()=>{
                // 将返回的json结果转化成js数组
                const res=JSON.parse(xhr.response)
                console.log(res)
                // 插入p标签,在数组每个元素后加入<br>
                document.querySelector('p').innerHTML=res.list.join('<br>')
            })
            //4.调用方法
            xhr.send()
        </script>
    </body>
</html>

XMLHttpRequest数据提交

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用xhr进行数据提交-完成注册功能
     * POST http://hmajax.itheima.net/api/register
     * Body 参数(application/json)
     * username
     * password
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 1. 创建 xhr 对象
      const xhr = new XMLHttpRequest()
      // 2. 设置请求方法和 url
      xhr.open('post', 'http://hmajax.itheima.net/api/register')
      // 3. 监听 loadend 事件获取响应
      xhr.addEventListener('loadend', () => {
        const res = JSON.parse(xhr.response)
        console.log(res)
      })
      // 4. 设置请求头
      // 参数1: 键
      // 参数2: 值
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 5. 发请求 -> 携带参数
      const user = {
        username: 'mrdrager123',
        password: '123456'
      }
      //将数据转化为json格式
      xhr.send(JSON.stringify(user))
    })
  </script>
</body>