【ajax:第二回】ajaxを使ったHTTP通信方法

Javaウェブアプリ開発

はじめに

DreamHanksの松下です。

前回はajaxの概要と簡単な使い方について解説します。
今回はajaxを使ってサーバーにリクエストを投げて、サーバーからレスポンスを返す方法

連載記事まとめ

 

サンプルアプリの仕様について

アプリケーションサーバー側での処理を解説する前に
軽くサンプルで作る画面の仕様について解説します。

 

このアプリでは複数の検索条件を入力し検索ボタンを押下した場合に
サーバーでその検索条件に当てはまるDBの複数のレコードを取得し、Listでレスポンスします。

そして、そのレスポンスを使って非同期でjavascriptを使って、HTMLタグを動的に生成します。

 

ajaxを使ってサーバーにリクエストする

ajaxを使うために

ajaxはjQueryのライブラリを使って使えるようになる非同期処理です。
ですので、jQueryをインポートしてください。

サーバーにリクエスト投げるまでのJSPの解説

検索ボタンについて

検索ボタンにはonclick要素が付いていて、
検索ボタンを押下するとmakeTableというメソッドが実行されます。
makeTableメソッドが実行されるとまず、reqParamの設定をします。

 

reqParamについて

jQueryを使って$(“#multiSearch”).val()画面で入力された値を取得し、
multiSearchというkeyにマッピングしています。

 

SpringMVCモデルでは通常<f:input>のinputタグを使ってpathingをして、
Formクラスのsetterメソッドを使ってサーバー側に値を送ります。

しかし、今回はajaxを使うので普通のinputタグを使用します

 

リクエストを投げる

前回の記事で解説したように、$.ajax({})内でajaxの設定をします。

そして、下記のURLのメソッドに遷移します。

 

サーバー側の処理

リクエストの取得の仕方

画面側からリクエストを受けるために引数に@RequestBodyというアノテーションを使います。

 

画面からこのメソッドにリクエストを投げた時に、
HTTP通信はどれがリクエストパラメータを格納する引数なのか理解できません。@RequestBodyを引数に設定することによって、リクエストパラメータが格納されます。

json形式で送らるため、引数の型はMap<String, Object>となります。

 

レスポンスの送り方

受け取ったリクエストパラメータを使って、DBとやり取りをして
検索条件に合うデータをListで取得します。

レスポンスを返す場合は、returnで変数を設定することによって返せます。
しかし、この時にメソッドに@ResponseBodyというアノテーション設定する必要があります。」

このアノテーションは戻り値であるboardListに掛かっています。

 

最後に

次回はサーバーから返却されたレスポンスを使って、動的にHTMLタグを生成する方法について詳しく解説いたします。

お読みいただきありがとうございました。

 

 

 

コメント