五分钟学会使用AJAX的基础逻辑（axios和AJAX区别）

本文链接：https://blog.youkuaiyun.com/jk0025/article/details/139708649

五分钟学会使用AJAX的基础逻辑

AJAX相信大家都不陌生，而axios对于大家也都经常使用了

可是axios究竟和AJAX有什么关心呢？

读完这篇文章，相信你就明白了。

首先，让我们来看一看axios的逻辑代码

如下是一个使用axios简单上传个人信息网页的案例

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
 
<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">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>个人信息设置</title>
</head>

 <!-- 第一步 信息渲染  -->
<!--  -->

<body>
  <!-- toast 提示框 -->
  <div class="toast my-toast" data-bs-delay="1500">
    <div class="toast-body">
      <div class="alert alert-success info-box">
        恭喜您！操作成功
      </div>
    </div>
  </div>
  <!-- 核心内容区域 -->
  <div class="container">
    <ul class="my-nav">
      <li class="active">Yeezy基本设置</li>
      <li>安全设置</li>
      <li>账号绑定</li>
      <li>新消息通知</li>
    </ul>
    <div class="content">
      <div class="info-wrap">
        <h3 class="title">基本设置</h3>
        <form class="user-form" action="javascript:;">
          <!-- 完成form-serialize整合数据对象的前提两个必要条件:1.必须是在form表单里2.input的name属性-->
          <div class="form-item">
            <label for="email">邮箱</label>
            <input id="email" name="email" class="email" type="text" placeholder="请输入邮箱" autocomplete="off">
          </div>
          <div class="form-item">
            <label for="nickname">昵称</label>
            <input id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入昵称" autocomplete="off">
          </div>
          <div class="form-item">
            <label>性别</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="0">男</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="1">女</label>
          </div>
          <div class="form-item">
            <label for="desc">个人简介</label>
            <textarea id="desc" name="desc" class="desc" placeholder="请输入个人简介" cols="20" rows="10" autocomplete="off"></textarea>
          </div>
          <button class="submit">提交</button>
        </form>
      </div>
      <div class="avatar-box">
        <h4 class="avatar-title">头像</h3>
          <img class="prew" src="./img/头像.png" alt="">
          <label for="upload">更换头像</label>
          <input id="upload" type="file" class="upload">
      </div>
 
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
  <script src="./js/form-serialize.js"></script>
  <!-- 核心逻辑 -->
  <script src="./js/index.js"></script>
</body>
 
</html>

// 信息渲染

// 个人信息设置界面

// 自己的用户信息，给自己起一个外号，告诉服务器我是谁，获取对应用户信息

// 渲染个人信息到页面上

// 定义全局变量


const creator='老胡'
axios({
    url:'http://hmajax.itheima.net/api/settings',
    params:{
      creator
    } 
}).then(result=>{
    
    const userObj = result.data.data
    console.log(userObj);

    // 1.2 数据回显 

    // 1.3 遍历对象属性 

    Object.keys(userObj).forEach(keys=>{

        // 在性别里需要添加checked=true
        // img图片需要进行特殊的处理，img需要做一些特殊处理，性别单选框也要做特殊处理
   if(keys === 'avatar'){
    // 单独赋予默认头像

    document.querySelector('.prew').src= userObj[keys]
    
   }else if(keys ==='gender'){

    // 获取性别单选框
    const genderList = document.querySelectorAll('.gender')
    //获取到性别数字
    const sex = userObj[keys]
    
    genderList[sex].checked = true
//    }else{
//     document.querySelector(`.${keys}`).value= userObj[keys]
//    }
   }

    })


})
document.querySelector('.upload').addEventListener('change',e=>{
    console.log(e.target.files[0]);

    // 2.1 获取头像文件
    
    // 新建一个formData对象
    const formdata  = new FormData()
    formdata.append('avatar',e.target.files[0],)
    formdata.append('creator',creator)
    console.log(formdata);

    //修改个人头像接口

    axios({
        url:'http://hmajax.itheima.net/api/avatar',
        method:'PUT',
        data:formdata

    }).then(result=>{
        console.log(result);
        const imgUrl = result.data.data.avatar
        document.querySelector('.prew').src=imgUrl
    })

})

document.querySelector('.submit').addEventListener('click',e=>{
    // 提交用户信息修改

    // 点击之后收集用户更新的表单数据

    //使用form-serialize插件

    const userform = document.querySelector('.user-form')

  const userdataList = serialize(userform,{hash:true,empty:false})

    // 新增属性 creator
    userdataList.creator = creator
    // 测试


    
    // 性别数字字符串,转成数字类型,使用一元运算符
    userdataList.gender = +userdataList.gender


    axios({
        url:'http://hmajax.itheima.net/api/settings',
        // 提供一个地址

        method:'PUT',
        // method:方法 PUT提交给后端  GGET POST REMOVE 

        // data:当前端需要向后端发送数据 data
        // param：把后端数据提到前端

        // data/param:{}
        // data/param:对象
        data:userdataList
        
           
    }).then(result=>{
      const toastDom = document.querySelector('.toast')
      const toast = new bootstrap.Toast(toastDom)
      toast.show()
    })
    
    
})

而综上可以看到，axios实现数据传输十分简单，只需要几个参数，例如url、param/data，method等等，但是，这些都是在 AJAX技术上封装完成的，如果想要学的深，就必须知道AJAX的原理

接下来，我们来一起看一下AJAX的实现逻辑把

总的来说，AJAX与axios的差别并不大，下面来用一个简单的注册方法介绍

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 使用XHR注册和提交用户 -->
<body>
    <!-- register登录和注册 -->

    <button class="reg-btn">注册用户</button>

  <script>
    // document.querySelector('.reg-btn').addEventListener('click',()=>{
    //     const username = document.querySelector('.username').value
    //     const password = document.querySelector('.password').value
    //     const userdata={
    //         username,password
    //     }
    //     const urlsearch = new URLSearchParams(userdata)
    //     const surlsearch = urlsearch.toString()

    document.querySelector('.reg-btn').addEventListener('click',()=>{
        const getInfo = new XMLHttpRequest()
        getInfo.open('POST','http://hmajax.itheima.net/api/register')
        getInfo.addEventListener('loadend',()=>{
            // loadend加载完成
            console.log(getInfo.response);
        })
        // 设置请求头，告诉服务器内容类型式JSON字符串

        // 请求头
        getInfo.setRequestHeader('Content-Type','application/json')

        // 准备要提交的数据
        const userObj = {
            username:'karesware',
            password:'1234567'
        } 
        const parseresult = JSON.stringify(userObj)
        console.log(parseresult);

        // 设置请求体，发送请求
        getInfo.send(parseresult)

    })

        

    
  </script>
</html>

可以看到，当点击按钮后，成功向后端传递数据，并且收到后端返回值