后端Java怎么和前端HTML交互?

枫林纪阿林


这个问题,看似简单,但是感觉题主又不是那个简单的意思(可能我想多了)。如果问【前端怎么和后端交互】,我觉得大部分程序员都能回答上来,但如果是【后端怎么(主动)和前端交互】,估计会难倒很多程序员了。


先看一个场景

我之前做过一个小项目,只有一个页面,展示的是各个分公司当天的业绩,就是挣了多少钱。后台服务是Java,数据库是Mysql,有一张汇总表,内容大概是北京-100万,上海-80万这样的。

流程很简单,HTML页面发起请求到Java,Java访问数据库查询数据,再返回给HTML展示。但是Mysql中的汇总表的数据,是不定期更新的,可能10分钟,可能20分钟。


最简单的做法是什么?

HTML中用JS设置一个定时轮询(Polling),每隔几秒去发起一次请求,获取最新的数据,如果数据没有变化,页面也保持变化。

缺点很明显,前端发起的很多请求都是无效的(因为数据没有变化),那有没有办法当后台数据发生变化时,Java可以主动通知浏览器呢?


WebSocket

向大家介绍一下WebSocket。

WebSocket是一个基于TCP的协议,它可以使前端和服务器的数据交互变得更简单,前端和服务器只需要完成一次握手,就可以创建持久性的连接,并可以完成双向的数据传输,注意这里的双向,也就是服务端可以主动通知前端;WebSocket的数据格式轻量,所以性能很高;与http协议也有着良好的兼容性。


回到上面的场景,可以这么改造:

HTML页面与Java服务端建立WebSocket连接,然后就不再主动发起请求,Java服务端定时查询数据库,当数据有变化时,通知前端。

可能有人会问,这不就是把HTML页面的轮询,移到Java端了么?

但是想象一下,如果有100个客户端打开了这个HTML页面呢?那就意味着100个前端的定时轮询,变成了1个Java服务端的定时轮询。


希望我的回答,能够帮助到你!我将持续分享Java开发、架构设计、程序员职业发展等方面的见解,希望能得到你的关注。


会点代码的大叔


本人计算机专业毕业,从事Java Web研发三年半,我就以个人的经历来谈谈后端Java怎么和前端HTML交互,由于主要从事Java服务端的研发,对前端HTML的认识有限,个人浅见,一起交流。

刚毕业参加工作时,首先接触到的是Java前端技术是JSP,当时做基础架构方面的工作,有一些管理界面需要研发,而团队的技术线就是JSP+Spring+Duboo+Zookeeper+mysql,我当然也延续了这一技术线,前后使用了一年左右的JSP,前后端研发都一起搞,包括数据库部署、上线维护等都有所涉及。JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理,然后将生成的HTML页面返回给客户端的浏览器。随着技术的发展,JSP逐渐被团队淘汰。

积极拥抱变化,是互联网公司或者互联网团队需要做的事情,spring boot + spring cloud的技术线进入了我们的视野。基础架构全面引入spring boot,积极推动微服务的发展成为团队的新课题。在推动spring boot的使用中,发现其支持的thymeleaf模板引擎有诸多的优点,在leader拍板之后,团队的前端技术就由JSP替换为thymeleaf。thymeleaf的优点是静态html嵌入标签属性,浏览器可以直接打开模板文件,便于前后端联调,同时也是springboot官方推荐方案。

技术总是不断发展的,前后端分离,面向接口编程的理念又进入我们的团队。hymeleaf这种前后端一起部署的技术体系已经不能满足我们的要求,为了推动前后端分离和专业的人做专业的事,将功能需求做页面划分,后端和前端定义接口标准,然后依此为契约,同步进行研发。发展到这里,前端的React技术栈又进入了我们团队的视野,由于其前端的技术太过专业,我当时只是简单的了解了一下,没有深入去学习,就专注于做服务端的接口研发。

引入该理念不久,我就跳槽后,进入新的公司新的团队,开始使用velocity。对于这个选择,没有更多的理由,融入新的环境新的团队,必须要让自己了解和使用团队的技术线,其性能良好,据说比jsp性能还要好些,但是自己没有做过相关的测试。到目前为止也在使用velocity,但会积极推动团队拥抱新变化,采用新的技术线来做相关的需求,比如freemarker等又成了团队的新的选择。



夕阳雨晴


后台java和前端HTML的交互实质就是后台java服务和浏览器中网页的通信,其通信协议主要是http和https协议。

Servlet规范详细描述了后台服务外界通信的标准,实现servlet接口便可以实现服务与外界通信。基于Java语言的web server实现了标准的servlet API。现在的Spring MVC等框架就是基于Servlet规范实现的。

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。现代浏览器均支持ajax技术。

Java后台服务与浏览器通信简要流程如下:

1、浏览器向Java web服务器发起HTTP请求;

2、web服务器收到请求后将它交给servlet容器;

3:Servlet容器根据配置决定调用哪一个servlet,并且将请求相关信息封装为request和response对象,并传入servlet实现类的请求处理方法中;

4:Servlet通过request对象来获取浏览器传来的请求数据,并根据请求数据执行相关操作,处理结果通过response对象发送给浏览器;

5:浏览器收到数据后,将数据传入请求成功回调函数,浏览器便可以根据响应数据对页面进行相关操作,实现页面局部刷新。


冲向全栈


后端提供数据,前台接收到之后显示数据,jsp中可以用jstl表达式直接显示,html的话一般用js去渲染,一般使用前端框架,常用的有vuejs,angularjs,reactJS……还有一些layui或者easyui都可以


网上搬砖头z


HttpRequest与HttpResponse


慕司专属的小司


就通过JavaWeb实现


林雨意


前端通过调用后端接口地址,拿到后端返回的数据,然后前端将数据显示在页面上或者用作其他,这就是交互


MI咕噜咕噜


JSP交换呢。


分享到:


相關文章: