目录
- HTTP 请求
- 1.请求组成
- 2.请求方式与数据格式
- get 请求示例
- post 请求示例
- json 请求示例
- multipart 请求示例
- 数据格式小结
- 3.表单
- 3.1.作用与语法
- 3.2.常见的表单项
- 4.session 原理
- 5.jwt 原理
HTTP 请求
1.请求组成
请求由三部分组成
- 请求行
- 请求头
- 请求体
可以用 telnet 程序测试
2.请求方式与数据格式
get 请求示例
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost
- %E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21name=%E5%BC%A0&age=18
application/x-www-form-urlencoed 格式细节：
- 参数分成名字和值，中间用 = 分隔
- 多个参数使用 & 进行分隔
- 【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25{"name":"zhang","age":18}
json 对象格式
{"属性名":属性值}
其中属性值可以是
- 字符串 “”
- 数字
- true, false
- null
- 对象
- 数组
json 数组格式
[元素1, 元素2, ...]
multipart 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125--123
Content-Disposition: form-data; name="name"lisi
--123
Content-Disposition: form-data; name="age"30
--123--
- boundary=123 用来定义分隔符
- 起始分隔符是
--分隔符 - 结束分隔符是
--分隔符--
数据格式小结
客户端发送
- 编码
- application/x-www-form-urlencoded ：url 编码
- application/json：utf-8 编码
- multipart/form-data：每部分编码可以不同
- 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
- 文件上传需要用 multipart/form-data 格式
- js 代码可以支持任意格式发送数据
服务端接收
- 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
- 对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式
3.表单
服务器常用表单向后端提交数据。
3.1.作用与语法
表单的作用：收集用户填入的数据，并将这些数据提交给服务器
表单的语法
<form action="服务器地址" method="请求方式" enctype="数据格式"><!-- 表单项 --><input type="submit" value="提交按钮">
</form>
- method 请求方式有
- get （默认）提交时，数据跟在 URL 地址之后
- post 提交时，数据在请求体内
- enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）
- multipart/form-data
- 其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据，才会被发送给服务器
3.2.常见的表单项
文本框
<input type="text" name="uesrname">
密码框
<input type="password" name="password">
隐藏框
<input type="hidden" name="id">
日期框
<input type="date" name="birthday">
单选
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
多选
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
文件上传
<input type="file" name="avatar">
代码小结
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文件选择框和隐藏框的应用</title><style type="text/css">fieldset{width: 500px;height: 500px;margin: 20px;}</style></head><body><form><fieldset><legend>文件选择框与隐藏框的应用</legend><h4>请输入个人信息</h4>姓名：<input type="text" name="name" size="10"/>性别：<input type="radio" name="sex" value="male" checked/>男<input type="radio" name="sex" value="female"/>女 年龄：<input type="text" name="age" size="8"/><br/><h4>请选择照片文件：</h4><input type="file" name="file"/><br /><input type="hidden" name="admin" value="ABCD"/><h3>请您填写宝贵意见：</h3><textarea name="info" rows="4" cols="50" wrap="virtual"></textarea><h4>下拉框列表</h4><select name="" size="2" multiple> <!--规定可选多个选项--><option value="c1" selected>c/c++程序设计</option><option value="c2">计算机网络</option><option value="c3">数据结构</option></select><button type="submit" onclick="$()" value="">提交</button><input type="reset" value="重置" onclick="$()"/><input type="button" value="注册新用户" onclick="javascript:alert('注册新用户');"/></fieldset></form></body>
</html>
这段代码是一个简单的 HTML 表单，用于展示文件选择框、隐藏框以及其他表单元素的应用。
-
fieldset: 用于将相关的表单元素组合在一起并创建边框。 -
legend: 定义字段集的标题。 -
<h4>: 表示一个小标题。 -
<input type="text">: 用于接收用户输入的文本。 -
<input type="radio">: 表示单选按钮。 -
<input type="file">: 创建一个文件选择框，用于上传文件。 -
<input type="hidden">: 创建一个隐藏的文本输入框，用户无法看见或修改该值，但会在提交表单时随表单数据一起被发送到服务器。 -
<textarea>: 创建多行输入框，用于用户输入多行文本。 -
<select>: 创建一个下拉框（选择框）。 -
<option>: 定义下拉框中的选项。 -
<button>: 创建一个按钮，用于触发表单的提交。 -
<form>: 创建一个表单，用于包含表单元素。
接下来逐个介绍每个元素的属性。
-
<fieldset>元素的属性:width: 设置字段集的宽度。height: 设置字段集的高度。margin: 设置字段集的外边距。
-
<input type="text">元素的属性:type: 指定输入框的类型，这里是文本输入框。name: 指定输入框的名称，用于标识表单数据。size: 设置输入框的尺寸，这里是可见字符数。
-
<input type="radio">元素的属性:type: 指定输入框的类型，这里是单选按钮。name: 指定一组单选按钮的名称，用于标识表单数据。value: 指定单选按钮的值。checked: 设置单选按钮的初始选中状态。
-
<input type="file">元素的属性:type: 指定输入框的类型，这里是文件选择框。name: 指定输入框的名称，用于标识选择的文件。
-
<input type="hidden">元素的属性:type: 指定输入框的类型，这里是隐藏输入框。name: 指定输入框的名称，用于标识隐藏的表单数据。value: 指定隐藏输入框的值。
-
<textarea>元素的属性:name: 指定多行文本输入框的名称。rows: 设置多行文本框的行数。cols: 设置多行文本框的列数。wrap: 规定文本在多行文本框中的换行方式。
-
<select>元素的属性:name: 指定选择框的名称。size: 设置选择框的可见选项数。multiple: 规定可同时选择多个选项。
-
<option>元素的属性:value: 指定选项的值。selected: 设置选项的初始选中状态。
-
<button>元素的属性:type: 指定按钮的类型，这里是提交按钮。onclick: 指定按钮被点击时触发的函数。value: 指定按钮的值。
当您点击这两个按钮时，将执行相应的操作。下面是对每个按钮的介绍：
-
<input type="reset">元素的属性:type: 指定按钮的类型，这里是重置按钮。value: 指定按钮上显示的文本内容。onclick: 指定按钮被点击时触发的函数。
当点击这个按钮时，表单中的所有输入将被重置为初始值。并且如果定义了
onclick函数，将调用相应的 JavaScript 函数来处理重置按钮的点击事件。 -
<input type="button">元素的属性:type: 指定按钮的类型，这里是普通按钮。value: 指定按钮上显示的文本内容。onclick: 指定按钮被点击时触发的函数。
当点击这个按钮时，将弹出一个对话框显示 “注册新用户” 的提示信息。在这个示例代码中，点击按钮将触发内联 JavaScript 代码
javascript:alert('注册新用户');，弹出一个包含文本 “注册新用户” 的提示框。
效果如下
4.session 原理
Http 无状态，有会话
- 无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
- 有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享
服务端使用了 session 技术来暂存数据
存
GET /s1?name=zhang HTTP/1.1
Host: localhost
取
GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D
session 技术实现身份验证
5.jwt 原理
jwt 技术实现身份验证
生成 token
GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost
校验 token
GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28
