從MVC到Ajax再到前後端分離的思考

    <div class="postBody">
        <div id="cnblogs_post_body" class="blogpost-body" deep="8"><h1>　　前言</h1>

　　一位小妹去面試前端，前端leader問了”什麼是ajax？”，答：“接收後臺的資料，然後然後自己填充和渲染樣式”；一位小哥去面試後臺，技術經理問了“什麼是ajax？”，答：“在不需重新載入整個網頁的情況下，傳送非同步請求，返回json資料給前端”。準確答案到底是什麼？Ajax到底屬於前端還是屬於後端？前端（或者後端）到底需不需要懂得Ajax？Ajax請求與普通的http請求有什麼區別？資料庫中的資料通過Ajax請求和普通請求下分別是怎麼傳遞到前臺的…等等一些問題,似乎需要靜下心來理一理。

　　MVC篇

　　最典型的MVC就是JSP + servlet + javabean的模式,不少人的web起點應該也是這個，記得當時看到最多的問題就是JSP和Servlet區別，後來隨著Struts 、Spring MVC等框架出來，MVC被談論的更多了，越來越多的人開始想要深入學習和理解它，同時也有越來越多的問題開始圍繞MVC展開。基本的概念：MVC = Model View Controller = 模型－檢視－控制器,太過於概念化的東西確實不太好理解，也許框架都用了好幾年，一問MVC還是會懵。不過還是Talk is cheap，下面以Spring MVC + jsp的開發過程示例，同時也是資料在普通http請求後從資料庫傳遞到前端的過程。

　　背景：ssm專案中，將資料庫中TBL_PERSON表的記錄全部獲取，在前端以表格呈現出來，即<table>標籤下（因為自己寫的樣式實在太醜，重點關注過程吧）

　　1.Controller層關鍵程式碼

package com.mmm.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
 
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mmm.pojo.Person;
import com.mmm.service.PersonService;

@Controller
@RequestMapping("person")
public class PersonController {

    @Autowired
    PersonService personService;

        /**
     * 框架跳轉頁面預設是forward，也就是請求轉發
     * 這裡的model設定的屬性，在jsp頁面也能直接通過el表示式獲取
     * */
    @RequestMapping(value="httplist")
    public String httplist(Model model) {
        List<Person> list = personService.selectAll();
        model.addAttribute("list", list);
        return "person/list";
    } 

    ......
}

　　2.jsp頁面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>Person列表</title>   
  </head>

  <body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
        </tr>
        <c:forEach var="i" begin="0" end="${list.size() }">
            <tr>
                <td>${list[i].name }</td>
                <td>${list[i].gender }</td>
            </tr>
        </c:forEach>
    </table>
  </body>
</html>

　　3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/httplist，即可看到如下頁面，獲取到了資料庫中完整資料

　　Ajax篇

　　傳統web開發在沒有應用Ajax技術的時候，往往頁面是用jsp，而這也讓我們看到MVC的不足，檢視與控制器間的過於緊密的連線，每次請求必須經過“控制器->模型->檢視”這個流程，當java指令碼 + 各種表示式 + html程式碼 +javascript程式碼混雜一塊的時候，簡直痛不欲生，程式碼可讀性十分差，而且給後面維護和修改程式碼的人帶來很大阻礙。再說下Ajax，首先簡單介紹下，Ajax = 非同步 Javascript 和 XML，聽名字不難發現，並未涉及到後端java程式碼，核心物件XMLHTTPRequest（可擴充套件超文字傳輸請求），通過它，我們可以在不重新整理頁面的情況下，傳送非同步請求至後臺，並獲取後臺返回的json資料。說的簡單點，就是不重新整理或者跳轉頁面，傳送請求然後拿資料，在這裡，比較重要的一點，主動權是在前臺這邊，前臺拿到資料後再根據需求去填充資料內容，渲染樣式，實現頁面效果。而且由於Ajax基於的Javascript屬於前端指令碼，並不依賴於jsp環境，頁面寫Html也是可以的。所以下面以Spring MVC + Ajax + jsp示例（這裡的ajax採用Jquery寫法，工作中一般也是應用Jquery較多，原生js寫法相較繁瑣一點，這裡就不展示了），同時為了區別返回json資料和直接跳轉頁面的區別，在控制器中寫了兩個方法，一個用於跳轉頁面，但並未拿到資料，等頁面載入後，通過js發起Ajax請求到控制層拿到資料，再動態填充到頁面，並且無需重新整理頁面，所以後面我們在位址列輸入地址後，看上去像一次請求，其實一共兩次。

　　1.Controller層關鍵程式碼

package com.mmm.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mmm.pojo.Person;
import com.mmm.service.PersonService;

@Controller
@RequestMapping("person")
public class PersonController {

