Servlet과 Ajax의 조합에 대해 생각

자바에서 웹 애플리케이션이라고 하면, MVC 모델(Servlet + JSP + Beans) 밖에 몰랐다.
최근 Servlet + Ajax의 조합이 있다는 것을 알았으므로 기록해 둡니다. 자바 스크립트에서 Servlet을 호출 할 수있는 것이 특징입니다.

Servlet+JSP+Beans 조합

친숙하기 때문에 여기에서는 설명 생략.

Servlet + Ajax 조합

위 그림만 보면 그다지 차이는 없는 것처럼 보이지만, Servlet + Ajax의 경우는 응답을 javascript가 받기 때문에, 일일이 화면을 갱신할 필요가 없다.

장점 1

예를 들어, 아래와 같이 servlet을 통해 간접적으로 javascript로부터 DB에 액세스 할 수있다. 대량의 데이터를 취급하는 경우, DB로부터 데이터를 소출로 꺼낼 수도 있다.

장점 2

JSP와 비교하면 아래와 같은 이유에 의해, 프런트와 백의 독립성이 높아지기 때문에 개발이 실시하기 쉬워진다(케이스도 있다). JSON의 형식을 정해 두면 교환은 가능하다.

・호출측은, 기본적으로 html+jQuery로 OK
　→페이지에 beans나 클래스의 선언이 필요 없게 된다
· · 교환은 JSON 만
・화면의 갱신이 불필요
・아래 그림과 같이 복수 호출도 가능

요청하는 쪽 (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>