目录
-
- [HTTP 请求](#HTTP 请求)
-
- 1.请求组成
- 2.请求方式与数据格式
-
- [get 请求示例](#get 请求示例)
- [post 请求示例](#post 请求示例)
- [json 请求示例](#json 请求示例)
- [multipart 请求示例](#multipart 请求示例)
- 数据格式小结
- 3.表单
- [4.session 原理](#4.session 原理)
- [5.jwt 原理](#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: 21
name=%E5%BC%A0&age=18application/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.作用与语法
表单的作用：收集 用户填入的数据 ，并将这些数据提交给服务器
表单的语法
html
<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.常见的表单项
文本框
html
<input type="text" name="uesrname">密码框
html
<input type="password" name="password">隐藏框
html
<input type="hidden" name="id">日期框
html
<input type="date" name="birthday">单选
html
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">多选
html
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">文件上传
html
<input type="file" name="avatar">代码小结
html
<!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=560FA845D02AE09B176E1BC5D9816A5Dsession 技术实现身份验证
Client LoginController LoginInterceptor Session 登录请求 检查用户名，密码，验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在，放行 Client LoginController LoginInterceptor Session
5.jwt 原理
jwt 技术实现身份验证
Client LoginController LoginInterceptor 登录请求 检查用户名，密码，验证通过 登录成功，返回token 其它请求，携带token 校验token，校验无误，放行 Client LoginController LoginInterceptor
生成 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