让你彻底明白html+js+java后台Http交互原理

引言：

很久没写文章了，首先恭喜自己这2年的付出，全网阅读突破10W+，或许这不能说明但是对于我来说是我前进的动力，努力没有白费，我一直坚信，经验是由一点一点积累的，思维也是由一天一天训练出来的。

1为什么写这篇技术文章

工作这么久了，基本上对数据非常敏感，特别自己刚入门java的时候，感觉总是力不从心，一会数据库，一会后台，一会前端，一会前端数据一会改变后台数据，自己非常迷糊。现在明白了，不管前台数据还是后台数据只有清楚的掌握HTML+js与网站后台的交互原理，不论是编写代码还是修改功能都可以迎刃而解。

2技术大纲

看文章之前，还是老样子，请先看下面这个技术大纲，大概了解这里面涉及到的技术，按照大纲看文章你会豁然开朗。

3聊聊html到底如何与后台进行数据交互的

3.1Html+JstL(EL表达式)+DOM浏览器操作+Struts2框架时代

1、struts可以想象为一个后台存储数据的地方，我们借助struts的Action一个容器，可以将我们所有想要在浏览器中想要展示的数据放入到Action中。

例如我们要想把电商网站的：商品类目显示到浏览器这个时候我们需要将红色框中的文字设置在struts2的Action中。

2、有了这些数据我们借助Jstl+El表达式就可以直接将这些数据直接渲染到HTML页面上去。此时用户就可以看到网站的商品类目数据了。

3.2Html+javascript+Json数据格式+spring mvc框架rest ApI接口时代

1、srping mvc 可以想象为一个后台存储数据的地方，我们借助Spring MVC responseBod注解，可以将我们所有想要在浏览器中想要展示的数据转换为json格式的数据。

2、有了这些数据我们借助javascript以及jquery技术渲染到HTML页面上去。此时用户就可以看到网站的商品类目数据了。

3.3angularjs+vue MVVM 框架+spring boot+spring Cloud微服务时代

1、spring boot+spring Cloud可以想象为一个后台存储数据的地方，我们借助spring boot+spring Cloud进行对项目进行模块化管理：比如我的电商项目可以分为：购物车模块、个人中心模块、商品搜索模块。这些模块都可以使用spring Cloud微服务进行管理，然后最终分别返回后台数据接口。

2、有了这些数据我们使用angularjs和vue技术，进行页面实施渲染，直接通过前端vue技术能够进行实时渲染数据，MVVM框架最强大的功能是双向数据绑定功能，你不再去操作dom了，因为操作浏览器Dom元素过于复杂繁琐，有了前端VUE框架的出现，你只需要页面实时渲染就可以了。

4技术实战

1、 说了这么多，到底知道这些原理有什么用呢？拿到一个项目首先需要分析他的前端是struts框架还是spring mvc框架，或者是spring cloud框架。第二步后端分析完成进行前端框架分析，看他的前端框架属于第几代框架。如果后端是struts框架那么前端一定是jsp或者EL表达式，如果后端是spring mvc这种restful接口，前端一定是AJAX动态DOM渲染技术，进行渲染页面。

2、大家可以看我这套电商项目，获取购物车模块是一个AJAX请求的我们电商模块后台，因为我的电商项目后台是使用sping mvc以及spring boot微服务实现的，所以我返回的数据格式绝对是JSON格式的数据。

那么我前端一定是使用jquery或者javascript进行页面元素渲染。大家可以看这句话

$(".cart-count").html(data.data);这句话就是将页面上的html的购物车图标数量设置渲染到页面上。

3、大家工作基本上使用到最多的就是这种操作DOM的前端技术，在这我给大家提几个技术点，学会了

无论工作和学习，发现任何网站数据都可以进行随心所欲篡改，本质是改变浏览器的DOM数据渲染。

• 页面元素渲染机制（延时渲染）js、setTimeOut方法
• jquey元素匹配、dom元素动态渲染，移除、查找

• jquery元素遍历查找追加元素属性
• jquery常用API $("选择器").each遍历函数

$("选择器").sibing查找当前元素的兄弟节点

$("选择器").parent()当前元素的父节点

$("选择器").before();当前元素之前插入元素

$("选择器").hide();隐藏当前元素

5有意义的一句话

存在问题，需要先思考，先思考问题寻找解决的办法，然后再进行分析哪种方案可行，最终选择一种最佳方案解决它。而不是不思考直接解决它，也不能不思考也不解决它。