このガイドでは、Spring MVC ベースの RESTful Web サービス (英語) を使用する単純な jQuery クライアントを作成する方法を説明します。

構築するもの

Spring ベースの RESTful Web サービスを使用する jQuery クライアントを構築します。具体的には、クライアントは CORS を使用した RESTful Web サービスの構築で作成されたサービスを使用します。

jQuery クライアントは、ブラウザーで index.html ファイルを開くことによってアクセスされ、次の場所でリクエストを受け入れるサービスを消費します。

http://rest-service.guides.spring.io/greeting

サービスは、挨拶の JSON (英語) 表現で応答します。

{"id":1,"content":"Hello, World!"}

jQuery クライアントは、ID とコンテンツを DOM にレンダリングします。

必要なもの

  • 約 15 分

  • お気に入りのテキストエディター

  • 最新の Web ブラウザー

  • インターネット接続

jQuery コントローラーを作成する

最初に、REST サービスを使用する jQuery コントローラーモジュールを作成します。

public/hello.js

$(document).ready(function() {
    $.ajax({
        url: "http://rest-service.guides.spring.io/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

このコントローラーモジュールは、単純な JavaScript 関数として表されます。jQuery の $.ajax() メソッドを使用して、http://rest-service.guides.spring.io/greeting (英語) で REST サービスを使用します。成功すると、受け取った JSON を data に割り当て、事実上 Greeting モデルオブジェクトにします。id および content は、それぞれ greeting-id および greeting-content DOM 要素に追加されます。

jQuery promise .then() の使用に注意してください。これにより、$.ajax() メソッドが完了したときに匿名関数を実行し、完了した AJAX リクエストから data の結果を渡すように jQuery に指示します。

アプリケーションページの作成

jQuery コントローラーができたため、クライアントをユーザーの Web ブラウザーにロードする HTML ページを作成します。

public/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div>
            <p class="greeting-id">The ID is </p>
            <p class="greeting-content">The content is </p>
        </div>
    </body>
</html>

<head> セクション内の次の 2 つのスクリプトタグに注意してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="hello.js"></script>

最初のスクリプトタグは、コンテンツ配信ネットワーク(CDN)から縮小された jQuery ライブラリ(jquery.min.js)をロードするため、jQuery をダウンロードしてプロジェクトに配置する必要はありません。また、アプリケーションのパスからコントローラーコード(hello.js)を読み込みます。

また、<p> タグには class 属性が含まれていることに注意してください。

<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>

これらの class 属性は、jQuery が HTML 要素を参照し、REST サービスから受信した JSON の id および content プロパティの値でテキストを更新できます。

クライアントを実行する

クライアントを実行するには、Web サーバーからブラウザにクライアントを提供する必要があります。Spring Boot CLI(コマンドラインインターフェース)には、Web コンテンツを提供するためのシンプルなアプローチを提供する Tomcat サーバーが組み込まれています。CLI のインストールと使用の詳細については、Spring Boot でアプリケーションの構築を参照してください。

Spring Boot の組み込み Tomcat サーバーから静的コンテンツを提供するには、Spring Boot が Tomcat を起動することを認識できるように、最小限の Web アプリケーションコードを作成する必要もあります。Tomcat を実行することを Spring Boot に知らせるには、次の app.groovy スクリプトで十分です。

app.groovy

@Controller class JsApp { }

これで、Spring Boot CLI を使用してアプリを実行できます。

spring run app.groovy

アプリが起動したら、ブラウザで http://localhost:8080 を開きます:

Model data retrieved from the REST service is rendered into the DOM.

ID 値は、ページをリフレッシュするたびに増加します。

要約

おめでとう! Spring ベースの RESTful Web サービスを使用する jQuery クライアントを開発しました。