Think about the combination of Servlet and Ajax

Speaking of Web applications in java, I knew only the MVC model (Servlet + JSP + Beans). I recently learned that there is a combination of ** Servlet + Ajax **, so record it. The feature is that ** Servlet can be called from javascript **.

Combination of Servlet + JSP + Beans

Since it is familiar, the explanation is omitted here.

Combination of Servlet + Ajax

Looking only at the above figure, it seems that there is not much difference, but in the case of Servlet + Ajax, ** response is received by javascript **, so there is no need to update the screen one by one.

Merit 1

For example, you can access the DB indirectly from javascript through servlet as shown below **. When dealing with a large amount of data, it is also possible to retrieve the data from the DB in small quantities.

Merit 2

Compared to JSP, for the following reasons, ** the independence of the front and back is increased **, which makes development easier (in some cases). Exchange is possible if the JSON format is decided.

・ ** The caller is basically OK with html + jQuery ** → ** No need to declare beans or classes on the page ** ・ ** Exchange is JSON only ** ・ ** No need to update the screen ** ・ ** Multiple calls are possible as shown in the figure below **

Requester (javascript)

You can select synchronous / asynchronous communication, but note that it is not parallel processing. For parallel processing, see I tried using javascript WebWorker. It seems that you may send the request JSON itself as the value of one element like Reference.

``sample.js`

function sampleAjax() {

  //Request JSON
  var request = {
    param1 : "param",
    param2 : 12345
  };

  //Send request to servlet with ajax
  $.ajax({
    type    : "GET",          //GET / POST
    url     : "http://localhost:8080/SampleWeb/urlServlet",  //Destination Servlet URL (change as appropriate)
    data    : request,        //Request JSON
    async   : true,           //true:asynchronous(Default), false:Sync
    success : function(data) {
      //Message received when communication is successful
      response1 = data["response1"];
      response2 = data["response2"];
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
      alert("Some error occurred during the request:" + textStatus +":\n" + errorThrown);
    }
  });

}

Receive request (Servlet)

DB call etc. is also possible.

``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 {

        //Parameter acquisition
        String param1 = req.getParameter("param1");
        String param2 = req.getParameter("param2");

        //Processing (DB call, etc.)
        String response1 = "";
        String response2 = "";

        //output(Store the response in map and convert it to JSON)

        //JSON map
        Map<String, String> mapMsg = new HashMap<String, String>();

        //add to
        mapMsg.put("response1", response1);
        mapMsg.put("response2", response2);

        //Mapper(JSON <-> Map, List)
        ObjectMapper mapper = new ObjectMapper();

        //json string
        String jsonStr = mapper.writeValueAsString(mapMsg);  //list, map

        //Header setting
        res.setContentType("application/json;charset=UTF-8");   //JSON format, UTF-8

        //pw object
        PrintWriter pw = res.getWriter();

        //output
        pw.print(jsonStr);

        //Close
        pw.close();

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

    }

}

ObjectMapper Maven

Add the following to 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>