JSONを利用する画面
ではアプリケーションからJSONデータを取得する画面を用意して、実際にデータのやり取りをしてみます。今回サンプルにて用意したアプリケーションを通して、その利用例を紹介します。
サンプルの画面では、Struts 2 jQueryプラグインの機能を利用して、入力フィールドにオートコンプリートの機能を設けました。今回は簡単に、何か値を入力すると関東とその周辺の都道府県の候補が出力される仕組みにしました。ブラウザにて、http://127.0.0.1:8080/JSONSample/をアクセスすると入力画面が表示されるので、実際に何か値を入力してみましょう。すると図1のように、入力候補が出力されます。この候補出力には、AJAXで先ほどのStruts 2のActionを呼び出し、その結果をJSONで受け取るようになっています。
この画面のコードは次のようになります。Struts 2 jQueryプラグインを利用して、AJAXリクエストを簡単に行えるようにし、さらにjQuery UIの機能を利用しています。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<head>
<sj:head jqueryui="true" jquerytheme="custom" customBasepath="./template/themes" compressed="false" ajaxcache="false" locale="ja" />
<!-- Struts2 JavaScript 定義 -->
<script language="JavaScript" src="${pageContext.request.contextPath}/struts/utils.js" type="text/javascript"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/struts/xhtml/validation.js" type="text/javascript"></script>
</head>
<body>
<div id="result">
<s:form id="formValidate" theme="xhtml" cssClass="yform" onsubmit="return false;">
<!-- aj:autocomoleteを利用した検索機能。-->
<div class="type-text" >
都道府県(pref) :
<s:url id="prefurl" action="json/search" />
<sj:autocompleter
id="inputpref"
href="%{prefurl}"
title="オートコンプリート対応"
/>
</div>
</s:form>
</div>
<!-- JSP上のオブジェクトをデバッグ出力(※2) -->
<s:debug />
</body>
</html>
AJAXリクエストを行いJSONレスポンスを受け取っている箇所は、<sj:autocompleter>になります。この<sj:autocompleter>は、名前のとおり、オートコンプリート機能を提供するテキストボックス部品です。ここでは単にサーバからの応答結果を候補表示しているだけですが、入力されたテキストから候補の内容を絞り込むこともできます。
実際にリクエストをしている箇所は、href属性の値で、その値は<s:url>で指定しているURLである、json/searchになります。
<s:debug />を記述した画面では、JSP上で扱えるオブジェクト一覧を出力するデバッグ画面を出すことができます。JSP内でしか存在しない一時オブジェクトも確認できるのでデバッグ時に利用するとよいでしょう。
今回は非常に簡単な例ですが、さらに複雑な検索機能や、マスター検索を利用した機能を、項目別、非同期で実装できるようになります。Actionクラスの実装を変えることなく実装が可能になり、画面実装や設計も簡単にできるようになります。
JSONPの利用
JSONプラグインではJSONP（JavaScript Object Notation with Padding）にも対応しています。これにより、クロスドメイン間（スクリプトとは別のドメイン間）でのHTTP通信が可能になり、通信後に受け取ったデータを別のJavaScript関数へ引き渡すこともできます。
今回はJSONPリクエストを要求して、先ほどのActionクラスのように都道府県データを取得する画面を使って説明します。まずは元となるJSPからです。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<head>
<sj:head jqueryui="true" jquerytheme="custom" customBasepath="./template/themes" compressed="false" ajaxcache="false" locale="ja" />
…(中略)…
<script language="JavaScript" type="text/javascript">
$(document).ready( function() {
$.ajax({
url: 'http://127.0.0.1:8080/JSONSample/json/jsnoplist',
dataType: 'jsonp',
success: function(data) {
// レスポンスを受け取った後にダイアログ表示
alert("結果をActionクラスから受け取りました");
// JSONP経由で要求した配列データを格納
var list = new Array(data);
for ( i=0;i<list.length;i++ ) {
// データの数だけ内容をresult要素に追加
$("#result").append("<span>" + list[i] + "</span>");
}
}
});
});
</script>
</head>
<body>
JSONPを利用した画面。
<div id="result">
<!-- データ受け取り部分 -->
</div>
<s:debug />
</body>
</html>
この画面の動きは次のようになります。
- （1）表示後、$(document).ready()にて起動される $.ajax()が起動
- （2）$.ajax()内のurlで指定した
http://127.0.0.1:8080/JSONSample/json/jsnoplistがリクエストされる。dataTypeにてjsonpが指定されることでJSONP形式となる - （3）jsonplistで呼び出されたActionクラスのレスポンスを受け取り、ダイアログが表示される
- （4）<div id="result">に受け取った都道府県の内容が並べられる
サンプルでは、（1）～（3）が図2になり、ダイアログを閉じた後の（4）が図3になります。http://127.0.0.1:8080/JSONSample/jsonpにて確認してみましょう。
