目录
- 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