Help us understand the problem. What is going on with this article?

ServletとAjaxの組み合わせについて考える

 javaでWebアプリケーションと言えば、MVCモデル(Servlet + JSP + Beans)しか知らなかった。
最近、Servlet + Ajaxの組み合わせがあることを知りったので、記録しておく。javascriptからServletを呼び出せるのが特徴である。

Servlet + JSP + Beansの組み合わせ

 お馴染みなので、ここでは説明省略。

java7.jpg

Servlet + Ajaxの組み合わせ

java8.jpg

 上図だけ見るとあまり違いは無い様に思えるが、Servlet + Ajaxの場合はレスポンスをjavascriptが受け取るので、いちいち画面を更新する必要が無い。

メリットその1

 例えば、下記の様にservletを通して間接的にjavascriptからDBにアクセスすることが出来る。大量のデータを扱う場合、DBからデータを小出しに取り出すことも出来る。

java9.jpg

メリットその2

 JSPと比べると下記の理由により、フロントとバックの独立性が高まるので開発が行いやすくなる(ケースもある)。JSONの形式を決めておけばやり取りは可能である。

 ・呼び出し側は、基本的にhtml + jQueryでOK
  →ページにbeansやクラスの宣言が必要なくなる
 ・やり取りはJSONのみ
 ・画面の更新が不要
 ・下図の様に複数呼び出しも可

java10.jpg

リクエストを行う側(javascript)

 同期・非同期通信を選択できますが、並列処理ではないので注意。
 並列処理については、javascriptのWebWorkerを使ってみたを参照。
 参考の様にリクエストJSON自体を1つの要素の値として送信しても良いようです。

sample.js
function sampleAjax() {

  //リクエストJSON
  var request = {
    param1 : "param",
    param2 : 12345
  };

  //ajaxでservletにリクエストを送信
  $.ajax({
    type    : "GET",          //GET / POST
    url     : "http://localhost:8080/SampleWeb/urlServlet",  //送信先のServlet URL(適当に変えて下さい)
    data    : request,        //リクエストJSON
    async   : true,           //true:非同期(デフォルト), false:同期
    success : function(data) {
      //通信が成功した場合に受け取るメッセージ
      response1 = data["response1"];
      response2 = data["response2"];
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
      alert("リクエスト時になんらかのエラーが発生しました:" + textStatus +":\n" + errorThrown);
    }
  });

}

リクエストを受け取る(Servlet)

 DB呼び出しなども可能。

sampleServlet.java
package servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns={"/urlServlet"})
public class SvDbViewRange extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    public void doGet (HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {

    try {

        //パラメータ取得
        String param1 = req.getParameter("param1");
        String param2 = req.getParameter("param2");

        //処理(DB呼び出し等)
        String response1 = "";
        String response2 = "";

        //出力(レスポンスをmapに格納してJSON化)

        //JSONマップ
        Map<String, String> mapMsg = new HashMap<String, String>();

        //追加
        mapMsg.put("response1", response1);
        mapMsg.put("response2", response2);

        //マッパ(JSON <-> Map, List)
        ObjectMapper mapper = new ObjectMapper();

        //json文字列
        String jsonStr = mapper.writeValueAsString(mapMsg);  //list, map

        //ヘッダ設定
        res.setContentType("application/json;charset=UTF-8");   //JSON形式, UTF-8

        //pwオブジェクト
        PrintWriter pw = res.getWriter();

        //出力
        pw.print(jsonStr);

        //クローズ
        pw.close();

    } catch(Exception e) {
        e.printStackTrace();
    }

    }

}

ObjectMapperのMaven

下記をpom.xmlに追記する。

pom.xml
  <dependencies>
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.5</version>
    </dependency>
  </dependencies>
qiiChan
紆余曲折合って、福岡でフリープログラマーやってます^^ ツイッター:https://twitter.com/hrlArZUXxmd0Zo7
http://ryutai.ninja-web.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした