このガイドでは、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 を開きます:

ID 値は、ページをリフレッシュするたびに増加します。
要約
おめでとう! Spring ベースの RESTful Web サービスを使用する jQuery クライアントを開発しました。
関連事項
次のガイドも役立ちます。
新しいガイドを作成したり、既存のガイドに貢献したいですか? 投稿ガイドラインを参照してください: GitHub (英語) 。
すべてのガイドは、コード用の ASLv2 ライセンス、およびドキュメント用の Attribution、NoDerivatives クリエイティブコモンズライセンス (英語) でリリースされています。 |