読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

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のやりとりをするサンプルでした。