Spring 3.0 的 Ajax 簡化

工程 | Keith Donald | 2010 年 1 月 25 日 | ...

在我上一篇文章中,我帶您了解 Spring 3 中針對 Web 應用程式開發的幾項增強功能。許多人表示有興趣針對 Ajax 遠端處理進行後續的文章。Spring 3 在這方面提供了許多優勢。請繼續閱讀,我將帶您了解。

Spring 與 Ajax 概觀

就本文而言,當我提到 Ajax 時,我指的是 Web 瀏覽器使用 JavaScript 與 Web 伺服器非同步通訊的能力。在伺服器端,Spring 提供了定義 Web 服務的程式設計模型,包括 JavaScript 用戶端使用的服務。在用戶端,現在也沒有人自行開發 Ajax 框架。大多數人使用已建立的 JavaScript 框架,例如 jQueryDojo

對 Ajax 用戶端的支援

在版本 3 之前,Spring 並未提供對 Ajax 遠端處理的支援。但這並沒有阻止我們的使用者擴展 Spring 以取得支援,或自行整合其他選項。有些人使用 DWR,尤其是在 JavaScript 框架興起之前的時期。最近,以 JSON 作為資料交換格式的 REST 風格遠端處理變得越來越流行,特別是因為 jQuery 等框架 使其變得非常容易

現在 Spring 3 已發佈,Spring MVC 中提供了對 Ajax 遠端處理與 JSON 的官方支援。這包括使用 Spring MVC @Controller 程式設計模型來產生 JSON 回應和繫結 JSON 請求的支援。在本文中,我將重點介紹如何使用此支援來實作幾個 Ajax 用例。與我的上一篇文章一樣,我將透過逐步介紹您可以自行實驗的範例應用程式來完成此操作。

MVC Ajax 範例

mvc-ajax 旨在說明 Spring MVC 的 JSON 支援。該專案可在我們的 spring-samples Subversion 儲存庫中取得,可使用 Maven 建置,並且可匯入 STS / Eclipse。mvc-ajax 的結構與我的前一篇文章中介紹的 mvc-basic 專案相同。事實上,兩者之間的 Spring 組態是相同的。

首先將專案部署到您的 Servlet 容器,然後存取 localhost:8080/mvc-ajax 的歡迎頁面,開始您的檢閱。由於我使用 STS,因此我首先將專案匯入 IDE,然後將其部署到內建的 Tomcat / tc-server 實例。

從伺服器取得 JSON

從歡迎頁面,啟動「Ajax @Controller 範例」連結。您將看到一個表單,用於建立新的帳戶。當您 Tab 到「名稱」欄位之外時,您的瀏覽器將詢問伺服器您剛輸入的名稱是否可用。如果不可用,則會顯示錯誤訊息,並且表單將保持停用狀態,直到您輸入可用的名稱為止。用戶端 JavaScript 處理此問題位於 /WEB-INF/views/account/createForm.jsp 中,如下所示


$(document).ready(function() {
    // check name availability on focus lost
    $('#name').blur(function() {
        checkAvailability();
    });
});

function checkAvailability() {
    $.getJSON("account/availability", { name: $('#name').val() }, function(availability) {
        if (availability.available) {
            fieldValidated("name", { valid : true });
        } else {
            fieldValidated("name", { valid : false,
                message : $('#name').val() + " is not available, try " + availability.suggestions });
        }
    });
}

這裡沒有任何 Spring 特定的內容,只是標準的 jQuery JavaScript。

在伺服器端,帳戶/可用性資源的 Controller 是標準 Java,帶有一些 Spring MVC 註解


@RequestMapping(value="/availability", method=RequestMethod.GET)
public @ResponseBody AvailabilityStatus getAvailability(@RequestParam String name) {
    for (Account a : accounts.values()) {
        if (a.getName().equals(name)) {
            return AvailabilityStatus.notAvailable(name);
        }
    }
    return AvailabilityStatus.available();
}

AvailabilityStatus 是一個普通的 Java Value Object,具有兩個屬性:一個可用性旗標,告知用戶端使用者名稱是否可用;以及一個替代方案陣列,如果您想要的名稱不可用,則建議使用。@ResponseBody 註解指示 Spring MVC 將 AvailabilityStatus 序列化到用戶端。Spring MVC 會自動序列化為 JSON,因為用戶端接受該內容類型。

在底層,Spring MVC 委派給 HttpMessageConverter 執行序列化。在本例中,Spring MVC 調用 MappingJacksonHttpMessageConverter,它建立在 Jackson JSON 處理器之上。當您使用 mvc:annotation-driven 組態元素且 Jackson 存在於您的類別路徑中時,此實作會自動啟用。

很酷吧?嘗試建立一個帳戶,然後使用相同的名稱建立另一個帳戶。您應該會看到一條錯誤訊息,建議使用替代名稱。開啟 Firefox 的 Firebug 或 Safari 的 Web Inspector 來偵錯非同步互動。

將 JSON 發佈到伺服器

Spring MVC 也提供將 JSON 發送到伺服器的支援。我發現對此的需求較少見,僅僅是因為發佈表單參數通常就足夠了。儘管如此,JSON 提供了一種靈活的資料交換格式,更豐富的 JavaScript 用戶端可以方便地使用它。在這些情況下,將 JSON 對應到伺服器端 Java Object 以進行處理的能力可能是一個有用的功能。

在範例中,JavaScript 事件處理常式攔截表單提交事件,並將表單資料發佈為 JSON。伺服器傳回新建立帳戶的 ID,然後用於顯示模式確認對話方塊


$("#account").submit(function() {
    var account = $(this).serializeObject();
    $.postJSON("account", account, function(data) {
        $("#assignedId").val(data.id);
        showPopup();
    });
    return false;
});

在伺服器端,Controller 是更標準的 Java,帶有 Spring MVC 註解


@RequestMapping(method=RequestMethod.POST)
public @ResponseBody Map<String, ? extends Object> create(@RequestBody Account account, HttpServletResponse response) {
    Set<ConstraintViolation<Account>> failures = validator.validate(account);
    if (!failures.isEmpty()) {
        response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        return validationMessages(failures);
    } else {
        accounts.put(account.assignId(), account);
        return Collections.singletonMap("id", account.getId());
    }
}

在這裡,@RequestBody 註解指示 Spring MVC 將 HTTP 請求的 body 對應到 Account 物件。Spring MVC 知道從 JSON 對應,因為用戶端將請求內容類型設定為 application/json。

create 方法也會驗證 Account 物件。如果存在驗證錯誤,則會傳回 HTTP 400 以及錯誤訊息,否則會傳回 HTTP 200 以及指派的帳戶 ID。

摘要

Spring 3 提供了一流的 Ajax 支援,JSON 作為 Spring MVC 模組的一部分。這包括使用 Spring MVC @Controller 程式設計模型結合 Jackson JSON 處理器來產生 JSON 回應和繫結 JSON 請求的支援。在本文中,我向您展示了此支援如何運作。我希望您覺得這篇文章很有用,並期待聽到更多您在自己的應用程式中運用 Spring 3 的經驗!

取得 Spring 電子報

隨時掌握 Spring 電子報的最新資訊

訂閱

領先一步

VMware 提供培訓和認證,以加速您的進展。

了解更多

取得支援

Tanzu Spring 在一個簡單的訂閱中提供 OpenJDK™、Spring 和 Apache Tomcat® 的支援和二進位檔案。

了解更多

即將舉辦的活動

查看 Spring 社群中所有即將舉辦的活動。

檢視全部