你的第一杯Web 2.0 —— 快速瀏覽jQuery、Spring MVC和XStream/J...

再也不有頁面刷新：使用jQuery
相關廠商內容

免費迷你書下載：Flex入門指南——PHP開發者

Flash Builder 4 Beta和FlexUnit下的測試驅動開發

下載Flex 4 SDK，構建超級棒的Flex應用

使用Pixel Bender Toolkit製做特效——建立vintage tone過濾器(Part 2)

在Flash Builder4 beta中使用網絡監測器跟蹤網絡流量
相關贊助商

聚集最新RIA技術相關資源，提供Flash開發平臺相關工具高速下載，免費得到Adobe軟件的產品序列號。

在我參與建立的一些Web網站應用中，一直存在有對用戶理所固然的抱歉：「哦，對不起，我不得不讓你經受一些沒必要要的頁面刷新。」哈，這就是我在今年年初據說jQuery後，個人腦子裏一下閃過的念頭。

jQuery是個強大而非侵入式的JavaScript庫，但它的名字起得不好勁。它的簡潔而高可讀性的語法再次激發了我編寫JavaScript代碼的興趣。它的非侵入性能讓它只須要對既有代碼作小小的修改，就能很容易爲web應用添加一些豐富的功能——好比後臺表單提交。當你工做在一個很大的代碼庫，或者擴展性的重構沒法取得成效時，非侵入的特性顯得尤爲重要。個人老闆不會給我四周的時間推倒重來，爲一個已經存在的網站添加一些視覺效果。但我也許能夠有四個小時的時間，而這對jQuery來講足夠了。

做爲一個簡單的例子，咱們假設有一個汽車搜索功能，它會基於一個交通工具型號來返回結果。向文本框輸入文本，點擊提交，而後顯示結果。JSP看起來會是這樣：

 

在用戶輸入名稱並點擊提交後，在頁面刷新時整個屏幕會變白，而後就會顯示出結果來。這不是一個好的用戶體驗。如今，讓咱們用jQuery來改善一下用戶的體驗，只刷新頁面中那部分的確須要改變的部分。對這個既有頁面所作的修改是：
把搜索表單和搜索結果分紅兩個單獨的JSP頁面，這樣結果也能夠獨立的顯示，而不須要從新渲染搜索的表單。
在搜索表單JSP上添加一個佔位符，來存放搜索的結果。
添加一行jQuery代碼，來在後臺使用AJAX提交搜索表單內容，並把結果存放在佔位符 中。

修改後的代碼是這樣的：

 

 

當用戶輸入名稱並點擊了提交時，只有搜索結果的會刷新。這樣用戶體驗就獲得了改善，而咱們也不須要編寫太多的JavaScript代碼。讓咱們來深刻一點研究下這段jQuery腳本：

 

這段代碼的意思是：

第2行——「當頁面加載完成時……」

第3行——「找到一個id爲searchForm的表單，並讓它變成具有AJAX功能的表單（在後臺提交）」

第4行——「使用POST方法而不是GET」

第5行——「把搜索的結果放在一個id爲searchResults的DIV中」

這幾行jQuery代碼以$()開始，並老是會選擇某個元素來進行操做，好比「document」或者「#searchForm」。jQuery就像是個裝飾器，可讓你爲元素添加各類各樣有趣的行爲，好比具有AJAX提交功能的表單、可視化效果、拖拽等等。

這個例子演示出幾行代碼所包含的衆多功能，也表達了爲何我會喜歡jQuery：使用裝飾器方法來加強既有的web應用，是很是理想而完美的。不須要重寫既有的HTML，你使用jQuery就能夠添加新的行爲。
使用Spring MVC和XStream/Jettison返回數據而不是HTML

第一個例子中，jQuery是用在了客戶端，而在服務器端沒有什麼顯著的變化。咱們仍然保留基本的流程，用戶在瀏覽器上點擊某個元素，建立一個服務器請求，而後返回HTML內容。當若是服務器端能返回JSON或者XML格式的數據，而不是HTML，會怎樣呢？

返回數據而不是能夠展示的HTML，這可讓客戶端緩存結果，從而減小服務器請求的次數。數據自己要比HTML簡潔不少——這樣也減少了返回結果的尺寸。請看下面的這個例子：

 

在標準的流程中，三次用戶與瀏覽器的交互會帶來三次服務器請求。如今讓咱們看看一個優化事後，服務器只返回數據而不是HTML的流程：

 

在優化後的流程中，三次用戶交互只會產生一次服務器請求。

還有許多潛在的能夠由服務器返回的數據格式。具體選擇哪一種，能夠根據狀況而定。下面是一些選項以及選擇的緣由：服務器請求格式 什麼時候使用 使用頻率
完整HTML頁面 初始頁面加載 低
HTML片斷 在服務器端展示更加容易並且有必要。好比使用流行的標籤庫來顯示一個table。 低
JSONB

 {
  "car": {
     "id": "5",
     "make": "Acura",
     "model": "MDX"
   }
 }  在大多數服務器響應中均可以使用的數據格式。簡潔，而且很容易跟JavaScript配合工做。 高
