前端学习第十九天——前端数据交互与HTTP协议

最新推荐文章于 2024-05-13 10:18:53 发布

诸葛冰箱

最新推荐文章于 2024-05-13 10:18:53 发布

阅读量190

点赞数

文章标签： http cookie session locstorage

本文链接：https://blog.csdn.net/qq_43493084/article/details/112990786

版权

前端学习第十九天——前端数据交互与HTTP协议

初识前后端通信

前端：浏览器端：
客户端：可以和服务器端进行通信
后端：服务器端

前后端的通信方式

使用浏览器访问网页
在浏览器地址栏输入网址，进行访问
HTML 的标签
浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求，如link/img/script/iframe
还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求，如a/form
Ajax 和 Fetch

HTTP

HTTP 是什么
HyperText Transfer Protocol(超文本传输协议)
HTML(超文本标记语言)。
超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一的文本变成了可无限延伸、扩展的超级文本、立体文本。
HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过 HTTP（超文本传输协议）在服务器和浏览器之间传输。
每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应。
HTTP 是一个请求-响应协议。

HTTP报文

HTTP 报文是什么
浏览器向服务器发送请求时，请求本身就是信息，叫请求报文
服务器向浏览器发送响应时传输的信息，叫响应报文
HTTP 报文格式
请求
请求头：起始行+首部
请求体

GET 请求，没有请求体，数据通过请求头携带
POST 请求，有请求体，数据通过请求体携带

响应
响应头：起始行+首部
响应体

常用的 HTTP 方法

浏览器发送请求时采用的方法，和响应无关
用来定义对于资源采取什么样的操作的，有各自的语义

HTTP 方法的语义
GET获取数据、获取资源（文件）
POST 创建数据、注册
PUT 更新数据、修改个人信息，修改密码
DELETE 删除数据、删除一条评论
这些方法虽然有各自的语义，但是并不是强制性的

RESTful 接口设计:一种接口设计风格，充分利用 HTTP 方法的语义

GET和POST对比

语义
GET：获取数据
POST：创建数据
发送数据
GET通过地址在请求头中携带数据，能携带的数据量和地址的长度有关系，一般最多就几K

POST既可以通过地址在请求头中携带数据，也可以通过请求体携带数据，能携带的数据量理论上是无限的。

携带少量数据，可以使用 GET 请求，大量的数据可以使用 POST 请求
3. 缓存
GET可以被缓存，地址会被浏览器缓存，POST不会被缓存。
4. 安全性
GET和POST都不安全
发送密码或其他敏感信息时不要使用GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码.

HTTP状态码

定义服务器对请求的处理结果，是服务器返回的

100~199 消息：代表请求已被接受，需要继续处理
双工通信websocket时候会看到。

200~299 成功

300~399 重定向
301 Moved Permanently(永久性移动)会在本地进行缓存
302 Move Temporarily(临时性缓存)不会在本地进行缓存

304 Not Modified(没有修改)

400~499 请求错误
404 Not Found

500~599 服务器错误
500 Internal Server Error

`Cookie`

Cookie全称 HTTP Cookie，简称Cookie是浏览器存储数据的一种方式。
因为存储在用户本地，而不是存储在服务器上，是本地存储，一般会自动随着浏览器每次请求发送到服务器端

Cookie 有什么用
利用 Cookie 跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等

不要在 Cookie 中保存密码等敏感信息

`Cookie`的基本操作

写入 Cookie

    document.cookie = 'username=zs';
    document.cookie = 'age=18';

不能一起设置，只能一个一个设置

    // 这种写法是错误的
    document.cookie = 'username=zs; age=18';

读取 Cookie

读取的是一个由名值对构成的字符串，每个名值对之间由“; ”（一个分号和一个空格）隔开

    document.cookie;
    // username=zs; age=18

`Cookie`的属性

Cookie 的名称（Name）和值（Value）
最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值
Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent()解码

    document.cookie = `username=${encodeURIComponent('张三')}`;
    // 键和值都使用中文时
    document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
        '张三'
    )}`;

一般名称使用英文字母，不要用中文，值可以用中文，但是需要编码后才能使用。

失效（到期）时间
对于失效的Cookie，会被浏览器清除。如果没有设置失效（到期）时间，这样的Cookie称为会话Cookie。

会话Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失

Expires属性和 Max-Age属性可以设置Cookie存在的时间
expires值为 Date 类型，可以指定Cookie的到什么时候过期。

     
    document.cookie = `username=zgbx; expires=${new Date(
       '2100-1-01 00:00:00'
    )}`;

max-age，值为数字，表示当前时间 + 多少秒后过期，单位是秒

    // 5秒 
    document.cookie = 'username=zgbx; max-age=5';
    // 30天
    document.cookie = `username=zs; max-age=${24 * 3600 * 30}`;

如果max-age的值是 0 或负数，则 Cookie 会被删除

Domain域
Domain限定了访问Cookie的范围（不同域名）

使用 JS 只能读写当前域或父域的Cookie，无法读写其他域的Cookie

添加Domain

      document.cookie = 'username=alex; domain=www.imooc.com';

当前域：www.imooc.com m.imooc.com
父域：.imooc.com

Path路径
Path限定了访问Cookie的范围（同一个域名下）

使用 JS 只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie

当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个Cookie

HttpOnly
设置了HttpOnly属性的Cookie不能通过 JS 去访问
Secure安全标志
Secure限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

只有Domain、Path、Secure都要满足条件，还没有过期的Cookie才能随着请求发送到服务器端。

注意事项

前后端都可以创建Cookie
Cookie有数量限制
每个域名下的Cookie数量有限，当超过单个域名限制之后，再设置Cookie，浏览器就会清除以前设置的Cookie
3.Cookie有大小限制
每个Cookie的存储容量很小，最多只有 4KB 左右

`localStorage`

localStorage也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
单个域名下的localStorage总大小有限制

`localStorage`的基本用法

写入一条数据setItem()

    localStorage.setItem('username', 'zgbx');

获取localStorage的长度

    localStorage.length;

获取指定的数据getItem()

    localStorage.getItem('username');

获取不存在的返回 null
4. 删除removeItem()

    localStorage.removeItem('username');

删除不存在的 key，不报错

清除所有clear()

    localStorage.clear();

注意事项

localStorage的存储期限
localStorage是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的
sessionStorage
当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空

    sessionStorage.setItem('username', 'zgbx');
    sessionStorage.getItem('username');
    sessionStorage.removeItem('username');
    sessionStorage.clear();

localStorage 键和值的类型
localStorage存储的键和值只能是字符串类型。不是字符串类型，也会先转化成字符串类型再存进去
不同的域名不能共用localStorage
localStorage的兼容性
IE7及以下版本不支持localStorage，IE8 开始支持

诸葛冰箱

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端学习第十九天——前端数据交互与HTTP协议

前端学习第十九天——前端数据交互与HTTP协议初识前后端通信前端：浏览器端：客户端：可以和服务器端进行通信后端：服务器端前后端的通信方式使用浏览器访问网页在浏览器地址栏输入网址，进行访问HTML 的标签浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求，如link/img/script/iframe还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求，如a/formAjax 和 FetchHTTPHTTP 是什
复制链接

扫一扫