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 模組中正式提供了對使用 JSON 進行 Ajax 遠端呼叫的支援。這包括使用 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 示例”連結。你將看到一個建立新 Account 的表單。當你離開“名稱”欄位時,瀏覽器會詢問伺服器你剛剛輸入的名稱是否可用。如果不可用,將顯示錯誤訊息,並且表單將保持停用狀態,直到你輸入一個可用的名稱。處理此功能的客戶端 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。

在伺服器端,負責 account/availability 資源的 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 值物件,具有兩個屬性:一個可用性標誌,告訴客戶端使用者名稱是否可用;以及一個替代名稱陣列,如果所需的名稱不可用則建議使用。@ResponseBody 註解指示 Spring MVC 將 AvailabilityStatus 序列化到客戶端。Spring MVC 自動將其序列化為 JSON,因為客戶端接受該內容型別。

在底層,Spring MVC 將序列化任務委託給 HttpMessageConverter。在這種情況下,Spring MVC 呼叫基於 Jackson JSON 處理器的 MappingJacksonHttpMessageConverter。當你使用 mvc:annotation-driven 配置元素且 classpath 中包含 Jackson 時,此實現會自動啟用。

很酷吧?嘗試建立一個 Account,然後用相同的名稱再建立一個。你應該會看到一個錯誤訊息,建議使用其他名稱。開啟 Firefox 的 Firebug 或 Safari 的 Web Inspector 來除錯非同步互動。

向伺服器 POST JSON

Spring MVC 也提供了向伺服器傳送 JSON 的支援。我發現這種需求不太常見,因為通常 POST 表單引數就足夠了。然而,JSON 提供了一種靈活的資料交換格式,功能更豐富的 JavaScript 客戶端可以方便地使用。在這些情況下,能夠將 JSON 對映到伺服器端 Java 物件進行處理是一個有用的功能。

在示例中,一個 JavaScript 事件處理器攔截了表單提交事件,並將表單資料作為 JSON POST 到伺服器。伺服器返回新建立 Account 的 ID,然後用於顯示一個模態確認對話方塊:


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

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


@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 請求體對映到 Account 物件。Spring MVC 知道從 JSON 對映,因為客戶端將請求的 Content Type 設定為 application/json。

create 方法還驗證了 Account 物件。如果存在驗證錯誤,將返回 HTTP 400 並帶上錯誤訊息;否則,將返回 HTTP 200 並帶上分配的賬戶 ID。

總結

Spring 3 作為 Spring MVC 模組的一部分,提供了對使用 JSON 的一流 Ajax 支援。這包括結合 Jackson JSON 處理器,使用 Spring MVC 的 @Controller 程式設計模型生成 JSON 響應和繫結 JSON 請求的支援。在本文中,我向大家展示了這項支援是如何工作的。我希望這篇文章對你有所幫助,並期待聽到更多你在自己應用程式中使用 Spring 3 的經驗!

獲取 Spring 快訊

透過 Spring 快訊保持聯絡

訂閱

保持領先

VMware 提供培訓和認證,助你加速進步。

瞭解更多

獲取支援

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

瞭解更多

近期活動

檢視 Spring 社群的所有近期活動。

檢視全部