XML

     Acura
     MDX

 複雜的沒法輕鬆使用JSON表示的數據。XML的結果包括元素和屬性，而JSON只包含元素。 低

 

讓咱們來看一個服務器返回JSON數據到瀏覽器的例子。咱們把原來的汽車型號搜索頁替換成一個新的頁面，它包含一個製造商（make）和型號（model）的下拉列表。當用戶選擇製造商時，對應那個製造商的全部模型就會自動更新。若是用戶選擇了一個型號，下面就會顯示一張列滿該可用型號年代的表格。

由服務器端開始，咱們會看到咱們如何使用Spring MVC以及XStream和Jettison來建立JSON數據。首先咱們會構建一個Spring MVC控制器：

 

第1行——@Controller註解告訴Spring MVC把這個類用做一個控制器。

第4行——@RequestMapping註解將請求URL映射處處理方法上。

第6行——建立ModelAndView對象，其中view名稱爲carselector，它將會映射到carselector.jsp。

第7行——使用鍵值makeList將一個製造商（Make）列表添加到ModelAndView中。這個對象能夠在JSP中經過${makeList}來取到。

第11行——再一次，@RequestMapping註解將請求URL映射處處理方法上。

第12行——@RequestParam將一個請求參數對應到一個方法參數上。

第13行——經過我寫的叫作JsonView的JSON視圖類來建立ModelAndView對象。Spring MVC讓編寫自定義視圖類變得很是簡單，而JsonView中就包含了XStream的邏輯。

第14行——使用JsonView所指望的鍵值將型號（Model）的列表添加到ModelAndView。

總的來講，控制器會響應兩個URL，「carselector.html」和「models.html」。它經過一個標準的JSP視圖針對 「carselector.html」返回一個HTML頁面。讓咱們來看看JsonView類，它針對「models.html」返回JSON結果：

 

第4行——使用JettisonMappedXmlDriver來初始化XStream，從而輸出JSON而不是XML。

第6行——Spring MVC視圖類必須實現render()方法。

第9行——從model中取出以前由控制器建立的數據。

第11行——實際生成JSON（儘管方法叫作toXML）。

它就是那麼簡單。XStream庫也包含一套註解，你能夠將其放在你本身的域中或者傳輸對象上，來提示如何展示JSON，但通常來講這個庫基本不須要什麼配置。

如今服務器端就生成了JSON，但客戶端如何使用它呢？針對這個問題，咱們須要再次來利用jQuery。請記住，咱們須要處理兩個事件：從「製造商（make）」下拉列表中選擇數值會更新「型號（model）」下拉列表中的數據。而選擇型號（model）下拉列表中的數值會填充型號（model）年表明格中的數據。下面是用jQuery的ready方法來綁定事件處理方法：

 

「select[name^=make]」表達式看起來很是像CSS選擇器，那是由於jQuery選擇器是CSS選擇器的一個超集（就好像CSS和 Regex有一個共同的孩子）。這些表達式至關強大，能夠用來同時選擇一個或多個對象。在這個例子中，表達式的意思是，「選擇一個名字叫‘make’ 的select元素，並把loadModels函數綁定到它的change事件上」。每次用戶從這個下拉列表中選擇數值時，瀏覽器就會產生change事件，而後loadModels函數就會被調用。

讓咱們來看一下其中一個事件處理器：

 

第2行——getJSON方法將會執行AJAX請求，並指望從服務器返回JSON數據。它須要三個參數：請求的URL，任何請求參數，以及一個一旦獲得服務器響應就被調用的回調函數。

第4行——回調函數是個閉包。JavaScript中的閉包相似於Java中的匿名內部類，它們能夠很方便地做爲回調函數來使用。要注意，這個函數指望從服務器返回的JSON數據是做爲一個參數傳入的。

第6行——在這一點上，咱們須要瞭解一點咱們使用到的JSON的結構。在這個簡單的例子中，model數據的結構是：

 

第6行的代碼意思是，「針對每個型號（model）……」

第7和第8行——從每個型號（model）構建一個元素

第10行——選擇name=model的select元素，並使用剛剛構建的options來代替select元素的option列表。

只需少許的JavaScript代碼，咱們就能夠作到：
註冊一個事件處理器
異步獲取JSON數據
基於JSON數據更新下拉列表的選項

這就是其強大之處，也是我很是喜好jQuery的緣由之一。那關於緩存呢？你能夠簡單地在getJSON調用以前添加一個「if」語句來檢查結果是否已經存在了。另外也有一個很好的叫作jCache的jQuery插件你可使用。
結論

jQuery + Spring MVC + XStream/Jettison提供了一個很棒的快速開發web應用的全棧式框架，能夠清晰地分離數據和表現層，爲用戶提供更加友好的體驗，並潛在地提 升性能。還有其餘什麼高質量框架能夠幫你作到這些嗎？固然也許有，但我喜歡jQuery、Spring MVC和XStream/Jettison的組合，並且我認爲它們都是各自領域的佼佼者。

你能夠從這下載到完整的範例代碼。