【Web全栈课程4】前后端交互方式简介

数据交互

对于服务器的处理来说，http所有的数据请求都是表单提交（除了websocket）

1. 表单

   • 最基本 最简单
   • 提交表单的时候，刷新页面

2. ajax

   • 提交的时候不用刷新页面，因此节约流量，（提交表单将整个页面提交）
   • 在网络慢的情况可能出现重复提交，可以通过禁用提交按钮等操作解决
   • 默认情况不支持跨域，需要服务器配置才能跨域
   • 单向通信，缺点：只能浏览器请求服务器，服务端数据改变无法通知客户端

3. jsonp

   • 比较老的跨域的方式，由于安全性差，已经逐步被取代

4. webSocket

   • 性能比ajax高，支持大批量数据通信
   • 双向通信（双工通信），例如订单系统商家接单了，订单状态变化了，或者有人发送消息给我，等都需要双向通信
   • 默认就可以跨域

---

http协议

1、3个版本：http1.0、http1.1、http2.0

• http1.0 一次性连接
• http1.1 保持连接
• http2.0 强制https，自带双向通信，提供协议级的多路复用（即一个连接可以传输多个数据） （目前是草案）

2、http和https
http =>容易被攻击被窃听
https=http+secrity =>安全，https需要证书校验

rfc http 互联网上使用的所有协议都有rfc编号

3、三次握手与四次挥手
第4次的时候连接断开，http1.1要等待一段时间才会断开

4、http请求消息叫request，返回消息叫response，消息体都有如下格式

get在头里面传数据，post在body里传数据，因此get限制传递数据32k，post可以达到1G。
浏览器的一个请求里面，我们可以看到都有如下3部分

具体内容含义，内容来自：https://www.cnblogs.com/good7... ，感谢

Request Headers请求头

• Accept:告诉服务器，客户机支持的数据类型
• Accept-Encoding:告诉服务器，客户机支持的数据压缩格式
• Cache-Control：缓存控制，服务器通过控制浏览器要不要缓存数据
• Connection:处理完这次请求，是断开连接还是保持连接
• Cookie:客户机通过这个可以向服务器带数据
• Host:访问的主机名
• User-Agent:告诉服务器，客户机的软件环境

Response Headers响应头

• Connection:处理完这次请求后，是断开连接还是继续保持连接
• Content-Encoding:服务器通过这个头告诉浏览器数据的压缩格式
• Content-Length:服务器通过这个头告诉浏览器回送数据的长度
• Content-Type:服务器通过这个头告诉浏览器回送数据的类型
• Date:当前时间值
• Server:服务器通过这个头告诉浏览器服务器的类型
• Vary:Accept-Encoding ——明确告知缓存服务器按照
• Accept-Encoding 字段的内容，分别缓存不同的版本;
• X-Powered-By:服务器告知客户机网站是用何种语言或框架编写的。

---

表单

1. 属性
   action —— 提交到哪儿
   method —— 提交方式，GET、POST；PUT、HEADER、DELETE；自定义（服务器配置了就能识别）
   name —— 必须加（后端识别数据）；多个相同name相同提交到后端是列表
   submit —— 提交

2. 数据提交方法
   GET、POST的安全性完全一样，https才能更加安全
   GET

     1.数据放在url里
     2.容量有限（<32k）
     3.有缓存
     4.利于分享和收藏（相关参数都在url里面）

   POST

     1. 数据放在http-body里
     2. 容量较大（<1G）
     3. 不缓存
     4. 没法分享和收藏
   

Q: 表单重复提交怎么解决？
开始提交的时候，提交按钮禁用，结束后提交按钮恢复可用。

Q: 重定向、转发区别
重定向 通知浏览器，让浏览器去请求另一个地址——浏览器地址是会变的
转发 在服务器内部，把请求转交给另一个模块处理；对客户端是不可见的——浏览器地址不变

---

ajax

ajax的使用直接引入jq即可使用，可讲性不大。
我们尝试自己使用原生js简单封装了一个ajax，可参考 https://segmentfault.com/a/11...