AJAX——ajax原理

1.XMLHttpRequest

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

关系：axios内部采用XMLHttpRequest与服务器交互

好处：掌握使用XHR与服务器进行数据交互，了解axios内部原理

2.使用XMLHttpRequest

步骤：

1.创建XMLHttpRequest对象

2.配置请求方法和请求url地址

3.监听loadend事件，接收响应结果

4.发起请求

需求：获取并展示所有省份名字


<!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('
'))
      document.querySelector('.my-p').innerHTML = data.list.join('
')
    })
 
    // 4.发起请求
    xhr.send()
  </script>
</body>
 
</html>

总结：

1.AJAX原理是什么？

XMLHttpRequest对象

2.为什么学习XHR？

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

3.XHR使用步骤？

创建XHR对象
调用open方法，设置url和请求方法
监听loadend事件，结构结果
调用send方法，发起请求

3.XMLHttpRequest-查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2


<!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="city-p"></p>
  <script>
    /**
     * 目标：使用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('
')
   })
 
   xhr.send()
  </script>
</body>
 
</html>

4.地区查询案例

需求：输入省份和城市名字，查询地区列表

请求地址：http://hmajax.itheima.net/api/area?参数名1=值1&参数名2=值2


<!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>案例_地区查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }
 
    body {
      padding-top: 15px;
    }
  </style>
</head>
 
<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
   // 1. 给查询按钮-点击事件
   document.querySelector('.sel-btn').addEventListener('click', () => {
    // 2. 收集省份和城市名字
    const pname = document.querySelector('.province').value
    const cname = document.querySelector('.city').value
 
    // 3.组织查询参数字符串
    const qObj = {
      pname,
      cname
    }
    // 查询参数对象 -> 查询参数字符串
    const paramsObj = new URLSearchParams(qObj)
    const queryString = paramsObj.toString()
    console.log(queryString)
 
    // 4.使用XHR对象，查询地区列表
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      console.log(data)
      const htmlStr = data.list.map(areaName => {
        return `<li class="list-group-item">${areaName}</li>`
      }).join('')
      console.log(htmlStr)
      document.querySelector('.list-group').innerHTML = htmlStr
    })
    xhr.send()
  })
  </script>
</body>
 
</html>

5.XMLHttpRequest-数据提交

需求：通过XHR提交用户名和密码，完成注册功能

核心：

请求头设置Content-Type：application/json

请求头携带JSON字符串


<!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>
  <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)
      })
 
      // 设置请求头-告诉服务器内容类型（JSON字符串）
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 准备提交的数据
      const userObj = {
        username:'itheima001',
        password:'7654321'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求头，发起请求
      xhr.send(userStr)
    })
  </script>
</body>
  
</html>

相关阅读:
【Matlab】数据统计分析
 C语言面试题 - 字符空间操作类
 自动驾驶：2022 apollo day 观后感（二）
【电子通识】USB TYPE-A 2.0/3.0连接器接口
 python之 pyCharm pip安装pandas库失败
 面试问题整理总结
 Android 使用Kotlin封装RecyclerView
数据库版本控制｜一文带你快速入门
 jQuery为元素绑定事件
 网络学习：BGP路径属性分类
原文地址：https://blog.csdn.net/weixin_48719464/article/details/138006585