入門 | jQuery で RESTful Web サービスの使用

このガイドでは、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 クライアントを開発しました。

jQuery で RESTful Web サービスの使用

構築するもの

必要なもの

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

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

クライアントを実行する

要約

関連事項