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

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

初识前后端通信

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

前后端的通信方式

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

HTTP

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

HTTP报文

1. HTTP 报文是什么
   浏览器向服务器发送请求时，请求本身就是信息，叫请求报文
   服务器向浏览器发送响应时传输的信息，叫响应报文

2. HTTP 报文格式
   请求
   请求头：起始行+首部
   请求体

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

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

常用的 HTTP 方法

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

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

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

GET和POST对比

1. 语义
   GET：获取数据
   POST：创建数据

2. 发送数据
   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的基本操作

1. 写入 Cookie

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

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

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

2. 读取 Cookie

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

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

Cookie的属性

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

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

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

2. 失效（到期）时间
   对于失效的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 会被删除

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

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

添加Domain

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

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

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

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

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

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

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

注意事项

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

localStorage

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

localStorage的基本用法

1. 写入一条数据setItem()

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

2. 获取localStorage的长度

    localStorage.length;

3. 获取指定的数据getItem()

    localStorage.getItem('username');

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

    localStorage.removeItem('username');

删除不存在的 key，不报错

5. 清除所有clear()

    localStorage.clear();

注意事项

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

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

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