12月7日(木)1、2コマ目
今日、やったこと
[REST API]サンプルアプリ拡張(クライアントサイド)
今日のホワイトボード
前回作成したREST APIのサンプルアプリのクライアント側の検索機能を追加しました。
MyResourceクラスのアノテーション
@Pathアノテーション
リクエストのURLとメソッドを紐づける。
|
| 図 @Pathアノテーション |
@PathParam、@QueryParam
URLのパラメータとメソッドの引数を紐づける。
|
| 図 @PathParam、@QueryParam |
web.xmlとURL
HTMLファイル search.htmlを追加して、リクエストしても表示されない。
web.xmlの<servlet-mapping>が下図のようになっているため。
|
| 図 web.xmlとURL |
この<url-pattern>だとURLが
http://localhost:8080/jersey_sample1/
のあとになにが続いてもサーブレット(MyResourceクラス)をリクエストしてしまう。
サーブレットは以下の
http://localhost:8080/jersey_sample1/webapi/
でリクエストするようにweb.xmlを変更。
JavaScriptからリクエスト
この授業ではfetch()を使う。
|
| 図 fetch()メソッド |
レスポンスはfetch()の戻り値の中に含まれる。戻値はPromissオブジェクト。
Promissオブジェクトのthen()で戻り値を処理する。
innerHTML
あるタグの子要素すべて。
|
| 図 innerHTML |
<tr>タグ、<td>タグ
<td>と</td>の間はテキストノード。
テキストノードの新規作成は createTextNode() で行う。
|
| 図 <tr>タグ、<td>タグ |
今日のソースコード
今日作成したクライアント側の検索機能のソースコード。
search.html
search.js
サーバー側は変更なし。
次回は
クライアント側に新規登録、変更、削除機能を追加。
