AJAX——HTTP协议
1 HTTP协议-请求报文
HTTP协议：规定了浏览器发送及服务器返回内容的格式
请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容
1.1 请求报文的格式
请求报文的组成部分有：
- 请求行：请求方法，URL，协议
- 请求头：以键值对的格式携带的附加信息，比如：Content-Type
- 空行：分隔请求头，空行之后的是发送给服务器的资源
- 请求体：发送的资源
1.2 查看请求报文
首先，运行代码，按F12或右键检查
点击查看源代码就可以看到请求报文了
查看请求体，也可以查看源代码
下面是使用谷歌Google Chrome浏览器查看的请求报文
2 请求报文-错误排查
需求：通过请求报文排查错误原因，并修复输入正确的用户名和密码无法登录
用户名：itheima007
密码：7654321
<!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><!-- 引入bootstrap.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"><!-- 公共 --><style>html,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}</style><!-- 表单容器和内容 --><style>.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}</style><!-- 提示框样式 --><style>.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}</style>
</head><body><div class="container"><h3>欢迎-登录</h3><!-- 登录结果-提示框 --><div class="alert alert-success" role="alert">JS中会动态插入提示文字</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username" name="username" aria-describedby="usernameHelp"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password" name="password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 1.获取 alertconst alertCom = document.querySelector('.alert')// 2.抽取提示框的方法function showAlert(msg, classname) {alertCom.innerText = msgalertCom.classList.add(classname)alertCom.classList.add('show')setTimeout(() => {// 延迟隐藏alertCom.classList.remove('show')alertCom.classList.remove(classname)}, 2000);}// 3.给登录按钮绑定点击事件，提交输入的用户信息到服务器document.querySelector('.btn-login').addEventListener('click', function () {// 3.1 获取输入的用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// 3.2用户名 密码 长度判断if (username.trim().length < 8) {showAlert('用户名长度需要大于等于8', 'alert-danger')return}if (password.trim().length < 6) {showAlert('密码长度需要大于等于6', 'alert-danger')return}// 3.3 通过axios提交到服务器 并 提示用户 成功 / 失败axios({url: 'http://hmajax.itheima.net/api/login',method: 'post',data: {username,password}}).then(res => {// 显示提示框showAlert(res.data.message, 'alert-success')}).catch(err => {// 显示警示框showAlert(err.response.data.message, 'alert-danger')})})</script>
</body></html>3 HTTP协议-响应报文
HTTP协议：规定了浏览器发送及服务器返回内容的格式
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容
1.相应行（状态行）：协议、HTTP响应状态码、状态信息
2.响应头：以键值对的格式携带的附加信息，比如：Content-Type
3.空行：分隔响应头，空行之后的是服务器返回的资源
4.响应体：返回的资源
错误的响应报文
3.1 HTTP响应状态码
用来表明请求是否成功完成
比如：404（服务器找不到资源）
<!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>HTTP协议_响应报文</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/registrweer1ddd',method: 'post',data: {username: 'itheima007',password: '7654321'}}).then(result => {// 成功console.log(result)}).catch(error => {// 失败// 处理错误信息// console.log(error)console.log(error.response.data.message)// alert(error.response.data.message)})})</script>
</body></html>运行结果：
相关文章：
AJAX——HTTP协议
1 HTTP协议-请求报文 HTTP协议：规定了浏览器发送及服务器返回内容的格式 请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容 1.1 请求报文的格式 请求报文的组成部分有： 请求行：请求方法，URL…...
java面试微服务篇
目录 目录 SpringCloud Spring Cloud 的5大组件 服务注册 Eureka Nacos Eureka和Nacos的对比 负载均衡 负载均衡流程 Ribbon负载均衡策略 自定义负载均衡策略 熔断、降级 服务雪崩 服务降级 服务熔断 服务监控 为什么需要监控 服务监控的组件 skywalking 业务…...
JS进阶——垃圾回收机制以及算法
版权声明 本文章来源于B站上的某马课程，由本人整理，仅供学习交流使用。如涉及侵权问题，请立即与本人联系，本人将积极配合删除相关内容。感谢理解和支持，本人致力于维护原创作品的权益，共同营造一个尊重知识…...
【快速解决】python项目打包成exe文件——vscode软件
目录 操作步骤 1、打开VSCode并打开你的Python项目。 2、在VSCode终端中安装pyinstaller： 3、运行以下命令使用pyinstaller将Python项目打包成exe文件： 其中your_script.py是你的Python脚本的文件名。 4、打包完成后，在你的项目目录中会…...
数据结构——lesson3单链表介绍及实现
目录 1.什么是链表？ 2.链表的分类 （1）无头单向非循环链表： （2）带头双向循环链表： 3.单链表的实现 （1）单链表的定义 （2）动态创建节点 &#…...
中科大计网学习记录笔记（八）：FTP | EMail
前言： 学习视频：中科大郑烇、杨坚全套《计算机网络（自顶向下方法 第7版，James F.Kurose，Keith W.Ross）》课程 该视频是B站非常著名的计网学习视频，但相信很多朋友和我一样在听完前面的部分发现信…...
QPaint绘制自定义坐标轴组件00
最终效果 1.创建一个ui页面，修改背景颜色 鼠标右键->改变样式表->添加颜色->background-color->选择合适的颜色->ok->Apply->ok 重新运行就可以看到widget的背景颜色已经改好 2.创建一个自定义的widget窗口小部件类，class MyChart…...
MATLAB|基于改进二进制粒子群算法的含需求响应机组组合问题研究（含文献和源码）
目录 主要内容 模型研究 1.改进二进制粒子群算法（BPSO） 2.模型分析 结果一览 下载链接 主要内容 该程序复现《A Modified Binary PSO to solve the Thermal Unit Commitment Problem》，主要做的是一个考虑需求响应的机组组合…...
JDBC核心技术
第1章 JDBC概述 第2章 获取数据库连接 第3章 使用PreparedStatement实现CRUD操作 第4章 操作BLOB类型字段 第5章 批量插入 第6章 数据库事务 第7章 DAO及相关实现类 第8章 数据库连接池 第9章 Apache-DBUtils实现CRUD操作图像 小部件...
【天幕系列 02】开源力量：揭示开源软件如何成为技术演进与社会发展的引擎
文章目录 导言01 开源软件如何推动技术创新1.1 开放的创新模式1.2 快速迭代和反馈循环1.3 共享知识和资源1.4 生态系统的建设和扩展1.5 开放标准和互操作性 02 开源软件的商业模式2.1 支持和服务模式2.2 基于订阅的模式2.3 专有附加组件模式2.4 开源软件作为平台模式2.5 双重许…...
“挖矿”系列：细说Python、conda 和 pip 之间的关系
继续挖矿，挖“金矿”！ 1. Python、conda 和 pip（挖“金矿”工具） Python、conda 和 pip 是在现代数据科学和软件开发中常用的工具，它们各自有不同的作用，但相互之间存在密切的关系： Python&…...
【自然语言处理】实验3，文本情感分析
清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现（实验满分），只展示主要任务实验结果，如果需要详细的实验报告或者代码可以私聊博主 有任何疑问或者问题，也欢…...
2.12日学习打卡----初学RocketMQ（三）
2.12日学习打卡 目录： 2.12日学习打卡一. RocketMQ高级特性（续）消息重试延迟消息消息查询 二.RocketMQ应用实战生产端发送同步消息发送异步消息单向发送消息顺序发送消息消费顺序消息全局顺序消息延迟消息事务消息消息查询 一. RocketMQ高级特…...
＜网络安全＞《35 网络攻防专业课＜第一课 - 网络攻防准备＞》
1 主要内容 认识黑客 认识端口 常见术语与命令 网络攻击流程 VMWare虚拟环境靶机搭建 2 认识黑客 2.1 白帽、灰帽和黑帽黑客 白帽黑客是指有能力破坏电脑安全但不具恶意目的黑客。 灰帽黑客是指对于伦理和法律态度不明的黑客。 黑帽黑客经常用于区别于一般（正面…...
【实战】一、Jest 前端自动化测试框架基础入门（一） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（一）
文章目录 一、前端要学的测试课1.前端要学的测试2.前端工程化的一部分3.前端自动化测试的例子4.前端为什么需要自动化测试？5.课程涵盖内容6.前置技能7.学习收获 二、Jest 前端自动化测试框架基础入门1. 自动化测试背景及原理前端自动化测试产生的背景及原理 2.前端自…...
蓝桥杯Java组备赛（二）
题目1 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int max Integer.MIN_VALUE;int min Integer.MAX_VALUE;double sum 0;for(int i0;i<n;i) {int x sc.nextInt()…...
人力资源智能化管理项目（day10:首页开发以及上线部署）
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 首页-基本结构和数字滚动 安装插件 npm i vue-count-to <template><div class"dashboard"><div class"container"><!-- 左侧内…...
Conda管理Python不同版本教程
Conda管理Python不同版本教程 目录 0.前提 1.conda常用命令 2.conda设置国内源（以添加清华源为例，阿里云源同样） 3.conda管理python库 4.其它 不太推荐 pyenv管理Python不同版本教程（本人另一篇博客，姊妹篇&…...
free pascal：fpwebview 组件通过 JSBridge 调用本机TTS
从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr ，编写 js_bind_speak.lpr 如下，通过 JSBridge 调用本…...
数据结构——单链表专题
目录 1. 链表的概念及结构2. 实现单链表初始化尾插头插尾删头删查找在指定位置之前插入数据在指定位置之后插入数据删除指定位之前的节点删除指定位置之后pos节点销毁链表 3. 完整代码test.cSList.h 4. 链表的分类 1. 链表的概念及结构 在顺序表中存在一定的问题： …...
YOLOv9官方镜像快速入门：三步完成图片检测，支持自定义数据集训练
YOLOv9官方镜像快速入门：三步完成图片检测，支持自定义数据集训练 1. 环境准备与快速部署 YOLOv9官方训练与推理镜像已经预装了完整的深度学习开发环境，包含所有必要的依赖项。这意味着你不需要手动安装Python、CUDA或PyTorch，也…...
CC Switch模型测试架构演进：企业级AI服务质量保障深度解析
CC Switch模型测试架构演进：企业级AI服务质量保障深度解析 【免费下载链接】cc-switch A cross-platform desktop All-in-One assistant tool for Claude Code, Codex & Gemini CLI. 项目地址: https://gitcode.com/GitHub_Trending/cc/cc-switch 在AI驱…...
HoloPart：当3D模型学会自我解剖，深度学习的“X光眼“如何看透一切
HoloPart：当3D模型学会自我解剖，深度学习的"X光眼"如何看透一切 【免费下载链接】HoloPart Generative 3D Part Amodal Segmentation 项目地址: https://gitcode.com/gh_mirrors/ho/HoloPart 你是否曾对着一个复杂的3D模型感到困惑——…...
从驱动编译到数据传输：RK3588与FPGA的PCIe通信实战解析
1. RK3588与FPGA的PCIe通信基础 在嵌入式开发中，RK3588作为一款高性能处理器，与FPGA的协同工作越来越常见。PCIe（Peripheral Component Interconnect Express）作为一种高速串行计算机扩展总线标准，能够提供高带宽、低延…...
Meta Manus vs OpenClaw：2026年AI Agent之战，谁才是你的最佳选择？
## 引言2026年AI Agent市场迎来爆发式增长，预计到2034年将达到1400亿美元规模。在这个赛道上，Meta的Manus和开源项目OpenClaw成为最受关注的两大竞争者。本文将深入分析两者的差异，帮助你做出最佳选择。## Meta Manus：巨头的入场#…...
Python实战：用NumPy实现酉矩阵的生成与验证（附完整代码）
Python实战：用NumPy实现酉矩阵的生成与验证（附完整代码） 在量子计算、信号处理和机器学习等领域，复数矩阵运算正变得越来越重要。酉矩阵（Unitary Matrix）作为复数域上的"正交矩阵"，保…...
从零到精通：手把手教你训练自己的ChatGPT大模型（附完整代码）
本文将带你深入了解ChatGPT背后的原理，并手把手教你如何从数据搜集、清洗、预处理到模型训练、推理和部署，完成一个属于自己的大语言模型。文章涵盖了数据搜集与清洗、数据预处理与Tokenization、Transformer架构原理、模型训练实战、推理与部署等关键步…...
LFM2.5-1.2B-Thinking-GGUF快速上手：使用Ollama本地化部署与管理
LFM2.5-1.2B-Thinking-GGUF快速上手：使用Ollama本地化部署与管理 1. 前言：为什么选择Ollama部署本地大模型 最近大语言模型越来越火，但很多朋友发现云端服务要么太贵，要么有隐私顾虑。今天给大家介绍一个超简单的本地部署方案—…...
Phi-3 Mini 128K应用场景：技术团队内部知识沉淀问答系统
Phi-3 Mini 128K应用场景：技术团队内部知识沉淀问答系统 1. 技术团队的知识管理痛点 在快节奏的技术开发环境中，团队经常面临这样的困境：新成员加入时需要花费大量时间熟悉项目历史，关键问题的解决方案分散在各个聊天记录和邮件…...
：代码插桩)
LLVM Pass快速入门(四)：代码插桩
代码插桩项目需求：在函数运行时打印出运行的函数名项目目录如下/MyProject ├── CMakeLists.txt # CMake 配置文件 ├── build/ #构建目录 │ └── test.c #测试编译代码 └── mypass3.cpp # pass 项目代码一，测试代码示例test.c#include <…...