前后端通信

浏览器和服务器之间数据交互的过程

后端向前端发送数据

访问页面

前端向后端发送数据

用户注册

前后端的通信方式

使用浏览器访问网页（输入网址）
HTML 标签(link/img/script/iframe)
还有一些标签，浏览器解析的时候，不会向服务器发起请求，但是用户可以使用他们向服务器发送请求
Ajax 和 Fetch

HTTP 协议

HTTP（超文本）：原先一个个单一的文本，通过超链接将其联系起来，由原先的单一文本变成了可无限延伸、扩展的超级文本、立体文本

HTTP 方法
GET和 POST 方法的对比
HTTP状态码

HTTP 请求相应的过程：
当我们输入网址按下回车，浏览器会现在自己的缓存中查找之前是否有访问过这个网址留下的缓存，如果有直接使用自己的缓存。
但是有时候找到了缓存需要验证是否过期，所以还是需要向服务器发送请求询问是否过期，服务器响应告知结果。

通过 IP 找到服务器的位置信息，浏览器首先到自己对应存放IP的地方查询是否有数据，如果没有，需要从DNS 域名解析服务器中查询，并存一份在自己的缓存中

HTTP 报文

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

格式：

请求
- 请求头：起始行 + 首部
- 请求体
GET 请求，没有请求体，数据通过请求头携带

POST 请求，有请求体，数据通过请求体携带
响应
- 响应头：起始行 + 首部
- 响应体

HTTP 方法

浏览器发送请求时采用的方法（增删改查），和响应无关(GET/POST/PUT/DELETE)

GET ：获取数据
POST：创建数据
PUT：更新/修改数据
DELETE：删除数据

GET 和 POST 方法的对比

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

2.发送数据不同（重要）
GET 通过地址在请求头中携带数据
能携带的数据量和地址的长度有关系，一般最多就几k

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

携带少量数据，可以使用 GET 请求，大量的数据可以使用 POST 请求

3.缓存

GET 可以被缓存，POST不会被缓存

4.安全性（都不安全）

发送密码或其它敏感信息时不要使用 GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码

HTTP 状态码

100~199 请求已被接受，需要继续处理
200~299 成功
300~399 重定向
400~499 请求错误
500~599 服务器错误

总结

link、img、script这3个标签会从前端向服务器端发送请求，完成前后端的通信，a、form通过我们的操作来完成前后端的通信

浏览器存储数据的一种方式，一般会自动随着浏览器每次请求发送到服务器端

Application -> Cookies

读取cooike：document.cookie

Cookie的基本用法

写入cookie：

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

只能一个一个设置cookie

读取cookie：

console.log(document.cookie);

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

Cookie 的名称和值

最重要的2个属性，创建Cookie时必须填写，其它属性可以使用默认值

失效时间

默认情况下，浏览器关闭，cookie消失
想长时间存在，设置Expires 或 Max-Age

expires 值为Date类型

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

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

document.cookie = 'username=alex; max-age=5';

document.cookie = 'username=alex; max-age=${24*3600*30}';

Domain 域

限定了访问 Cookie 的范围（在a域名下不能访问b域名下的cookie）
（不同域名下）

如果想设置一个cookie在所有的站点都能访问到：

通过JS添加Domain属性：
使用JS只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie

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

Path 路径

限定了Cookie的范围（同一域名下）

HttpOnly

设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问

Secure

只允许在https使用

前后端都可以写入和获取 Cookie

Cookie 有数量和大小的限制

local Storage

本地存储（不会发送到服务器端）

也是键值对的形式

localStorage.setItem('username','alex');
localStorage.setItem('username','zs');

获取不存在的会返回null

localStorage.removeItem('username');

localStorage 存储的键和值只能是字符串类型

不同域名不能共用 localStorage

Ajax

异步 JavaScript 和 XML

Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事，直到成功获取响应后，浏览器才开始处理响应数据

XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
现在比较常用的是 JSON

使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新（慕课网注册检测）

Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax

Live Server

Ajax 的基本用法

XMLHttpRequest

Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数

不论是 XMLHttpRequest 还是 XML，都没有和具体的某种数据格式绑定

Ajax 的使用步骤

1.创建 xhr 对象

const xhr = new XMLHttpRequest();

2.准备发送请求

xhr.open('HTTP 方法（GET、POST、PUT、DELETE',地址 URL https://www.imooc.com/api,true)

3.发送请求（调用send() 正式发送请求）

send() 的参数是通过请求体携带的数据

4.监听事件，处理响应

当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理

xhr.onreadystatechange = () => {};

readystatechange 事件监听 readyState 这个状态的变化

跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

浏览器的同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

跨域解决方法

【1】设置document.domain解决无法读取非同源网页的 Cookie问题

只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

document.domain = 'test.com';
// 两个页面都要设置

【2】跨文档通信 API：window.postMessage()

调用postMessage方法

// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');

// 父窗口向子窗口发消息（第一个参数代表发送的内容，第二个参数代表接收消息窗口的url
openWindow.postMessage('Hola!','http://test2.com');

【3】把web项目和后端接口项目放到一个域中，然后根据请求地址去请求不同服务器（真正干活的服务器）

posted @ 2021-09-18 18:06 ztw1002 阅读(424) 评论(0) 编辑收藏举报

刷新页面返回顶部

ztw1002

前后端通信