[JS]AJAX-CSDN博客

本文链接：https://blog.csdn.net/CSDN20221005/article/details/139190213

本节目标

了解ajax

什么是ajax
XmlHttpRedquest

什么是ajax

AJAX是异步的JavaScript和XML, 简单来说就是使用XMLHttpRequest对象与服务器通信

它可以使用JSON/XML/HTML/text文本等格式发送和接收数据
AJAX最吸引人的就是异步特性, 可以让我们在不刷新页面的情况下与服务器通信

XMLHttpRequest

XmlHttpRedquest(XHR) 对象用于与服务器交互, 也是axios的内部原理

基本使用

<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', function () {
      const data = JSON.parse(xhr.response).list.join('<br />')
      document.querySelector('.my_p').innerHTML = data

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

查询参数

<body>
  <p class="my_p"></p>

  <script>
    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    */
    const xhr = new XMLHttpRequest()
    // 手动拼接查询参数
    xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=山东省')

    xhr.addEventListener('loadend', function () {
      const data = JSON.parse(xhr.response).list.join('<br />')
      document.querySelector('.my_p').innerHTML = data
    })

    xhr.send()
  </script>
</body>

<script>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表(地区查询案例)
    */
    document.querySelector('.sel-btn').addEventListener('click', function () {
      const pname = document.querySelector('.province').value
      const cname = document.querySelector('.city').value
      // 查询参数
      const pObj = {
        pname,
        cname
      }
      // 格式化参数
      const paramsObj = new URLSearchParams(pObj)
      const queryString = paramsObj.toString()
      // 发起请求
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://hmajax.itheima.net/api/area?' + queryString)
      xhr.addEventListener('loadend', function () {
        const data = JSON.parse(xhr.response).list
        const resStr = data.map(item => {
          return `<li class="list-group-item">${item}</li>`
        }).join('')
        document.querySelector('.list-group').innerHTML = resStr
      })
      xhr.send()
    })
  </script>

URL编码解码: URL解码 URL编码在线URL解码/编码工具 iP138在线工具

请求体参数

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用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)
      })
      // 设置请求头(传参类型)
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 请求体参数(JSON)
      const data = JSON.stringify({
        username: 'wangzhen',
        password: '00000000'
      })
      //发请求并传参
      xhr.send(data)
    })
  </script>
</body>