後端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交換呢。


分享到:


相關文章: