http协议
<body>
http协议,我们主要是了解概念性的内容,实际项目中,我们暂时用不上
主要是为了应付面试等
复杂项目阶段,有可能会配合框架,使用一些http协议内容
什么是http协议,是做什么用的
所谓的http协议,是网络传输中,需要遵守的协议规范
例如,所谓的5G,也是一种传输规范协议,
5G 应用的是无线传输协议
http 是网络传输协议,在网络传输中,都要遵守的规范规则
通过http协议,完成网络传输中的 请求 响应 两部分的内容
在发送请求之前,必须要先确定的内容 --- 3次握手机制
客户端: 1,客户端必须要能正常的发送消息
2,客户端必须要能正常的接收消息
3,服务器端必须要能正常的发送消息
4,服务器端必须要能正常的接收消息
服务器: 1,服务器端必须要能正常的发送消息
2,服务器端必须要能正常的接收消息
3,客户端必须要能正常的发送消息
4,客户端必须要能正常的接收消息
所谓的3次握手,是在从客户端向服务器端发送请求之前,彼此相互做的确认
http通过 TCP/IP协议,完成三次握手
第一次握手:客户端向服务器发送一个消息
客户端 : 确定客户端可以发送消息
服务器 : 确定客户端可以发送消息
确定服务器能接收消息
第二次握手:服务器给客户端,返回一个消息
客户端 : 确定客户端可以接收消息
确定服务器可以接收消息
确定服务器可以发送消息
服务器 : 确定服务器可以发送消息
第三次握手:客户端给服务器发送请求
服务器 : 确定客户端可以接收消息
通过3次握手,确保,服务器和客户端,接收发送消息都正常,才可以发送真正的请求
2,中断请求,结束访问,断开连接 --- 4次挥手
确定 客户端和服务器都不再发送消息了
通过 TCP/IP 协议完成4次挥手
第一次挥手
客户端向服务器发送一个请求
告诉服务器,客户端要断开和服务器的连接
第二次挥手
服务器向客户端发送一个响应
告诉客户端,服务器知道客户端要断开连接
并且服务器也要不再发送消息了
第三次挥手
服务器再次向客户端发送一个响应
告诉客户端,这是最后一条消息,之后服务器就不会再发送消息了
但是,服务器可以随时 接收消息,请求
第四次挥手
客户端向服务器发送一个请求
告诉服务器,客户端知道服务器不再发送消息了
客户端,也不再接收消息了,但是会随时再发送消息给服务器
总结:
3次握手,是为了确保服务器和客户端,接收发送消息都正常,才能正常的建立链接
4次挥手,是为了确保服务器和客户端,都不再与对方发送消息,才能正常的断开链接,建立新的链接
</body>
</html>
请求报文响应报文
<body>
请求报文和响应报文
请求报文:是客户端向服务器发送请求时,生成请求文件,称为请求报文
请求报文由4部分组成:
请求行,请求头,请求空行,请求体
在 控制台中 Network 中 有请求报文的相关内容
请求行: 请求的地址 包括3部分内容
请求方式: get / post
请求地址: http://127.0.0.1/nz2002/week7_day02/02_login_demo/02_login.php
传输协议: HTTP/1.1
请求头:
由多个部分组成的
host : 主机域名
User-agent : 发起请求的客户端版本,包括客户端系统,浏览器信息等
Accept : 客户端希望服务器返回的数据信息格式
Referer : 发起请求的文件来源
content-type : 本次请求参数数据的格式
.....
请求空行:
在浏览器控制台中,无法显示
只存在于 http协议 的 源代码中 存在
浏览器控制台Network,只是浏览器显示相应报文的方式
很多内容,会与 http协议源代码内容不相同
请求体:
get : 没有请求体
参数是显示在地址栏中
post : 有请求体
请求体内容就是传参的参数
get和post请求方式的区别:
1,get方式,称为显性传参,传参参数会记录在地址栏中
传输数据内容,大小有限
一般用于向数据库进行查询操作
2,post方式,称为隐性传参,传参参数,不会显示在地址栏中
会记录在请求体中
传输数据内容,比较大
一般用于向数据库执行写入操作
响应报文:包含三个部分
响应行 响应头 响应体
响应行: HTTP/1.1 200 OK
协议版本 HTTP/1.1
响应的状态码 200
响应状态的描述 OK 成功
响应头:
Date : 服务器时间,与中国时区时差 -8小时
Server : 由哪个服务器来响应你的数据信息
content-length : 返回响应体的长度
content-type : 返回响应体的数据类型
响应体:
就是发送请求之后,服务器端,执行的输出结果
也就是PHP程序 echo var_dump() print_r() 等输出的内容
也就是 response 中显示的内容,就是响应体
常见请求方式
常见的请求方式
GET :
存储在浏览器地址栏中
用于搜索查询数据使用,百度搜索
由于存储在地址栏中,存储数据大小受浏览器设定限制只能存储很少的内容
会被浏览器自动缓存存储
会显示在地址栏中,不安全
POST
存储在请求体中
向数据库写入数据(注册),发送敏感信息(账号密码)
理论
上可以无限存储,但是收到服务器限制
不会被浏览器自动缓存存储
不会显示在地址栏中,比get稍微安全点
其他的请求方式:
本质上,还是POST方式请求,只是带有语义化
div nav header 等标签,效果都是想用的,只是 nav 等有语义化
实际项目中,基本使用的就是 get 和 post 两种方式
json字符串
专门用于数据交互时使用的一种特殊的字符串
不同计算语言,相同的数据类型,语法可能不同,需要将所有的计算机语言的数据内容
转化为相同的格式,便于数据交互
计算机程序,接收到json字符串之后,再转化为当前计算机语言可以支持的数据类型
人族 精灵族 矮人族 亡灵
你好 fdas 2133 看301789
相同的内容,不同的种族,不同的语言,内容并不同
都转化为 世界通用语 阿里巴巴 所有种族所有语言都明白是表示你好
不同的种族,接收的是 阿里巴巴(json串) 再翻译成自己种族的语言
PHP 中 定义一个数组 $arr = ['name'=>'张三' , 'age'=>18];
PHP 中 数组支持字符串作为索引键名
JavaScript中,数组,只支持数值作为索引下标
PHP 中 字符串数组,就要转化为 JavaScript中 对象
不同计算机语言,都有自己定义json字符串,和将json字符串还原的方法
PHP:
json_encode() 将其他数值,转化为json字符串
json_decode() 将json字符串,还原为其他数值
JavaScript:
JSON.stringify() 将其他数值,转化为json字符串
JSON.parse() 将json字符串,还原为其他数值
<script>
//
JavaScript中的json操作
const obj = {
name:'张三',
age:18,
sex:'男',
};
// 转化为json串
let str = JSON.stringify(obj);
console.log(str);
console.log(obj);
// 将json串,还原为数据
// 还原的是PHP中的json串
const phpJson = JSON.parse('<?php echo $json;?>');
// PHP的数组,转化为JavaScript的对象
console.log(phpJson);
// 实际项目中
// 除了 数值 布尔类型 字符串类型
// 其他的 数据传参,都要使用json字符串的形式
</script>
什么是
cookie
cookie 是浏览器的 一个功能
是 前端浏览器的一种存储机制
本质上是在浏览器内,建立一个文档文件,来存储浏览器执行页面时,产生的一些数据
这些数据是各个浏览器都要使用的公共数据,会存储在cookie
cookie本质上,一个是建立在浏览器文件夹中,存储页面公共数据的文件
什么是cookie的时效
cookie是浏览器存储数据的一种机制
cookie存储的数据,不会一直存储在浏览器的文件中
存储在文件中的数据,容易被攻击造成数据泄露
为了确保数据的安全性,cookie存储的数据,是有时效性的
也就是有存储时间,如果到达存储事件,浏览器会自动删除cookie中存储的数据
cookie的时效性,可以设定,设定的是一个时间节点
超过这个时间节点,浏览器会自动删除cookie数据
如果没有设定时效,默认是会话时间
所谓的会话时间,是浏览器打开执行前端程序的时间,也就是页面关闭,cookie就会被删除
总结: cookie的时效,要么是会话时间 session
要么是超过当前时间的时效
一定不可能是小于当前时间的时效
因为小于当前时间,cookie就会被删除,不存在了
get cookie
<script>
// 获取当前的cookie
// 获取内容是一个字符串
// 格式 键名=数值;空格键名=数值;空格键名=数值
// 字符串是没有办法直接使用的,必须要转化
// 转化为对象,对象的键名就是cookie的键名,对象的数值就是cookie的数值
// 必须要cookie的时效,只要有这个cookie键名数值就可以
let cookieStr = document.cookie;
console.log(cookieStr);
// 定义一个函数来转化cookie字符串为对象
// 参数:cookie字符串
const cookieObj = myGetCookie(document.cookie);
console.log(cookieObj);
function myGetCookie(cookieStr){
// 定义一个对象
// 在 { } 外定义变量,在 { } 中给变量赋值
// 不影响变量的使用
const obj = {};
// 1,将cookie字符串,转化为数组,根据间隔符号 分号和空格
const arr1 = cookieStr.split('; ');
// 数组的形式 0:键名=数值 1:键名=数值....
console.log(arr1);
// 2,循环遍历arr1数组,键值对字符串的形式,要转化为 键名 数值独立的形式
arr1.forEach((item)=>{
// 以等号分割 键值对字符串,再定义成新的数组
const newArr = item.split('=');
// 数组 newArr 中 0是 键名 1是数值
// console.log(newArr);
// 要将 0存储的键名,设定成对象的键名
// 要将 1存储的数值,设定为对象的数值
// const obj ={};
// 给对象添加单元
// obj[变量] = 数据;
obj[newArr[0]] = newArr[1];
})
return obj;
}
/*
总结
原因:JavaScript中,只能获取到cookie字符串
必须将cookie字符串,转化为对象形式
输入键名,可以获取数值
步骤思路:
1,定义一个函数,参数是 cookie字符串
2,根据 ;空格 将 cookie字符串,转化为数组形式
[
0: 'name=张三',
1: 'age=18',
2: 'sex=男',
3: 'addr=北京',
]
3,定义一个对象,来存储转化的结果
4,循环遍历 数组,获取数据item
item 存储的是就是 cooKie 键值对字符串
name=张三 age=18 sex=男 addr=北京
按照 = 等号 将 item 分割为数组
0 存储键名name 1存储数值张三
将0存储的键名作为对象的键名设定
将1存储的数值作为对象的数值设定
等于是 将 name=张三 字符串 设定为对象的单元 name:张三
5,返回对象
*/
set cookie
<body>
<script>
// 1,必须要通过服务器运性前端程序,才会有cookie设定
// 直接运行页面,设定cookie是有问题的
// 2,设定cookie 必须是 键值对形式的字符串
// '键名=数值'
// 没有设定时效,默认是会话时效
document.cookie = 'name=张三';
// 3,给cookie设定指定的时效
// 设定cookie的时间,是服务器时间,不是本地当前时间
// 全世界的计算机,都可以设定各个时区的时间,没有办法统一,必须设定的是服务器时间,才可以统一
// 服务器时间是世界标准时 与中国时区时差有 -8个小时的时差
// 设定cookie时间的语法
// document.cookie = 'name=张三;expires=时间对象';
// 将设个时间对象表示的时间,设定为cookie的时效
// 例如,时间对象,表示的时间是 2020-5-1 0:0:0 (服务器时间)
// cookie的时效,就是 2020-5-1 0:0:0 (服务器时间)
// 设定一个函数,来执行定义带有时效的cookie
// 参数1:键名
// 参数2:数值
// 参数3:时效---cookie的时效是当前时间开始,往后多少秒
function mySetCookie(key,value,time){
// JavaScript中,时间单位默认是毫秒
// 1,获取当前时间对象
const nowTime = new Date();
// 2,获取当前时间对象中的时间戳
// 当前时间的时间戳和服务器时间,有8个小时的时差
let t = nowTime.getTime();
// 3,减去8个小时(毫秒)的时差
// 当期时间相对应的服务器时间戳
t = t - (8*60*60*1000);
// 4,加上设定的cookie的时效性时间
// 这个时效性就是cookie设定的时效性
// time是秒,要转化为毫秒 --- 秒 * 1000
t = t + time*1000;
// 5,将时间戳,设定回时间对象
// 时间对象,就具有了cookie设定需要的服务器时间戳
nowTime.setTime(t);
// 6,将这个时间对象,设定给cookie,作为时效性
// 如果有 时间时效参数,设定cookie的时效是指定的时效时间
// 如果没有 时间时效参数,应该设定的是会话时效
// 通过三元运算符,来做判断
// console.log(time); 如果没有给time传参,time是undefined
// 如果 time 是 undefined 证明 time 没有输入参数
// 给 a 赋值空字符串 a中就没有任何内容
// 如果 time 不是 undefined 证明 time 有输入参数
// 给 a 赋值计算后的 nowTime 时间对象
let a = time === undefined ? '' : nowTime ;
document.cookie = `${key}=${value};expires=${a}`;
}
// 每次执行,都是在当前时间基础上,给cookie增加60秒的时效
// 刷新页面实际是重新执行设定cookie函数
// 函数每次执行都会在当前时间基础上增加60秒时效
// 要是页面没有设定 cookie函数的执行,不会影响 cookie时效的设定
mySetCookie('age','18',3600);
mySetCookie('sex','男',3600);
mySetCookie('addr','北京',3600);
// 删除cookie
// 定义相同的键名,数值任意,时间是0或者负数都可以
// 解释问题
// 1, 直接设定cookie
// document.cookie = 'name=张三';
// 会话时效,页面关闭,cookie就消失
// 2, 通过函数设定
// mySetCookie('age','18',60);
// 指定时效,只要不超过时间,cookie就会一直存在
// 3, cookie不光是当前页面可以看到,同源的其他页面也可以看到
// 一般是操作方式是
// 在一个页面设定好cookie,在其他页面根据cookie来进行操作
// 例如,在一个页面登录账号,同时设定cookie
// 其他页面也可以读取这个cookie,只要有这个cookie,就可以不用再次登录了
// 如果是会话时效的cookie,关闭页面,cookie小时,再次打开页面,就没有这个cookie,需要再次登录
// 如果是设定时间的cookie,只要不超过这个事件,cookie都会存在,也就不需要再次登录了
// 4, 关于cookie时效的计算
// (1),JavaScript中,所有的时间,默认都是毫秒,计算时,必须按照毫秒计算
// (2),服务器时间与中国时区时间,有8个小时的时差
// 如果不计算这个时差,设定60秒时效,实际是8小时零60秒时效
// (3),要在当前时间戳继承上 增加 设定的 时效时间
// 参数的时效时间是秒 * 1000 转化为 毫秒
// 当前时间戳 - 8小时的毫秒 + 时效时间的毫秒
// 5, 如果没有 时效时间 参数
// 应该是设定为会话时效
// 给 expires 通过三元运算符 赋值
// 如果 time 是 undefined , 赋值空字符串
// 如果 time 不是 undefined , 赋值计算后的时间对象
// 如果直接写不管有没有时间时效参数,都赋值 设定的时间对象
// 看上去效果也是 会话事件时效
// 但是低版本的浏览器不支持这个效果,会设定为当前时间
// 当前时间一执行,就会过期,就会直接删除
// 为了兼容低版本浏览器,要写成赋值形式
// 6, 删除cookie
// 设定键名,数值任意,时间设定为 负数或者0 ,让cookie一设定就过期
// 就不会出现在cookie
// 7, 东时区,是当前时间 - N小时 是标准时间 东8区 当前时间 - 8小时
// 西时区,是当前时间 + N小时 是标准时间 西8区 当前时间 + 8小时
//
</script>
