JSONフォーマットを扱う
1) はじめに
JSONとはJavaScript Object Notationの略称です。
JavaScriptで評価されるオブジェクトは全てJSON形式で扱われ、XMLHttpRequestもこの形式をサポートしています。
Weberフレームワークは、サーバで処理した結果をJSON形式のオブジェクトで返す
ことができます。
ここではサーバで生成したオブジェクトからJSON形式に変換するサンプルについてご紹介します。
ここで紹介するWebアプリケーションの構成は以下のとおりです
2) 入力画面の作成 (rss2.html)
まず入力となる画面を作成します。
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Ajax Sample1</title>
<style type="text/css">
#items {background-color: #ccffcc}
</style>
<script language="JavaScript" src="./../../js/xmlhttp.js"></script>
<script type="text/javascript">
//<![CDATA[
var httpObj;
var objID;
function reqItems(arg){
objID = arg;
httpObj = createXMLHttpRequest(displayData);
httpObj.open("GET", "./html_4_0/json/sample.wb");
httpObj.send(null);
}
function displayData(){
var data;
var resultData = "<p><table border='1'>";
if (httpObj.readyState == 4 && httpObj.status == 200) {
data = eval("("+httpObj.responseText+")");
for(var i=0; i<data.item.length; i++)
{
var iCode = data.item[i].itemCode; // 商品コード
var iName = data.item[i].itemName; // 商品名
var iPrice = data.item[i].itemPrice; // 商品価格
resultData += "<tr><th>"+iCode+"</th><td>"+iName+"</td><td>"+iPrice+"円</td></tr>";
}
resultData += "</table></p>";
//alert(resultData);
document.getElementById(objID).innerHTML = resultData;
}
}
//]]>
</script>
</head>
<body>
<h1>JSONのデータを表示する2</h1>
<p>JSONのデータを読み込み表示します</p>
<input type="button" value="jsondataを読み込み" onClick="reqItems('outArea'); return false;"/><br/>
<div id="outArea"></div>
</body>
</html>
3) バリュークラスの作成(Computer.java)
Itemクラスは、クライアントに返す情報の型を定義しています。
このクラスはPOJOでなければなりません。
package weber_4_0_sample.org.itscool.json;
public class Item {
private int itemCode;
private String itemName;
private int itemPrice;
public int getItemCode() {
return itemCode;
}
public void setItemCode(int itemCode) {
this.itemCode = itemCode;
}
public String getItemName() {
return itemName;
}
public void setItemName(String itemName) {
this.itemName = itemName;
}
public int getItemPrice() {
return itemPrice;
}
public void setItemPrice(int itemPrice) {
this.itemPrice = itemPrice;
}
}
4) アクションクラスの作成(RssXmlSampleAction.java)
このサンプルのアクションクラスです。
package weber_4_0_sample.org.itscool.json;
import org.itscool.commons.document.BeanToJsonDocument;
import org.itscool.weber.action.Action;
import org.itscool.weber.action.ActionBucket;
import org.itscool.weber.controller.Globals;
public class JsonSampleAction extends Action {
public static final String LINE=System.getProperty("line.separator");
public String doExecute(ActionBucket bucket)throws Exception{
Item item = new Item();
BeanToJsonDocument beanToXml = new BeanToJsonDocument("item");
item.setItemCode(91);
item.setItemName("塩ラーメン");
item.setItemPrice(300);
beanToXml.addElement(item);
item.setItemCode(94);
item.setItemName("味噌ラーメン");
item.setItemPrice(290);
beanToXml.addElement(item);
String text = beanToXml.parseText();
System.out.println(text);
bucket.print(text);
return Globals.RET_NOFORWARD;
}
}