後端提供資料，前臺接收到之後顯示資料，jsp中可以用jstl表示式直接顯示，html的話一般用js去渲染，一般使用前端框架，常用的有vuejs,angularjs，reactJS……還有一些layui或者easyui都可以

後臺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：瀏覽器收到資料後，將資料傳入請求成功回撥函式，瀏覽器便可以根據響應資料對頁面進行相關操作，實現頁面區域性重新整理。

本人計算機專業畢業，從事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，資料庫是Mysql，有一張彙總表，內容大概是北京-100萬，上海-80萬這樣的。

最簡單的做法是什麼？

HTML中用JS設定一個定時輪詢（Polling），每隔幾秒去發起一次請求，獲取最新的資料，如果資料沒有變化，頁面也保持變化。

缺點很明顯，前端發起的很多請求都是無效的（因為資料沒有變化），那有沒有辦法當後臺資料發生變化時，Java可以主動通知瀏覽器呢？

WebSocket

向大家介紹一下WebSocket。

WebSocket是一個基於TCP的協議，它可以使前端和伺服器的資料互動變得更簡單，前端和伺服器只需要完成一次握手，就可以建立永續性的連線，並可以完成雙向的資料傳輸，注意這裡的雙向，也就是服務端可以主動通知前端；WebSocket的資料格式輕量，所以效能很高；與http協議也有著良好的相容性。

回到上面的場景，可以這麼改造：

HTML頁面與Java服務端建立WebSocket連線，然後就不再主動發起請求，Java服務端定時查詢資料庫，當資料有變化時，通知前端。

可能有人會問，這不就是把HTML頁面的輪詢，移到Java端了麼？

但是想象一下，如果有100個客戶端打開了這個HTML頁面呢？那就意味著100個前端的定時輪詢，變成了1個Java服務端的定時輪詢。

BAT的後端開發工程師不請自來。

這個問題的本質其實是在前後端分離的大趨勢下，前後端開發者如何將各自的程式碼串聯起來，對外發佈一個完整的服務。

接下來，我們就分別從前端和後端來介紹。

後端

後端又稱服務端，是負責接收前端的請求，然後進行邏輯處理，去讀寫資料庫，最後將結果返回的功能節點。目前在前後端分離的大前提下，不僅是java，php，Python等等大多是透過開放http/https介面的方式與前端交流。有的特殊服務還會使用websocket協議，不過使用場景要遠遠少於http，所以在此不多介紹了。

目前市面常見的web工程都有MVC這樣一個概念，即model-view-controller，它是一種軟體設計典範，用一種業務邏輯、資料、介面顯示分離的方法組織程式碼，將業務邏輯聚集到一個部件裡面，在改進和個性化定製介面及使用者互動的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用於對映傳統的輸入、處理和輸出功能在一個邏輯的圖形化使用者介面的結構中。我們的封裝的程式碼，可以說就在controller層。

以Java為例，如何實現一個介面呢。只需要在java的某個類中，增加@controller註解，這個類裡的函式，在專案啟動的時候，就會根據各自定義的path被自動載入為api了。舉例來說，現在有兩個controller，在url

http://xxx.yyy.com/api/

這個url下，path分別為A和B，然後這兩個controller內又各自有兩個方法，指定的path註解分別為A1,A2,B1,B2，那麼當前端呼叫

http://xxx.yyy.com/api/A/A1

的時候，就會去執行A controller下的A1函式，然後再將這個函式的執行結果作為response返回給前端了。前端

前端通常負責的工作除了渲染介面，還有兩部分組成：

1 捕捉使用者的操作，

2 根據操作請求後端api並獲取結果展示給使用者。

我們前面介紹的前後端互動，就是第二部分的工作。前端透過呼叫後端提供的api來傳遞和獲取資料，最後再將資料渲染到頁面上。

不過值得提一句的是，html並不負責與java互動，從基礎來說，html只負責頁面架構，具體捕捉使用者操作，獲取資料等步驟，是由JavaScript來實現的。

Java是後端開發伺服器的語言工具，要注意只是伺服器，那麼就需要一個客戶端或者是瀏覽器。

其中css是調節HTML那些大大小小的框的樣貌，而JavaScript則是可以實現互動的特效以及傳遞資料。

伺服器透過Java程式設計師傳遞資料給前端的JavaScript，然後再展現在以HTML為載體的平臺上。就完成了簡單的資料互動呈現的介面。

剛畢業的時候公司使用的是SSH+JSP，後來升級為SpringMVC+velocity，但是前後端的程式碼還是在一個專案中，現在使用的springCloud+node.js實現前後端分離，可以說前後端的資料互動一直在改變！

HTML：超文字標記語言，定義了文字，圖形，動畫等在瀏覽器上的圖形化介面，可以說HTML就是我們看得著，聽得到的東西！

但是HTML的標籤都是“死的”，只是頁面渲染，我們需要使用瀏覽器解釋語言（javascript等）來與後端互動，實現資料的傳輸，前端的請求方式包括：

①，form表單提交請求：透過在form標籤中使用action配置連結，使用method配置請求方法（get，post等），提交請求到後端，同時獲得資料填充表單！

②，使用超連結進行跳轉：使用a標籤，配置href跳轉地址可以跳轉到另外的頁面！

前端傳入的引數可以是作為get方法直接拼接在請求連結後面，也可以使用json格式的資料，放入請求體中，當然後端返回的有可能是資料，也有可能是其他的頁面連結，需要在前端進行處理，進行跳轉！