Ajax（Asynchronous JavaScript and XML）は、Webページ上で非同期にデータを送受信するための技術です。従来のWebページでは、ユーザーが何かアクションを起こすと、ページ全体を再読み込みして新しい情報を表示する必要がありました。しかし、Ajaxを使用すると、ページ全体を再読み込みせずに、バックグラウンドでサーバーと通信してデータを取得したり送信したりできます。
Ajaxの主な特徴
- 非同期通信: Ajaxは非同期通信を行います。つまり、データの取得や送信がバックグラウンドで行われるため、ページ全体の再読み込みを防ぎながら、特定の部分だけを更新することができます。
- ユーザビリティの向上: ユーザーはページ遷移を待たずに、スムーズにデータを取得・送信できるため、快適なユーザーエクスペリエンスを提供します。
- XMLやJSONの使用: Ajaxの名前にはXMLが含まれていますが、実際にはXMLだけでなくJSON（JavaScript Object Notation）など他のデータ形式も利用されます。最近ではJSONがよく使われます。
- JavaScriptとDOM操作: AjaxはJavaScriptを使用して実装されます。データの取得や更新を行うためにJavaScriptを使い、取得したデータをDOM操作してページに反映します。
Ajaxは、リアルタイムな検索、動的なコンテンツの読み込み、フォームのバリデーション、チャットアプリケーションなど、多くのWebアプリケーションで広く利用されています。これにより、ユーザーとのインタラクションを向上させ、よりレスポンシブなWebアプリケーションを実現できます。
JSPとServletを使ってAjaxを実装する簡単な例
この例では、ユーザーがボタンをクリックすると、サーバーにAjaxリクエストを送信し、サーバーは応答としてメッセージを返します。このプログラムを実行するにはWEB-INFフォルダのlibフォルダにjson.jarファイルが必要です。リンクから最新のjarファイルを入手してください。
以下の2つのファイルを作成します。説明はコメントを御覧ください。
- index.jsp: ユーザーがクリックするボタンを含むJSPページ
- AjaxServlet.java: Ajaxリクエストを処理するためのServlet
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Ajax Example</h1>
<button id="ajaxButton">クリックしてメッセージを取得</button>
<div id="messageContainer"></div>
<script>
$(document).ready(function() {
let count = 0; // 呼び出し回数を保持する変数
$("#ajaxButton").click(function() {
count++; // ボタンがクリックされるたびに呼び出し回数をインクリメント
$.ajax({
type: "GET",
url: "Ajax",
data: { count: count }, // 呼び出し回数をリクエストパラメータとして送信
success: function(response) {
// レスポンスのメッセージを表示
$("#messageContainer").text(response.message);
},
error: function(xhr, status, 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());
}
}