Javaのサーブレット(servlet)でAjax通信をするサンプルコード｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━

いっちばん基本的なJavaのサーブレットで書いたプログラムで、Ajax通信を行うサンプルコードをまとめました。

以下の感じ

概要

・Ajax通信はjQueryを使用
・テキストボックスに数字を入れてボタンを押すとAjaxが動いて数字がインクリメントされていく
・用意するファイルは３つ
　IndexServlet.java(初期表示用のサーブレット)
　index.jsp(画面)
　AjaxServlet.java(Ajax実行用のサーブレット)

本来はAjax通信と言えばDB接続してなんぼなんですが、今回はサンプルの枠を提供するのが主旨なので、単にインクリメントするだけとしています。

それでは見ていきましょう。

Ajax通信を行うサンプルコード

IndexServlet.java(初期表示用のサーブレット)

ここでは単に画面を表示するだけなので、jspを呼び出すだけです。

package hello;

import java.io.IOException;

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

/**
 * Servlet implementation class IndexServlet
 */
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * Default constructor.
     */
    public IndexServlet() {
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/hello/index.jsp");
        rd.forward(request, response);
    }

}

package hello;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* Servlet implementation class IndexServlet

@WebServlet("/IndexServlet")

public class IndexServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* Default constructor.

public IndexServlet() {

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/hello/index.jsp");

rd.forward(request, response);

}

index.jsp(画面)

テキストボックスとボタンを用意します。

ボタン押下時にテキストボックスの値をAjaxのパラメータとして送り、返ってきた値を再度テキストボックスに設定する感じです。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <script>
    $(function(){
      
      // ボタン押下時の処理
      $('#btn').on('click',function(){
        $.ajax({
          url: "AjaxServlet",
          type: "GET",
          data: {num : $("#text1").val()}
        }).done(function (result) {
          // 通信成功時のコールバック
          $("#text1").val(result);
        }).fail(function () {
          // 通信失敗時のコールバック
          alert("読み込み失敗");
        }).always(function (result) {
          // 常に実行する処理
        });
      });
      
    });
    </script>
    <h2>Hello Application</h2>
    <input type="text" id="text1" />
    <br><br>
    <button id="btn">Ajax</button>
  </body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<title>Hello</title>

</head>

<body>

$(function(){

// ボタン押下時の処理

$('#btn').on('click',function(){

$.ajax({

url: "AjaxServlet",

type: "GET",

data: {num : $("#text1").val()}

}).done(function (result) {

// 通信成功時のコールバック

$("#text1").val(result);

}).fail(function () {

// 通信失敗時のコールバック

alert("読み込み失敗");

}).always(function (result) {

// 常に実行する処理

});

</script>

<h2>Hello Application</h2>

</body>

</html>

.done(function (変数名) {

のようにコールバック関数のカッコの中に書いた変数名で返却値を扱えるので、それをテキストボックスに設定しています。

urlにはAjax実行用のサーブレットの@WebServletのパスを指定します。

AjaxServlet.java(Ajax実行用のサーブレット)

jsp側と合わせるべき箇所は、
@WebServlet(“/AjaxServlet”)のパス
request.getParameter(“num”)のnum

です。

また、Ajaxの実行時にGETかPOSTか指定するので、それと一致するほうに記述するようにしましょう。

package hello;

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // Ajaxで渡されたテキストボックスの値を変数に格納
        String num = request.getParameter("num");

        // カウントアップ処理(1度数値に変換してインクリメントした後に文字列に戻す)
        // 本来はここでDBを参照するなどの処理を記述していく
        num = String.valueOf(Integer.parseInt(num)+1);

        // 返却値に設定
        PrintWriter out = response.getWriter();
        out.print(num);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // POSTで実行する場合はこっちに記載
    }

}

package hello;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* Servlet implementation class AjaxServlet

@WebServlet("/AjaxServlet")

public class AjaxServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

public AjaxServlet() {

super();

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// Ajaxで渡されたテキストボックスの値を変数に格納

String num = request.getParameter("num");

// カウントアップ処理(1度数値に変換してインクリメントした後に文字列に戻す)

// 本来はここでDBを参照するなどの処理を記述していく

num = String.valueOf(Integer.parseInt(num)+1);

// 返却値に設定

PrintWriter out = response.getWriter();

out.print(num);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// POSTで実行する場合はこっちに記載

}

ちなみに、Integer.parseIntは数値型への変換を行いますが、処理対象が空文字であったり、数値に変換できない値の場合は例外が発生します。

ここではあえて例外が発生するようなコードにしていますので、数値に変換できない文字を入力してボタンを押下したときに、

読み込み失敗

というアラートがあがるのを確認してみてください。

さいごに

以上のコードで、テキストボックスに数値を入力してボタンを押すと押すたびに数値がインクリメントされるプログラムが完成しました。

あとはこれをベースにAjaxServletの中でDB読込等をしていけば、それっぽいことができると思います。

また、上記のコードでは最新のAjax通信の書き方をしています。

それ以外の書き方はこの記事でまとめていますので読んでみて下さい＾＾

　jQueryのajax書き方一覧！バージョン意識してます？動作するバージョンまとめ

それでは！また！！

最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
　厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-