当前位置：首页 > news >正文

AJAX——HTTP协议

news 2026/5/19 0:06:58

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…...

编程日记 2024/2/18 23:56:51

java面试微服务篇

目录目录 SpringCloud Spring Cloud 的5大组件服务注册 Eureka Nacos Eureka和Nacos的对比负载均衡负载均衡流程 Ribbon负载均衡策略自定义负载均衡策略熔断、降级服务雪崩服务降级服务熔断服务监控为什么需要监控服务监控的组件 skywalking 业务…...

编程日记 2024/2/18 23:55:49

【快速解决】python项目打包成exe文件——vscode软件

目录操作步骤 1、打开VSCode并打开你的Python项目。 2、在VSCode终端中安装pyinstaller： 3、运行以下命令使用pyinstaller将Python项目打包成exe文件： 其中your_script.py是你的Python脚本的文件名。 4、打包完成后，在你的项目目录中会…...

编程日记 2024/2/18 23:51:45

数据结构——lesson3单链表介绍及实现

目录 1.什么是链表？ 2.链表的分类 （1）无头单向非循环链表： （2）带头双向循环链表： 3.单链表的实现 （1）单链表的定义 （2）动态创建节点 &#…...

编程日记 2024/2/18 23:50:44

中科大计网学习记录笔记（八）：FTP | EMail

前言： 学习视频：中科大郑烇、杨坚全套《计算机网络（自顶向下方法第7版，James F.Kurose，Keith W.Ross）》课程该视频是B站非常著名的计网学习视频，但相信很多朋友和我一样在听完前面的部分发现信…...

编程日记 2024/2/18 23:47:40

QPaint绘制自定义坐标轴组件00

最终效果 1.创建一个ui页面，修改背景颜色鼠标右键->改变样式表->添加颜色->background-color->选择合适的颜色->ok->Apply->ok 重新运行就可以看到widget的背景颜色已经改好 2.创建一个自定义的widget窗口小部件类，class MyChart…...

编程日记 2024/2/18 23:44:37

MATLAB|基于改进二进制粒子群算法的含需求响应机组组合问题研究（含文献和源码）

目录主要内容模型研究 1.改进二进制粒子群算法（BPSO） 2.模型分析结果一览下载链接主要内容该程序复现《A Modified Binary PSO to solve the Thermal Unit Commitment Problem》，主要做的是一个考虑需求响应的机组组合…...

编程日记 2024/2/18 23:43:34

JDBC核心技术

第1章 JDBC概述第2章获取数据库连接第3章使用PreparedStatement实现CRUD操作第4章操作BLOB类型字段第5章批量插入第6章数据库事务第7章 DAO及相关实现类第8章数据库连接池第9章 Apache-DBUtils实现CRUD操作图像小部件...

编程日记 2024/2/18 23:41:32

【天幕系列 02】开源力量：揭示开源软件如何成为技术演进与社会发展的引擎

文章目录导言01 开源软件如何推动技术创新1.1 开放的创新模式1.2 快速迭代和反馈循环1.3 共享知识和资源1.4 生态系统的建设和扩展1.5 开放标准和互操作性 02 开源软件的商业模式2.1 支持和服务模式2.2 基于订阅的模式2.3 专有附加组件模式2.4 开源软件作为平台模式2.5 双重许…...

编程日记 2024/2/18 23:39:29

“挖矿”系列：细说Python、conda 和 pip 之间的关系

继续挖矿，挖“金矿”！ 1. Python、conda 和 pip（挖“金矿”工具） Python、conda 和 pip 是在现代数据科学和软件开发中常用的工具，它们各自有不同的作用，但相互之间存在密切的关系： Python&…...

编程日记 2024/2/18 23:38:28

【自然语言处理】实验3，文本情感分析

清华大学驭风计划课程链接学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现（实验满分），只展示主要任务实验结果，如果需要详细的实验报告或者代码可以私聊博主有任何疑问或者问题，也欢…...

编程日记 2024/2/18 23:33:23

2.12日学习打卡----初学RocketMQ（三）

