5 ZipcodeServiceを使った住所の検索
一通りの実装が完了したら、プロジェクトをサーバー上で実行しよう。プロジェクトマネージャーから［実行］-［サーバーで実行］を選び、使用するサーバーとして「Liberty Profile」を指定する（図5.1）。
起動が完了したら、Webブラウザからリクエスト用のURLにアクセスしてみる。本稿の例では、すべての住所データを取得したい場合のURLは「http://localhost:9080/ZipcodeService/ws/address/all」であり、アクセスすると図5.2のようなJSONデータが返ってくるはずだ。
郵便番号を指定して検索する場合には、URLは「http://localhost:9080/ZipcodeService/ws/address/search?zip=郵便番号」となる。検索条件として「5220002」を指定した場合には、図5.3のようなJSONデータが返される。
続いて、JSON形式でのリクエストを試してみよう。今回は、リクエストを発行するクライアント側のHTML／JavaScriptとして次のようなコードを用意した。リクエストはAjaxによって発行し、レスポンスデータはテーブルで表示する。JavaScriptフレームワークはjQueryとDataTablesを利用している。DataTablesは、検索やソートなどの機能を持ったテーブルを簡単に構築することができるjQueryプラグインである。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>住所検索</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable();
});
$(function () {
$('#searchButton').click(function() {
// テーブルの初期化
$('#dataTable').DataTable().destroy();
// リクエスト先のURL
var target = "http://localhost:9080/ZipcodeService/ws/address/jsonsearch";
// リクエストパラメータ用のJSONデータ
var paramData = { "zip" : $('#zipInput').val() };
// リクエストを発行してデータを取得し、テーブルを構成する
$('#dataTable').DataTable( {
"columns": [
{ "data": "id", "sDefaultContent": "" },
{ "data": "zip", "sDefaultContent": "" },
{ "data": "address", "sDefaultContent": "" }
],
"ajax": {
"url": target,
"type": "POST",
"contentType": "application/json",
"data": function () {
return JSON.stringify( paramData );
}
},
"sAjaxDataProp": ""
});
});
});
</script>
</head>
<body>
<h1 class='ui-widget-header'>住所検索</h1>
<div style="margin:20px">
郵便番号： <input id="zipInput" type="text" size="20px" />
<button id="searchButton" type="submit">検索</button>
</div>
<div style="margin:20px">
<table id="dataTable" class="display">
<thead align="left">
<tr>
<th width="10%">ID</th>
<th width="20%">郵便番号</th>
<th>住所</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
DataTablesでは、ajaxオプションを指定することで、jQueryと同様にAjax通信によってリクエストを発行し、その結果をテーブルのデータとしてセットすることができる。この例では、フォームに入力された文字列をzipパラメータの値とするようなJSONデータを作成し、それを使って「http://localhost:9080/ZipcodeService/ws/address/jsonsearch」に対してリクエストを発行している。
例えば郵便番号に「5220002」を入力して検索した場合、図5.5のような結果になった。
このときのリクエストおよびレスポンスのJSONデータは次のようなものになっていた。
{ "zip" : "5220002" }
[
{ "address" : "滋賀県彦根市松原",
"id" : "0075683",
"zip" : "5220002" },
{ "address" : "滋賀県彦根市松原町",
"id" : "0075684",
"zip" : "5220002"}
]
