前后端分离
传统开发方式主要使用MVC框架，Jsp+Servlet的结构，数据交互流程如下：
⻚页⾯面展示的内容以及⻚页⾯面之间的跳转逻辑,全都由后台来控制,这导致了了前后端耦合 度⾮非常⾼高,耦合度⾼高则意味着,扩展性差,维护性差,等等问题
传统开发的问题如下:
1、耦合度⾼高 调试麻烦,出现问题时往往需要前后台⼀一起检查
2、开发效率低, 前后端相互依赖,沟通成本,维护成本⾼高
3、扩展性差,⽆无法兼容其他终端 交互
4、逻辑混乱，最终造成代码腐烂
前后端分离
为了解决以上问题，降低耦合，出现了一种新的开发方式：前后端分离。
半分离时代前后端半分离，前端负责开发页面，通过接口（Ajax）获取数据，采用js操作对页面进行数据绑定，最终是由前端把页面渲染出来,流程如下:
HTML中的JS代码以Ajax方式请求后台的接口，返回Json数据，页面解析Json数据，通过Dom操作渲染页面；
半分离优点：
1、前端不会嵌入任何后台代码，前端专注于HTML、CSS、JS的开发，不依赖于后端。
2、前端可以模拟Json数据来渲染页面。发现Bug，也能迅速定位出是谁的问题。
缺点：
1、JS存在大量冗余，在业务复杂的情况下，页面的渲染部分的代码，非常复杂；
2、在Json返回的数据量比较大的情况下，渲染的十分缓慢，会出现页面卡顿的情况；
3、SEO（ Search Engine Optimization，即搜索引擎优化）非常不方便，由于搜索引擎的爬虫无法爬下JS异步渲染的数据；
4、资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次HTTP请求才能将页面渲染完毕。
为了进一步改进，就要做到正在的前后端分离。
前后端分离
此时，在传统开发上增加了一个服务器处理静态资源,将View层和Controller层放到了前端,后台仅需处理数据存取相关以及业务逻辑相关，此时职责划分如下：
前端：负责View和Controller层。
后端：只负责Model层，业务处理/数据等。
优点：
1、关注点分离,视图层和控制层逻辑移到了前端,后端更注重业务逻辑和系统构架
2、耦合大大降低,开发效率和维护效率都得到提高
3、错误友好,后台错误不影响前台界面展示
4、对于开发者,前后端不再需要过多的涉及彼此的开发语言
缺点：
1、前端开发者压力更大,需要关注Controller层
2、增加静态服务器后,系统结构更复杂
3、更多的HTTP请求,在移动端运行效率差
4、逻辑靠近前端,不同平台需针对性重复实现,(安卓iOS+web)
5、SEO优化无力,爬虫大多不支持ajax
页面执行流程
Controller层中会使用流程控制来完成数据校验,数据解析,页面的跳转等动作,这就要用到js了，浏览器页面执行流程如下：
如果前端是其他的例如iOS,安卓,则无需请求静态页面,页面的绘制是由系统原始语言实现的,只需要向后台请求json数据即可
服务端人员对前端HTML结构不熟悉，前端也不懂后台代码呀，controller层如何实现呢？这时就用到了一个Node.js，node.js适合运用在高并发、I/O密集、少量业务逻辑的场景，Node.js作为桥梁架接服务器端输出的JSON,结构如下：
优点:
1、请求聚合,Node在服务器端整合多个请求响应,一次性返回,效率更高
2、SEO优化
3、JS语言,学习成本低
4、浏览器与Node.js端代码可重用
5、服务器渲染
注：前后端分离并不是一定要加入node.js,前后端分离是责任划分问题
ajaxAjax是客户端的一种请求方式,全称(Asynchronous Javascript And XML)
用于异步的向服务器发送HTTP请求并获取响应数据,异步的好处在于,请求期间浏览器不会卡死,可以正常响应用户操作;而常见的表单提交,和直接打开指定地址,都是同步的;
ajax结构如下：
$.ajax({
type: "POST", //请求类型
url: "http://localhost:8080/task/getUserServlet", //请求的url
data:{pageNum:pageNum} //参数类型
dataType: "JSON", //返回类型
success: function(data) {//成功后返回json数据
console.log(data);//打印数据到控制台
},
error: function(err) {//请求错误
var myhtml = "加载失败";
$("#page").html(myhtml);//向容器添加信息
}
});
对象转json
json数据的基本形式是键值对，可以将其看做Map数据结构,对应着对象中的属性。下面列出了一些常见的json开源工具：
Gson
FastJson
Jackson
Json-lib
JSON结构如下：
{
"name": "JAVA",
"id": "1"
}
链接：ajax+servlet+json案例
作者：bing_bg
