• AJAX——HTTP协议

    1 HTTP协议-请求报文 

    HTTP协议：规定了浏览器发送及服务器返回内容的格式

    请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

    1.1 请求报文的格式

    请求报文的组成部分有：

    1. 请求行：请求方法，URL，协议
    2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
    3. 空行：分隔请求头，空行之后的是发送给服务器的资源
    4. 请求体：发送的资源

    1.2 查看请求报文

    首先，运行代码，按F12或右键检查

    点击查看源代码就可以看到请求报文了

    查看请求体，也可以查看源代码

    下面是使用谷歌Google Chrome浏览器查看的请求报文

    2 请求报文-错误排查

    需求：通过请求报文排查错误原因，并修复输入正确的用户名和密码无法登录

    用户名：itheima007

    密码：7654321

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>请求报文_辅助调试title>
    9.   
    10.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
    11.   
    12.   <style>
    13.     html,
    14.     body {
    15.       background-color: #EDF0F5;
    16.       width: 100%;
    17.       height: 100%;
    18.       display: flex;
    19.       justify-content: center;
    20.       align-items: center;
    21.     }
    22.  
    23.     .container {
    24.       width: 520px;
    25.       height: 540px;
    26.       background-color: #fff;
    27.       padding: 60px;
    28.       box-sizing: border-box;
    29.     }
    30.  
    31.     .container h3 {
    32.       font-weight: 900;
    33.     }
    34.   style>
    35.   
    36.   <style>
    37.     .form_wrap {
    38.       color: #8B929D !important;
    39.     }
    40.  
    41.     .form-text {
    42.       color: #8B929D !important;
    43.     }
    44.   style>
    45.   
    46.   <style>
    47.     .alert {
    48.       transition: .5s;
    49.       opacity: 0;
    50.     }
    51.  
    52.     .alert.show {
    53.       opacity: 1;
    54.     }
    55.   style>
    56. head>
    57.  
    58. <body>
    59.   <div class="container">
    60.     <h3>欢迎-登录h3>
    61.     
    62.     <div class="alert alert-success" role="alert">
    63.       JS中会动态插入提示文字
    64.     div>
    65.     
    66.     <div class="form_wrap">
    67.       <form>
    68.         <div class="mb-3">
    69.           <label for="username" class="form-label">账号名label>
    70.           <input type="text" class="form-control username" name="username" aria-describedby="usernameHelp">
    71.         div>
    72.         <div class="mb-3">
    73.           <label for="password" class="form-label">密码label>
    74.           <input type="password" class="form-control password" name="password">
    75.         div>
    76.         <button type="button" class="btn btn-primary btn-login"> 登 录 button>
    77.       form>
    78.     div>
    79.   div>
    80.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
    81.   <script>
    82.     // 1.获取 alert
    83.     const alertCom = document.querySelector('.alert')
    84.  
    85.     // 2.抽取提示框的方法
    86.     function showAlert(msg, classname) {
    87.       alertCom.innerText = msg
    88.       alertCom.classList.add(classname)
    89.       alertCom.classList.add('show')
    90.       setTimeout(() => {
    91.         // 延迟隐藏
    92.         alertCom.classList.remove('show')
    93.         alertCom.classList.remove(classname)
    94.       }, 2000);
    95.     }
    96.  
    97.     // 3.给登录按钮绑定点击事件，提交输入的用户信息到服务器
    98.     document.querySelector('.btn-login').addEventListener('click', function () {
    99.       // 3.1 获取输入的用户名和密码
    100.       const username = document.querySelector('.username').value
    101.       const password = document.querySelector('.password').value
    102.  
    103.       // 3.2用户名 密码 长度判断
    104.       if (username.trim().length < 8) {
    105.         showAlert('用户名长度需要大于等于8', 'alert-danger')
    106.         return
    107.       }
    108.       if (password.trim().length < 6) {
    109.         showAlert('密码长度需要大于等于6', 'alert-danger')
    110.         return
    111.       }
    112.  
    113.       // 3.3 通过axios提交到服务器 并 提示用户 成功 / 失败
    114.       axios({
    115.         url: 'http://hmajax.itheima.net/api/login',
    116.         method: 'post',
    117.         data: {
    118.           username,
    119.           password
    120.         }
    121.       }).then(res => {
    122.         // 显示提示框
    123.         showAlert(res.data.message, 'alert-success')
    124.       }).catch(err => {
    125.         // 显示警示框
    126.         showAlert(err.response.data.message, 'alert-danger')
    127.       })
    128.     })
    129.   script>
    130. body>
    131.  
    132. html>

    3 HTTP协议-响应报文

    HTTP协议：规定了浏览器发送及服务器返回内容的格式

    响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容

    1.相应行（状态行）：协议、HTTP响应状态码、状态信息

    2.响应头：以键值对的格式携带的附加信息，比如：Content-Type

    3.空行：分隔响应头，空行之后的是服务器返回的资源

    4.响应体：返回的资源

    错误的响应报文

    3.1 HTTP响应状态码

    用来表明请求是否成功完成

    比如：404（服务器找不到资源）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>HTTP协议_响应报文title>
    9. head>
    10.  
    11. <body>
    12.   <button class="btn">注册用户button>
    13.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
    14.   <script>
    15.     /*
    16.       注册用户: http://hmajax.itheima.net/api/register
    17.       请求方法: POST
    18.       参数名:
    19.         username: 用户名 (中英文和数字组成, 最少8位)
    20.         password: 密码 (最少6位)
    22.       目标: 点击按钮, 通过axios提交用户和密码, 完成注册
    23.       需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户
    24.     */
    25.    document.querySelector('.btn').addEventListener('click', () => {
    26.     axios({
    27.       url: 'http://hmajax.itheima.net/api/registrweer1ddd',
    28.       method: 'post',
    29.       data: {
    30.         username: 'itheima007',
    31.         password: '7654321'
    32.       }
    33.     }).then(result => {
    34.       // 成功
    35.       console.log(result)
    36.     }).catch(error => {
    37.       // 失败
    38.       // 处理错误信息
    39.       // console.log(error)
    40.       console.log(error.response.data.message)
    41.       // alert(error.response.data.message)
    42.     })
    43.    })
    44.   script>
    45. body>
    46.  
    47. html>

    运行结果：

  • 相关阅读:
    LAMP平台搭建
    程序员突如其来的生日惊喜
    零基础html学习/刷题-第一期
    如何报考产品总监认证（UCPD）？
    《Python机器学习与可视化分析实战》简介
    640.Solve the Equation
    [Mybatis-Plus笔记] MybatisPlus-05-id生成策略，多数据操作，逻辑删除
    springboot基于知识图谱的短视频推荐系统设计与实现毕业设计源码231115
    【表白单页模板】纯HTML表白+唯美3D动态相册表白网站制作(html+css+js)
    运放参数-快速了解输入偏置电流Ib和输入失调电流Ib_os参数-运算放大器
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/136098349