本文重在闡明對於前後端分離設計的一些小思考，同時利用ajax結合SSM框架,實現的一個簡單的交互案例。
ps:筆者僅僅是一名學生，觀點不免有些侷限性，如果您讀後有有更好的實現方式。歡迎在文末留言，筆者感激不盡。
提出問題
我們在平時學習javaweb開發時經常是頁面展示信息和後臺邏輯代統統在idea或者eclipse進行編寫，筆者今天突然有了這樣的思考：在實際工作中我們往往會各司其職，在開發一個項目時不可能一直等待前端開發將頁面寫好，然後在交由後端開發人員進行後臺邏輯的編寫。所以筆者產生了疑問：前後端如何進行分離？前臺如何調用後臺接口信息？
思考問題
筆者結合所學的計算網絡知識想到，在網絡通信的過程中網際信息往往會跋山涉水，網線的對面可能是來自五湖四海的朋友。如此龐大的網絡通過什麼來標定資源地址呢？答案顯而易見：就是通過資源的ip地址。由此筆者想到完全可以可以用url（統一資源定位符）來實現前臺界面對後端接口的訪問。
初步構想
前端有一種ajax異步請求的方式可以實現對後臺信息的訪問，平時我們在集成開發環境下時使用ajax發送請求僅僅寫資源的相對訪問路徑即能完成交互，但是此時由於頁面開發同後臺邏輯代碼編寫分離，此時不能在使用原先相對路徑的方式來進行資源的訪問了而必須使用絕對路徑的方式。
此時後端代碼邏輯同原先的開發並不會有大浮動的變動，要做的依舊是通過三層架構的設計所有處理邏輯在Controller中完成。
動手實踐
補充知識
跨域是指從一個域名的網頁去請求另一個域名的資源。比如從www.baidu.com 頁面去請求 www.google.com 的資源。跨域的嚴格一點的定義是：只要 協議，域名，端口有任何一個的不同，就被當作是跨域。
此時我們的開發便相當於跨域開發，所以在開發過程要注意跨域的處理請求頭的設置：
如果在後端頁面請求設置響應頭信息如下：
response.setHeader("Access-Control-Allow-Origin","*");前端頁面訪問時會在控制檯拋出：No 'Access-Control-Allow-Origin' header is present的問題
錯誤信息~~~
實現
前端代碼： ps：(利用jquery封裝後的ajax請求)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div>
前後端交互處理
</div>
</body>
<script>
$.ajax({
url: 'http://localhost:8080/data/hello', //後端訪問地址信息
crossDomain: true, //跨域設置
type: 'GET',
success: function(data) {
console.log(data); //在控制輸出服務器端的響應信息
}
});
</script>
</html>
後臺邏輯
package cn.itcast.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Controller
@RequestMapping("/data")
public class Data {
/***
* 檢查頁面請求，完成數據響應
*/
@RequestMapping("/hello")
public void sendData(HttpServletRequest request, HttpServletResponse response) throws IOException {
//設置響應頭信息
response.setHeader("Access-Control-Allow-Origin","*");
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,DELETE");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
response.setHeader("Access-Control-Max-Age","3600");//關鍵:設置信息存活時間
System.out.println("訪問時間" + new Data().toString());
response.getWriter().print("hello word");
}
}
效果
結語
通過ajax技術實現了前後端接口的交互，實現原理其實挺簡單的就是前臺就是前端利用axaj像後端接口發送請求，並且獲取到後臺接口提供的數據，最終在頁面渲染到前臺界面。由此類推當渲染數據信息時完全可以在後端傳回json數據信息，之後在前臺界面解析json數據信息。
我們在最初學習javaWeb基礎是或多少或少的都曾有過用jsp作爲視圖層的開發體驗，我們有過這樣的經歷：利用jsp提供的jsel/el表達式獨自作完成後臺數據在前臺界面的顯示。隨着前後端的分離我們不在這樣繁瑣的考慮頁面，而專注於後臺數據的提供。
我覺得隨着技術的更迭，jsp技術會漸漸被取代，隨着分工的逐漸細化，後端程序員應該更加專注於後臺邏輯的實現，而淡化數據在前端渲染工作。這也導致了前端工作任務的加重和後端邏輯功能的複雜化，對於編程提出了很大的挑戰。
程序員就是在不斷地發現問題，不斷的解決問題。在不斷的自我突破中，實現自身的價值，或許此時博客前的您有更好的實現方案，歡迎您在博客下留言，一起學習，一起進步。