JSONでサーブレットにリクエストを投げて、レスポンスのJSONにあるメッセージをブラウザに表示するサンプル

サーブレットJavaScript間のメッセージのやり取りをJSONを使って行いたい場合。
つまり、リクエストをJSONで飛ばして、レスポンスとして返ってきたJSONをJavaScript側で解析するということ。
RESTfulなWebアプリケーションを作る一歩目になる。
では、ブラウザ側の記述をみていく。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON TEST</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="js/test.js" charset="utf-8"></script>
</head>
<body>
<p>サーブレットへのリクエストに投げるメッセージを入力してください。:</p>
<input type="text" size="30" id="message">
<input type="button" id="request" value="送信する">
<div id="result">
<p>結果:</p>
</div>
</body>
</html>

ここではテキストボックスにサーブレットに投げるメッセージを入力する。
result属性を持つdiv要素にサーブレットから返ってきたJSONのメッセージを表示する。

では、
js/test.jsで読み込まれているJavaScriptはどんなのかというと・・・

$(function() {
var requestObj = {
message : null,
};
$("#request").click(function() {
//リクエスト用のオブジェクトに値を詰め込む
requestObj.message = $("#message").val();
//JavaScriptのオブジェクトをJSONに変換する
var requestJson = $.toJSON(requestObj);
console.log(requestJson);
$.ajax({
type: "GET",
url : "/test_project/jsontest",
data: {requestJs : requestJson},
success : function(data) {
//alert(data.responseMessage);
$("#result").append(data.responseMessage);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("リクエスト時になんらかのエラーが発生しました:" + textStatus +":\n" + errorThrown);
}
});
});
});

Ajaxサーブレットにリクエストを投げて、そのリクエストが成功した場合に、resultにappendしている。
テキストボックスに「fuga」と入れると、

{"message":"fuga"} 

のようなJSON文字列を作って送信する。
ちなみに、JavaScriptのオブジェクトをJSON文字列に変換するのは、
jquery.json-2.4.js
というjQueryプラグインを使っている。

以下の部分で、サーブレットからのレスポンスJSONのメッセージを取り出している。

$("#result").append(data.responseMessage);

逆に言うと、サーブレット側で、

{"responseMessage" : "返事です"}

のようなレスポンスを返さないといけないということ。

では、リクエストを処理するサーブレットを見ていこう。

package controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import model.MessageBean;
import net.arnx.jsonic.JSON;
public class JsonTestServlet extends HttpServlet {
private final String REQUEST_STRING = "requestJs";
public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
String parameter = req.getParameter(REQUEST_STRING);
MessageBean bean = JSON.decode(parameter, MessageBean.class);
//サーブレットに送信されたメッセージが表示される。
System.out.println(bean.getMessage());
String responseJson = "{\"responseMessage\" : \"サーブレットからの返信です\"}";
res.setContentType("application/json;charset=UTF-8");
PrintWriter out = res.getWriter();
out.print(responseJson);
}
}

web.xmlはこんな感じ。

<servlet>
<servlet-name>jsontest</servlet-name>
<servlet-class>controller.JsonTestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jsontest</servlet-name>
<url-pattern>/jsontest/*</url-pattern>
</servlet-mapping>

さて、ブラウザのボタンを押すと、、、
結果として、ブラウザにサーブレットからのメッセージである
サーブレットからの返信です」
が表示される。

以上、サーブレットJavaScriptでJSONのやりとりをするサンプルでした。