前言 一位小妹去面試前端，前端leader問了"什麼是ajax？"，答：“接收後臺的數據，然後然後自己填充和渲染樣式”；一位小哥去面試後臺，技術經理問了“什麼是ajax？”，答：“在不需重新載入整個網頁的情況下，發送非同步請求，返回json數據給前端”。準確答案到底是什麼？Ajax到底屬於前端還是屬於 ...
前言
一位小妹去面試前端，前端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 items="${list }" 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:
