REST風サービスをJavaEEで構築する方法03(RESTクライアント編)

今回はJavaScript(jQuery)を使用して、簡単なRESTクライアントを作成し、前回作成したREST風サービスを実行する方法を紹介する。

<前提条件>
下記の記事を読了していること。
・REST風サービスをJavaEEで構築する方法01(導入編)
・REST風サービスをJavaEEで構築する方法02(雛形プロジェクト編)

<全体像から見た位置づけ>
RESTクライアントの実装を行う。

<手順概要>
1.jQueryのライブラリをダウンロードする
2.jQueryを使用する準備をする
3.index.htmlファイルを編集する

<手順詳細>
1.jQueryのライブラリをダウンロードする
下記URLよりjQueryのライブラリファイルを取得する。
http://jquery.com

2.jQueryを使用する準備をする
プロジェクトツリーの「Webページ」を右クリックし、[新規]>[フォルダ]を選択する。

表示されたダイアログのフォルダ名に「js」と入力し、【終了(F)】ボタンを押下する。

作成された「js」フォルダを右クリックし、[新規]>[フォルダ]を選択する。

表示されたダイアログのフォルダ名に「libs」と入力し、【終了(F)】ボタンを押下する。

作成した「libs」フォルダに手順1でダウンロードしたjQueryライブラリのファイルをコピー&ペーストする。

3.index.htmlファイルを編集する
【GETメソッド】ボタンを押下すると、前回作成したREST風サービスと通信を行い、サーバからのレスポンスをダイアログに表示するRESTクライアントを作成する。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- jQueryライブラリの読み込み -->
        <script src='js/libs/jquery-1.11.2.min.js'></script>
        
        <!-- RESTクライアントの記述 -->
        <script>
             $(function(){
                 
                 $('#btnGet').on('click', function(){    
                     $.ajax({
                       type: "GET",
                       url: "http://localhost:8080/SampleRest/webresources/sampleApi/getSample",
                       success: function(data){ 
                           alert(data);
                       }
                    });
                 });
             });
        </script>
        
    </head>
    <body>
        <input type="button" value="GETメソッド" id="btnGet" />
    </body>
</html>