传统开发方式

传统开发方式主要使用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数据即可

Node.js

服务端人员对前端HTML结构不熟悉，前端也不懂后台代码呀，controller层如何实现呢？这时就用到了一个Node.js，node.js适合运用在高并发、I/O密集、少量业务逻辑的场景，Node.js作为桥梁架接服务器端输出的JSON,结构如下：

优点:

	1、请求聚合,Node在服务器端整合多个请求响应,一次性返回,效率更高
	2、SEO优化
	3、JS语言,学习成本低
	4、浏览器与Node.js端代码可重用
	5、服务器渲染

注：前后端分离并不是一定要加入node.js,前后端分离是责任划分问题

ajax

Ajax是客户端的一种请求方式,全称(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 = "<span>加载失败</span>";
			$("#page").html(myhtml);//向容器添加信息
		}
	});

对象转json

json数据的基本形式是键值对，可以将其看做Map数据结构,对应着对象中的属性。下面列出了一些常见的json开源工具：

		Gson
		FastJson
		Jackson
		Json-lib

JSON结构如下：

{
	"name": "JAVA",
	"id": "1"
}

链接：前后端分离之跨域问题