AJAX入门

AJAX的定义

异步的JS和XML => 使用XMLHttpRequest对象与服务器通信

==>在不重新刷新页面的情况下与服务器通信

如何使用

基于axios库进行使用 -- 通过网络导js文件到你的vscode中
学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理

基于axios的基本使用

语法：

引入axios.js
使用axios函数
- 传入配置对象
- 再用.then回调函数接收结果，并做后续处理

学习小建议：在进行数据渲染到页面上前，多打印到控制台，查看是否正确

html 复制代码

<!-- 1.引入axios.js -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 2.使用axios函数
    axios({
      //2.1传入配置对象
      // 要请求的
      url: 'http://hmajax.itheima.net/api/province'
    }).then((result) => {
      //2.2通过回调函数接收结果，对服务器返回结果进行后续处理
      // console.log(result); 获取返回的数据后多打印到控制台上看是否成功
      document.querySelector('.province').innerHTML = result.data.list.join('<br>')
    })
  </script>

认识URL

---统一资源定位符 Uniform Resource Locator

因特网上标准的资源的地址，有资源如网页，图片，数据

http://hmajax.itheima.net/apilprovince

like 协议.//域名/资源路径

URL查询参数

==> 浏览器告诉服务器想要的具体数据 -> 通过URU中的?参数名1：值&参数名2=值...

在axios中直接用params即可，把参数名和值当属性一样写即可
[!IMPORTANT]

参数名需要和后端人员进行沟通获取，而非随便乱起一个名字

案例-地区查询

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>04.案例_地区查询</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>
    /*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */
    //1.绑定点击事件
    const btn = document.querySelector('.btn');
    const ul = document.querySelector('.list-group');
    btn.addEventListener('click', () => {
      axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname: document.querySelector('.province').value,
          cname: document.querySelector('.city').value
        }
      }).then((result) => {
        // console.log(result.data.list);
        ul.innerHTML = result.data.list.map((element) => {
          return `<li class="list-group-item">${element}</li>`
        }).join('');
      })
    })
  </script>
</body>

</html>

常用请求方法和数据提交

请求方法

请求方法	操作
GET	获取数据
POST	数据提交
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

数据提交

--当数据需要在服务器上保存

axios核心配置

url:请求URL地址
method:请求方法
params：查询参数
data：提交数据

axios错误处理

=> 将服务器返回的数据处理后，用弹窗等更直观的方式显示给用户

=>基于axios用.catch(error=>{处理错误信息})处理

案例--数据提交之账号注册占用

javascript 复制代码

<script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
    */
    //1.绑定点击事件
    const btn = document.querySelector('.btn');
    btn.addEventListener('click', () => {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'post',
        data: {
          username: 'akakakak',
          password: '22222221'
        }
      }).then((result) => {
        console.log(result);
      }).catch((error) => {
        alert(error.response.data.message);

      })
    })

HTTP协议-请求报文

请求行：请求方法，URL，协议
请求头：以键值对携带的附带信息
空行：分隔请求头和要发送给服务器的资源
请求体：发送给服务器的资源

请求报文-错误排查

=>通过请求报文发送的资源或者其他信息来判断发送的数据是否正确，来确定错误代码的位置

HTTP协议-响应报文

响应行：协议，状态码，状态信息
响应头：键值对
空行
响应体

接口文档

描述接口的文章（如使用AJAX和服务器通讯时，使用的URL，请求方法以及参数）

与后端工程师进行沟通接口

params中的对象，会自动转化为JSON字符串

案例-登录

步骤：

绑定点击事件
1. 先获取用户名和密码
2. 判断长度
  1. 符合要求，将数据传到服务器判断是否正确，再根据返回响应信息做提示
  2. 不符合要求，直接结束回调函数

JavaScript 复制代码

// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    //1.获取按钮对象，绑定点击事件
    document.querySelector('.btn').addEventListener('click', () => {
      //1.2获取用户名和密码数据
      const username = document.querySelector('.username').value;
      const password = document.querySelector('.password').value;
      //1.3判断用户名和密码的长度
      if (username.length < 8) {
        console.log('用户名长度少于8位');
        return;
      }
      if (password.length < 6) {
        console.log('密码长度少于6位');
        return;
      }
      //1.4提交到服务器进行判断是否登录成功，并返回相关信息
      //若以上都满足，就提交到服务器给后端进行判断
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'post',
        data: {
          username,
          password
        }
      }).then((result) => {
        console.log(result.data.message);

      }).catch((error) => {
        console.log(error.response.data.message);

      })
    })

案例-登录-提示信息

显示提示框
更改文字及背景颜色
过两秒进行隐藏

JavaScript 复制代码

 // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息
    //2.1获取提示框
    const myAlert = document.querySelector('.alert');
    //2.2封装函数
    function Alert(msg, isSuccess) {
      //1.显示提示框
      myAlert.classList.add('show');
      //2.更改文字及背景颜色
      myAlert.innerHTML = msg;
      if (isSuccess) {
        myAlert.classList.add('alert-success');
      } else {
        myAlert.classList.add('alert-danger');
      }

      //3.过2秒隐藏
      setTimeout(function () {
        myAlert.classList.remove('show');
        //再隐藏时需要把背景颜色样式重置
        if (isSuccess) {
          myAlert.classList.remove('alert-success');
        } else {
          myAlert.classList.remove('alert-danger');
        }
      }, 2000)
    }
    // 1.1 登录-点击事件
    document.querySelector('.btn-login').addEventListener('click', () => {
      // 1.2 获取用户名和密码
      const username = document.querySelector('.username').value;
      const password = document.querySelector('.password').value;
      // console.log(username, password)

      // 1.3 判断长度
      if (username.length < 8) {
        Alert('用户名必须大于等于8位', false);
        console.log('用户名必须大于等于8位');
        return; // 阻止代码继续执行
      }
      if (password.length < 6) {
        Alert('密码必须大于等于6位', false);
        console.log('密码必须大于等于6位');
        return; // 阻止代码继续执行
      }

      // 1.4 基于axios提交用户名和密码
      // console.log('提交数据到服务器')
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
      }).then(result => {
        Alert(result.data.message, true);
        console.log(result);
        console.log(result.data.message);
      }).catch(error => {
        console.log(error);
        Alert(error.response.data.message, false);
        console.log(error.response.data.message);
      })
    })

form-serialize插件

作用：快速收集表单信息

插入包含form-serialize的.js文件
使用serialize函数，有两个参数
- 表单-表单元素需要配置name属性
- 配置对象
  1. hash：true-JS对象 false-查询字符串（在url中）
  2. empty：true-收集是空值的表单元素 false-不收集是空值的表单元素

使用实例

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>13.form-serialize插件使用</title>
</head>

<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="uname">
    <br>
    <input type="text" name="pwd">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
    1.导入form-serialize插件所属的.js文件
  -->
  <script src="./form-serialize.js"></script>
  <script>
    //2.调用serialize函数
    document.querySelector('.btn').addEventListener('click', () => {
      //2.1获取表单元素
      const form = document.querySelector('.example-form');
      const data = serialize(form, { hash: true, empty: true });
      console.log(data);
    })
  </script>
</body>

</html>

案例

登录界面表单元素采集运用该插件

JavaScript 复制代码

 // 1.2 获取用户名和密码
      const form = document.querySelector('.login-form');
      const data = serialize(form, { hash: true, empty: true });
      console.log(data);

      const { username, password } = data; //解构对象