05.XMLHttpRequest(XHR)的基础使用,查询参数和数据提交

一.XMLHttpRequest - 基础使用

  1. AJAX 是浏览器与服务器通信的技术,采用 XMLHttpRequest 对象相关代码

  2. axios 是对 XHR 相关代码进行了封装,让我们只关心传递的接口参数

  3. 学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理

  4. 语法如下:

    js 复制代码
    const xhr = new XMLHttpRequest()
    xhr.open('请求方法', '请求url网址')
    xhr.addEventListener('loadend', () => {
      // 响应结果
      console.log(xhr.response)
    })
    xhr.send()
  5. 需求:以一个需求来体验下原生 XHR 语法,获取所有省份列表并展示到页面上

  6. 代码如下:

    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="my-p"></p>
      <script>
        /**
         * 目标:使用XMLHttpRequest对象与服务器通信
         *  1. 创建 XMLHttpRequest 对象
         *  2. 配置请求方法和请求 url 地址
         *  3. 监听 loadend 事件,接收响应结果
         *  4. 发起请求
        */
        // 1. 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest()
    
        // 2. 配置请求方法和请求 url 地址
        xhr.open('GET', 'http://hmajax.itheima.net/api/province')
    
        // 3. 监听 loadend 事件,接收响应结果
        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>')
        })
    
        // 4. 发起请求
        xhr.send()
      </script>
    </body>
    
    </html>

二.XMLHttpRequest - 查询参数

  1. 什么是查询参数:携带额外信息给服务器,返回匹配想要的数据

  2. 查询参数原理要携带的位置和语法:http://xxxx.com/xxx/xxx?参数名1=值1\&参数名2=值2

  3. 所以,原生 XHR 需要自己在 url 后面携带查询参数字符串,没有 axios 帮助我们把 params 参数拼接到 url 字符串后面了

  4. 需求:查询河北省下属的城市列表

  1. 核心代码如下:

    js 复制代码
    /**
     * 目标:使用XHR携带查询参数,展示某个省下属的城市列表
    */
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      console.log(data)
      document.querySelector('.city-p').innerHTML = data.list.join('<br>')
    })
    xhr.send()

三.XMLHttpRequest - 数据提交

  1. 了解原生 XHR 进行数据提交的方式

  2. 需求:通过 XHR 完成注册用户功能

  3. 步骤和语法:

    1. 注意1:但是这次没有 axios 帮我们了,我们需要自己设置请求头 Content-Type:application/json,来告诉服务器端,我们发过去的内容类型是 JSON 字符串,让他转成对应数据结构取值使用

    2. 注意2:没有 axios 了,我们前端要传递的请求体数据,也没人帮我把 JS 对象转成 JSON 字符串了,需要我们自己转换

    3. 注意3:原生 XHR 需要在 send 方法调用时,传入请求体携带

      js 复制代码
      const xhr = new XMLHttpRequest()
      xhr.open('请求方法', '请求url网址')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
      })
      
      // 1. 告诉服务器,我传递的内容类型,是 JSON 字符串
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 2. 准备数据并转成 JSON 字符串
      const user = { username: 'itheima007', password: '7654321' }
      const userStr = JSON.stringify(user)
      // 3. 发送请求体数据
      xhr.send(userStr)
  4. 核心代码如下:

    js 复制代码
    /**
     * 目标:使用xhr进行数据提交-完成注册功能
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
      })
    
      // 设置请求头-告诉服务器内容类型(JSON字符串)
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 准备提交的数据
      const userObj = {
        username: 'itheima007',
        password: '7654321'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求体,发起请求
      xhr.send(userStr)
    })

小结

1. AJAX 原理是什么?

window 提供的 XMLHttpRequest

2. 为什么学习 XHR ?

有更多与服务器数据通信方式,了解 axios 内部原理

3. XHR 使用步骤?

  1. 创建 XHR 对象 2. 调用 open 方法,设置 url 和请求方法 3. 监听 loadend 事件,接收结果 4. 调用 send 方法,发起请求

4. XHR 如何携带查询参数?

在调用 open 方法的时候,在 url? 后面按照指定格式拼接参数名和值

5. XHR 如何提交请求体数据?

在 send 中携带请求体数据,要按照后端要求的内容类型携带

相关推荐
十里-9 分钟前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada14 分钟前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚29 分钟前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After41 分钟前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好11 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd1 小时前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot
2501_938774291 小时前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen1 小时前
【CSS】CSS 面试知多少
前端·css
我血条子呢1 小时前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔2 小时前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端