1. 非前后端分离架构
1. 前端html后端servlet
被tomcat服务器打包，统一指定根目录入口。通过原生表单发送到后端，后端根据请求数据进行重定向或请求转发，这样就不能进行动态渲染，也就必须存在很多静态html对应每一个请求。
这里原生表单和react的api请求表单是有区别的，原生表单通常只能通过http包装一个简单key，value进行传输。但api表单可以发送任何形式的数据，因为发送数据通过json格式进行包装理论上可以包装任意数量，任意形式(如value可以为列表也可以为字典)的键值对。
2. 前端jsp，后端servlet
虽然实现了动态页面，但是由于jsp的动态渲染机制依然是执行java代码而且还将java代码和html混在一起了，所以被thymeleaf模板替代。thymeleaf模板独立了html和java代码。
3. 前端thymeleaf，后端sevlet
实现动态页面，前后端代码更加独立，优于jsp
4. php
php和jsp很像都是将代码直接嵌入html。但是不同的是php是一种独立的语言，具备独立开发后端接口的能力。实现完全的前后端分离架构，比如前端出一个api请求，ngnix服务器对api路径的解析后，请求对应的php文件，然后将请求的php文件通过cgi接口执行后将程序结果返回给前端。就好比是前端react后端servlet中间件tomcat。
二. 前后端分离架构
前后端分离后不再需要依赖后端的动态渲染，前端页面美化全部由前端组件本身完成后端只需要提供数据。
1. 前端react后端servlet
前端通过api向后端发出请求，后端处理后返回数据到前端，前端自己通过数据渲染自己。
2. php
前端出一个api请求，ngnix服务器对api路径的解析后，请求对应的php文件，然后将请求的php文件通过cgi接口执行后将程序结果返回给前端。就好比是前端react后端servlet中间件tomcat。
3. 前端html后端python且使用websocket
前端html同样可以通过js原生api请求，或者导入axios发出api请求而不是原生表单请求。然后后端处理后返回数据到前端。这是正常执行curd操作(数据库操作)的基本流程。
但是如果遇到需要频繁更新操作如聊天室的人数变化，聊天消息的发送的接受等就需要用到websocket而不是api请求，api请求fetch是在应用层传输http数据发送一次就端开适合大量数据传输执行curd操作，
websocket工作在网络层一直保持连接，快速传输更新少量数据，且这些数据通常是程序执行期间在内存中保存的实时数据如聊天室的人数变化，聊天消息的动态发送等。
websocket一个很明显的作用就是，比如当一个用户进入了聊天室应该让所有用户都立即看到聊天室变化，如果此时用fetch发出http请求那么其他用户必须手动刷新页面才能看到变化，因为http是发送一次请求就断开，其他用户并不能动态感受变化，除非在前端设置自动刷新。
但是websocket本质也是套接字双向传输，工作过程是，前端点击按钮触发前端socket请求，后端监听对应事件的socket接受到请求通过后端函数更新内存数据(不是数据库)，然后在通过socket广播修改后的数据到前端监听对应事件的socket，然后调用前端js函数修改前端数据。