    @Autowired
    PersonService personService;

    /**
     * 這裡接受位址列請求，僅起到轉發頁面作用，並未傳遞到我們資料庫的內容
     * */
    @RequestMapping(value="toPage")
    public String httplist() {
        return "person/list";
    } 

    /**
     * 這裡@ResponseBody代表該方法接受請求後不是跳轉頁面，而是直接返回json資料
     * 注意引入json相關jar包，還有spring MVC配置中不要漏掉<mvc:annotation-driven/>
     * */
    @RequestMapping(value="ajaxlist")
    @ResponseBody
    public List<Person> ajaxlist() {
        List<Person> list = personService.selectAll();
        return list;
    } 

    ......
}

　　2.jsp頁面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>Person列表</title>
    <!-- 引入Jquery -->
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <!-- 編寫指令碼 -->
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url: '${pageContext.request.contextPath}/person/ajaxlist',
                type: 'post',
                dataType: 'json',
                success: function(data) {//這裡的data代表的就是返回person集合list
                    var html = "";
                    html += "<tr><th>姓名</th><th>性別</th></tr>";
                    for(var i in data){
                        html += "<tr><td>"+data[i].name+"</td><td>"+data[i].gender+"</td></tr>";
                    }
                    $("table").html(html);
                }
            });
        });
    </script>
  </head>

  <body>
    <table>
    </table>
  </body>
</html>

從MVC到Ajax再到前後端分離的思考

從MVC到Ajax再到前後端分離的思考

MVC篇

1.Controller層關鍵程式碼

2.jsp頁面

3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/httplist，即可看到如下頁面，獲取到了資料庫中完整資料

Ajax篇

1.Controller層關鍵程式碼

2.jsp頁面

3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/toPage，即可看到如下頁面，同樣獲取到了資料庫中完整資料（是兩次請求）

從壹開始前後端分離 [.netCore 填坑 ] 三十四║Swagger：API多版本控制，帶來的思考

真實資料對接從0開發前後端分離的企業級上線專案（再談前後端分離式手把手從0打造電商平臺-前端開發）

全程真實數據對接帶你從0開發前後端分離的企業級上線項目

真實資料對接從0開發前後端分離的企業級上線專案

最新對接真實資料從0開發前後端分離企業級上線專案實戰

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十║Vue基礎終篇：元件詳解+專案說明

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十一║Vue實戰：開發環境搭建【詳細版】

從壹開始前後端分離【 .NET Core2.0 +Vue2.0 】框架之十二 || 三種跨域方式比較，DTOs(資料傳輸物件)初探

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十三║Vue實戰：Vuex 其實很簡單

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 實現授權驗證登陸

從壹開始前後端分離 [ Vue2.0+.NetCore2.1] 二十六║Client渲染、Server渲染知多少{補充}

從壹開始前後端分離 [ vue + .netcore 補充專案2 ] 二七║ Nuxt 基礎：框架初探

從壹開始前後端分離 [ vue + .netcore 補充教程 ] 二八║ Nuxt 基礎：面向原始碼研究Nuxt.js

從壹開始前後端分離 [ vue + .netcore 補充教程 ] 二九║ Nuxt實戰：非同步實現資料雙端渲染

從壹開始前後端分離 [ vue + .netcore 補充教程 ] 三十║ Nuxt實戰：動態路由與Vuex狀態樹

從壹開始前後端分離 [ vue + .netcore 補充教程 ] 三十║ Nuxt實戰：動態路由+同構

從壹開始前後端分離 [ vue + .netcore 補程 ] 三十一║ Nuxt終篇：基於Vuex的許可權驗證探究

從MVC到前後端分離

從壹開始前後端分離 [.netCore 填坑 ] 三十二║ 四種方法快速實現專案的半自動化搭建

從壹開始前後端分離 [.netCore 填坑 ] 三十三║ ⅖ 種方法實現完美跨域

從MVC到Ajax再到前後端分離的思考

MVC篇

1.Controller層關鍵程式碼

2.jsp頁面

3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/httplist，即可看到如下頁面，獲取到了資料庫中完整資料

Ajax篇

1.Controller層關鍵程式碼

2.jsp頁面

3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/toPage，即可看到如下頁面，同樣獲取到了資料庫中完整資料（是兩次請求）

相關推薦

　　MVC篇

　　1.Controller層關鍵程式碼

　　2.jsp頁面

　　3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/httplist，即可看到如下頁面，獲取到了資料庫中完整資料

　　Ajax篇

　　1.Controller層關鍵程式碼

　　2.jsp頁面

　　3.tomcat啟動專案，位址列輸入http://localhost:8081/mm-web/person/toPage，即可看到如下頁面，同樣獲取到了資料庫中完整資料（是兩次請求）