Ajax(Asynchronous JavaScript and XML)は、Webページ上で非同期にデータを送受信するための技術です。従来のWebページでは、ユーザーが何かアクションを起こすと、ページ全体を再読み込みして新しい情報を表示する必要がありました。しかし、Ajaxを使用すると、ページ全体を再読み込みせずに、バックグラウンドでサーバーと通信してデータを取得したり送信したりできます。

Ajaxの主な特徴

  1. 非同期通信: Ajaxは非同期通信を行います。つまり、データの取得や送信がバックグラウンドで行われるため、ページ全体の再読み込みを防ぎながら、特定の部分だけを更新することができます。
  2. ユーザビリティの向上: ユーザーはページ遷移を待たずに、スムーズにデータを取得・送信できるため、快適なユーザーエクスペリエンスを提供します。
  3. XMLやJSONの使用: Ajaxの名前にはXMLが含まれていますが、実際にはXMLだけでなくJSON(JavaScript Object Notation)など他のデータ形式も利用されます。最近ではJSONがよく使われます。
  4. JavaScriptとDOM操作: AjaxはJavaScriptを使用して実装されます。データの取得や更新を行うためにJavaScriptを使い、取得したデータをDOM操作してページに反映します。

Ajaxは、リアルタイムな検索、動的なコンテンツの読み込み、フォームのバリデーション、チャットアプリケーションなど、多くのWebアプリケーションで広く利用されています。これにより、ユーザーとのインタラクションを向上させ、よりレスポンシブなWebアプリケーションを実現できます。

JSPとServletを使ってAjaxを実装する簡単な例

この例では、ユーザーがボタンをクリックすると、サーバーにAjaxリクエストを送信し、サーバーは応答としてメッセージを返します。このプログラムを実行するにはWEB-INFフォルダのlibフォルダにjson.jarファイルが必要です。リンクから最新のjarファイルを入手してください。

以下の2つのファイルを作成します。説明はコメントを御覧ください。

  1. index.html: ユーザーがクリックするボタンを含むHTMLファイル
  2. AjaxServlet.java: Ajaxリクエストを処理するためのServlet
<!DOCTYPE html>
<html>
<head>
  <title>Ajax Example</title>
</head>
<body>
  <h1>Ajax Example</h1>
  <button id="ajaxButton">クリックしてメッセージを取得</button>
  <div id="messageContainer"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let count = 0; // 呼び出し回数を保持する変数
      const ajaxButton = document.querySelector('#ajaxButton');
      const messageContainer = document.querySelector('#messageContainer');

      ajaxButton.addEventListener('click', function() {
        count++; // ボタンがクリックされるたびに呼び出し回数をインクリメント

        // fetchを使用してAjaxリクエストを送信
        fetch('Ajax?count=' + count)
          .then(response => {
            if (!response.ok) {
              throw new Error('エラーが発生しました: ' + response.statusText);
            }
            return response.json();
          })
          .then(data => {
            // レスポンスのメッセージを表示
            messageContainer.textContent = data.message;
          })
          .catch(error => {
            console.log(error);
          });
      });
    });
  </script>
</body>
</html>

package controller;

import java.io.IOException;

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

import org.json.JSONObject;

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

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int count = Integer.parseInt(request.getParameter("count")); // 呼び出し回数を取得
		String message = count + "回目のサーバーからのメッセージです。";

		// JSONオブジェクトを作成
		JSONObject jsonResponse = new JSONObject();
		jsonResponse.put("message", message);

		// JSON形式のレスポンスを設定
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(jsonResponse.toString());
	}
}

最後までお読みいただきありがとうございます。