2.12日学习打卡目录： 2.12日学习打卡一. RocketMQ高级特性（续）消息重试延迟消息消息查询二.RocketMQ应用实战生产端发送同步消息发送异步消息单向发送消息顺序发送消息消费顺序消息全局顺序消息延迟消息事务消息消息查询一. RocketMQ高级特…...

编程日记 2024/2/18 23:29:19

＜网络安全＞《35 网络攻防专业课＜第一课 - 网络攻防准备＞》

1 主要内容认识黑客认识端口常见术语与命令网络攻击流程 VMWare虚拟环境靶机搭建 2 认识黑客 2.1 白帽、灰帽和黑帽黑客白帽黑客是指有能力破坏电脑安全但不具恶意目的黑客。灰帽黑客是指对于伦理和法律态度不明的黑客。黑帽黑客经常用于区别于一般（正面…...

编程日记 2024/2/18 23:23:12

【实战】一、Jest 前端自动化测试框架基础入门（一） —— 前端要学的测试课从Jest入门到TDD BDD双实战（一）

文章目录一、前端要学的测试课1.前端要学的测试2.前端工程化的一部分3.前端自动化测试的例子4.前端为什么需要自动化测试？5.课程涵盖内容6.前置技能7.学习收获二、Jest 前端自动化测试框架基础入门1. 自动化测试背景及原理前端自动化测试产生的背景及原理 2.前端自…...

编程日记 2024/2/18 23:22:11

题目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()…...

编程日记 2024/2/18 23:21:09

人力资源智能化管理项目（day10:首页开发以及上线部署）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 首页-基本结构和数字滚动安装插件 npm i vue-count-to <template><div class"dashboard"><div class"container"><!-- 左侧内…...

编程日记 2024/2/18 23:18:07

Conda管理Python不同版本教程

Conda管理Python不同版本教程目录 0.前提 1.conda常用命令 2.conda设置国内源（以添加清华源为例，阿里云源同样） 3.conda管理python库 4.其它不太推荐 pyenv管理Python不同版本教程（本人另一篇博客，姊妹篇&…...

编程日记 2024/2/18 23:17:06

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 调用本…...

编程日记 2024/2/18 23:16:04

数据结构——单链表专题

目录 1. 链表的概念及结构2. 实现单链表初始化尾插头插尾删头删查找在指定位置之前插入数据在指定位置之后插入数据删除指定位之前的节点删除指定位置之后pos节点销毁链表 3. 完整代码test.cSList.h 4. 链表的分类 1. 链表的概念及结构在顺序表中存在一定的问题： …...

编程日记 2024/2/18 23:13:02

别再只会调占空比了！STM32F103驱动L298N电机，PWM模式1和模式2到底怎么选？

STM32F103驱动L298N电机：PWM模式1与模式2的深度实战解析当你在调试L298N电机驱动模块时，是否遇到过这样的困惑：明明设置了相同的占空比，电机却表现出截然不同的响应特性？这背后往往隐藏着PWM模式选择的奥秘。对于STM3…...

编程新知 2026/5/18 23:33:24

在自动化部署流程中集成 TaoToken 大模型 API 调用

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度在自动化部署流程中集成 TaoToken 大模型 API 调用将大模型能力融入自动化部署流程，正成为提升 DevOps 效率的新范式。…...

编程新知 2026/5/18 23:14:09

《流浪的梦想家》的传播入口：漂泊感如何形成记忆点

从内容传播角度看，《流浪的梦想家》的入口在两个词的拉扯：流浪意味着还在路上，梦想家意味着心里仍有方向。这个反差足够形成记忆点。这首歌不适合被写成空泛远方。更准确的场景，是一个人背着行李、换城市、换工作、或者在深夜车窗…...

编程新知 2026/5/18 20:43:58

10分钟掌握R3nzSkin国服特供版：英雄联盟免费换肤完全指南

10分钟掌握R3nzSkin国服特供版：英雄联盟免费换肤完全指南【免费下载链接】R3nzSkin-For-China-Server Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3/R3nzSkin-For-China-Server 厌倦了英雄联盟国服中千篇一律的默…...

编程新知 2026/5/18 20:19:41