JS-- 前后端分离、 HTTP协议，AJAX的优缺点

1.前后端分离的应用程序

• 前后端分离之前，前端只负责写静态页交给后端工程师渲染数据，统一部署到后端服务器,没有前端工程师之说
• 前后端分离图示

• 通讯协议http
• 通讯技术ajax
• 定义业务-接口文档

  ---

HTTP：

概念:

• html 超文本标记语言
• http协议 : 超文本传输协议。 规定前后通讯方式，也就html文本或数据如何在网络传输.
• http基于请求响应模式的，无状态无连接应层协议

特点:

• - 客户端/服务端模式
• - 速度快
• - 灵活 传输数据类型任意
• - 无连接
• - 无状态

url地址

• 统一资源定位符
• 格式: http://ip:port/path/resoure
• ip: 网络中唯一标识一台电脑
• port: 端口号 同一台电脑中区分不同应用程序
• path: 路径
• res: 资源

域名:

• http://www.baidu.com:80
• 默认端口 80, 可以不写
• DNS服务器  域名解析服务器
• www.baidu.com - 10.78.139.23

http工作过程：

• 1. 建立连接
• 2. 发送请求
• 3. 响应数据
• 4. 断开连接

- 建立连接

建立稳定可靠的连接

• 三次握手
• - 发送请求
•      请求包: 一串有格式的文本字符串
•      格式： 请求行 请求头部 请求正文
•      请求行: method请求方法 url http协议版本

请求头部: key1:value1

                key2:value2

                    content-type:application/x-www-form-urlencoded

                     xhr.setRequestHeader('contentt-type','application/x-www-form-urlencoded')

                     请求正文

响应数据：

响应包：一串有格式的文本字符串

• 格式：状态行  响应头部  响应文本
•              状态行 ：版本   状态码   状态码描述
•                                           200
•                                            4**
•                                            5**
•                响应头部：context-type
•                 响应正文

断开连接

A--------------------------B

  四次挥手

---

一次请求就是向目标服务器发送一串文本。什么样的文本？有下面结构的文本

请求包结构：

 http请求由三部分组成，分别是：请求行、请求头部、请求包体(正文)

http请求方式：

 http响应包结构：

 HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

 

 查看响应数据

接口文档 ：

         client（前端） <===> seriver

传输内容类型：

 get请求与post请求区别

• 参数大小区别
• 参数类型区别
• 安全性区别

AJAX：

优点：  1.在不刷新整个页面的情况下维持与服务器通信
             2.使用异步的方式与服务器通信，不打断用户的操作
             3.将一些后端的工作移到前端，减少服务器与带宽的负担 4.Ajax使得界面与应用分离，也就是数据与呈现分离

缺点      1.Ajax干掉了Back与History功能，即对浏览器机制的破坏  

              2.AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
              3. 对搜索引擎支持较弱
              4. 不能很好地支持移动设备