一口氣從CSS講到Servlet再到JSP、Struts2，清蒸JavaWeb的前前后后。
B/S系統就是Browser/Server，瀏覽器/服務器系統，即，客戶在瀏覽器操作，而代碼實現的具體處理以及數據庫操作等，則由后臺服務器來完成，男耕女織，相得甚歡。比如我們查詢成績，我們通過瀏覽器輸入個人信息，并且把個人信息發送到后臺，后臺獲取了你的信息后作一系列處理并從數據庫中查出你的成績，千回百轉，最后把成績返回到瀏覽器頁面，展示在你的眼前，這就是典型的B/S系統。
而瀏覽器展示的靜態頁面，我們叫做HTML（超文本標簽語言），其實所謂超文本，它歸根結底是文本，就跟doc，txt一樣，只不過它超級的地方在于，它會堂而皇之的把信息展示在你面前，你打開一個網頁，不同部分有不同的顏色，按鈕，圖案，可以選擇，可以輸入，單選，復選，頭是頭，尾是尾，這都是HTML超級的地方。它其實把一個頁面分成了不同部分。比如說你要把文本的頭部寫在<HEAD>里面，把內容寫在<BODY>里面，如果一個頁面分為不同的框架，把每個框架寫在<frame>里面等等，各司其職，相得益彰。又比如，它定義了很多標簽，用<span>、<div>把每一小塊內容分開，可以輸入文字的標簽<input>,選擇項標簽<select>,按鈕標簽<button>等等。
瀏覽器這邊是客戶來輸入和查看的，而由服務器具體來處理，在JavaWeb中是由Servlet容器來處理的。它其實就是一個有組織，有紀律的Java程序?？蛻舳送ㄟ^HTML輸入一些信息（比如學號），Servlet會通過HttpServletRequest對象拿到你的學號，然后調用其他程序處理（用學號去數據庫查詢，查到你的成績返回給Servlet）,Servlet拿到成績，傳給HttpServletResponse對象，由它返回給前臺頁面，一氣呵成，有條不紊。當然，如果這個Servlet處理不了你的請求，它就會把你的請求轉發給另一個Servlet（使用RequestDispatcher來轉發），然后另一個Servlet來處理。
有時候比如你登錄一個頁面，每次訪問時都需要重新登錄，比較麻煩，而瀏覽器和Servlet達成默契，合謀出一個叫Cookie（緩存）的東西，把緩存放到客戶端，你如果第二次登錄時，系統會讀取緩存，直接提取你的用戶名和密碼，就不需要你再輸入了，當然，除了登錄，其他瀏覽信息等都可以放入緩存。但是由于緩存是放在客戶端的，也就是存儲在我們的電腦上，所以，無法存儲較大的信息，難當大任，這時就要用到Session（會話）了，它會把大量的數據保存在服務器端。
回到瀏覽器端，HTML不能只是干巴巴的黑白文字框框，需要對各個部分，按鈕是什么顏色的，圖片放在什么位置，輸入框多大，這些東西都需要裝飾，而裝飾工具就是CSS(學名叫：層疊樣式化表單)，你可以把HTML的每一個部位取出來，用CSS來給它噴漆、涂油、打蠟等，鶯歌燕舞，栩栩如生。而且，HTML不能上天，你在瀏覽器輸入你的學號，需要一種介質把它傳遞給Servlet。這種介質就是<form>表單的提交。也就是說，你把你要傳輸的信息都寫在<form>里，然后通過提交（如submit按鈕等）操作把信息傳送給后臺。
每次你想查詢一個信息，把輸入條件傳遞給后臺Servlet，然后Servlet搜索結果返回給網頁，這時，網頁會刷新，然后展示你要的信息。但是有時候你不想要刷新，比如你正在看一個廣告或者其他模塊，一刷新，正在看的東西就沒了，重新回到初始狀態，談笑間，檣櫓灰飛煙滅。這時就用到了ajax。用它提交條件信息，當后臺返回結果后，不需要刷新，就可以在無形中把信息展示給你，而不影響你正在觀閱的其他內容，大音希聲，大象無形，擁有安靜而高雅的姿態。
我們不能把所有的信息都讓后臺Java來處理，這會讓服務器很累，而且很麻煩。況且，我們需要一些酷炫的設計，想要通過直接操作HTML就能實現，比如，驗證輸入的學號格式正不正確，比如，在某個恰當時候彈出一個提示框，比如我想HTML任我擺布，在傳遞到后臺Java之前我就要做到這些，兵馬未動，糧草先行，JavaScript就是為你而來，它就是為了更方便操作HTML而發明的一種編程語言。我們可以定義一些對象來更好的封裝請求，可以定義一些方法來操作HTML的各個部位，可以編寫一個事件，當鼠標點擊某個按鈕時觸發等等。而DOM（文檔對象模型）就是為了輔助JavaScript的這一使命的，它把HTML的各個元素都封裝成一個個對象，通過JavaScript來操作這些對象。而且，DOM還把HTML的元素描繪成一個樹形結構，每個元素對應每個節點和位置，更方便我們對HTML進行增刪改查。不同于DOM，JavaScript使用BOM(瀏覽器對象模型)來把瀏覽器的相關信息封裝成對象，以方便操作瀏覽器（如果返回一頁，前進一頁，歷史記錄等等）。DOM只是操作HTML底層結構的，有時候它也中氣不足，比如當我點擊某個按鈕時，想要在彈出一個提示框的同時，同時按鈕要變色，也就是說，我想同時給按鈕綁定兩個事件，這時就用到DOM2了。DOM2，DOM3擴展了DOM，讓JavaScript對HTML有了更好的交互能力。很多時候，我們提交的請求信息太多，后臺在處理這些信息的時候會顯得手忙腳亂，而JSON應運而生，它把一系列的請求信息封裝成有規律的字符串，方便客戶端發送，也方便服務器端處理，無規矩不成方圓，JSON就是規矩。
JavaScript操作HTML已經如此便利，但是它看起來依然很笨拙，即使用它取出一個小小的HTML按鈕，也需要輸入很長的代碼（getElementsById...）,所以就有了JQuery，它是基于JavaScript框架開發的，用它可以使用很少的代碼達到使用純JavaScript同樣的效果，四兩撥千斤，然而它本質上就是JavaScript。而且由于歷史原因，IE瀏覽器的很多規則跟其他新銳瀏覽器都不同，導致JavaScript經常要為IE和其他瀏覽器寫不同的代碼，比如給按鈕增加事件函數時要用不同的方法等，然而JQuery統一了這個問題，橫掃六合，讓IE和其他瀏覽器有著同等規則的待遇。
我們之前說過，前端HTML的請求信息發送到后臺Servlet，Servlet把結果輸出到前端，那么如果要輸出的結果中含有大量的靜態HTML代碼需要返回，那么一行一行的html要在這后臺java代碼中拼湊，最后返回前端，HTML和Java代碼揉成一坨，實在不雅觀。jsp的出現讓整個世界都清新了。JSP柔合了html和servlet，它實質上就是一個變態的Servlet，當服務器在編譯時，會把jsp先轉化成Servlet，然后按照Servlet的處理方式往下進行。JSP嵌入了HTML和Servlet，有自己的格式，有自己的指令，有自己的對象，有自己的一整套規則，但是它的一顰一笑，在其轉化而成的Servlet文件中，都能找到對應的影子。它讓后臺Java只處理該處理的邏輯，而把繁瑣的html拼接、指令以及很多剪不斷理還亂的代碼柔合成一體，冰輪離海島，乾坤分外明。
問題又來了，即使有了JSP，土著Servlet依然要處理很多邏輯，如果邏輯特別多，每次Servlet都要忙里忙外，又是處理請求參數，又是拿著參數去數據庫查詢結果，又是顧這，又是顧那，應接不暇。在系統龐大的時候，Java代碼又變成新的一坨。MVC（Model，View，Controller）解決了這個問題，它理順了模型（比如成績單對象），展現層（比如JSP頁面），控制層（要處理的邏輯），丁是丁，卯是卯，三足鼎立，共治天下。而Struts2和Spring框架就是典型的MVC模式，并在此基礎上張揚了個性。（比如，Struts2會把 每個請求信息攔截下來，做一些處理后再交給Servlet。而Spring的特色更為別致，有很多本該在Java中實現的代碼，通過XML配置就可以完成，即使不懂編程語言也能夠參與其中，真正是老少皆宜，雅俗共賞）。
浙公網安備 33010602011771號