このサンプルでは、"Fetch Data"ボタンをクリックすると、サーバーからJSON形式のデータが非同期で取得され、画面に表示されます。
成功すればJSON形式のデータが表示され、失敗すると「Failed to fetch data」というメッセージが表示されます。
サーバーサイドでは、簡単なJSONオブジェクトを手動で作成し、それをクライアントに返しています。
これは単純化した例ですので、実際のアプリケーションでは、通常、JSONライブラリ（例えばGsonやJacksonなど）を使用して、JavaオブジェクトからJSONに変換します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="fetchData">Fetch Data</button>
<div id="result"></div>
<script>
// $(document).ready()は、HTMLドキュメントが完全に読み込まれ、DOMが操作可能になったときに実行する関数を指定します。
$(document).ready(function () {
// $('#fetchData').click()は、HTML内のidが"fetchData"の要素（この例ではボタンなど）がクリックされたときに実行する関数を指定します。
$('#fetchData').click(function () {
// $.ajax()は、非同期（Asynchronous）HTTP（Ajax）リクエストを作成します。
$.ajax({
// リクエストの送信先URLを指定します。
url: 'Data',
// HTTPメソッド（この例では'GET'）を指定します。
type: 'GET',
// サーバーから返されるデータの型を指定します。この例では'json'を指定しています。
dataType: 'json',
// リクエストが成功したときに実行する関数を指定します。この関数は、サーバーから返されたデータを引数として受け取ります。
success: function (data) {
// HTMLを格納するための空の文字列を初期化します。
var html = '';
// forEachは、配列の各要素に対して関数を実行します。この例では、サーバーから返されたデータ（ユーザー情報の配列）の各要素（ユーザー情報）に対して関数を実行します。
data.forEach(function (user) {
// 各ユーザーの情報を文字列に変換し、それをHTML文字列に追加します。
html += 'Name: ' + user.name + ', Age: ' + user.age + ', City: ' + user.city + '<br>';
});
// 生成したHTMLをidが"result"の要素（この例ではdivなど）の中身として設定します。
$('#result').html(html);
},
// リクエストが失敗したときに実行する関数を指定します。
error: function () {
// アラートを表示して、データの取得に失敗したことをユーザーに通知します。
alert('Failed to fetch data');
}
});
});
});
</script>
</body>
</html>package controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Data")
public class DataServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
// クライアントに送信するコンテンツのMIMEタイプを設定します。これはJSON形式のデータを返すことを示します。
resp.setContentType("application/json");
// HttpServletResponseオブジェクトからPrintWriterオブジェクトを取得します。これは、クライアントへのレスポンスを書き込むためのオブジェクトです。
PrintWriter out = resp.getWriter();
// PrintWriterオブジェクトのprintメソッドを使用して、JSON形式のデータをレスポンスに書き込みます。この例では、3人のユーザー情報を含むJSON配列を作成しています。
out.print(
"[{\"name\":\"matsuda\", \"age\":30, \"city\":\"New York\"},{\"name\":\"imai\", \"age\":33, \"city\":\"Ichinomiya\"},{\"name\":\"tabuchi\", \"age\":29, \"city\":\"Hawaii\"}]");
// PrintWriterのflushメソッドを呼び出して、バッファにあるすべてのデータを強制的に送信します。これにより、データはすぐにクライアントに送信されます。
out.flush();
}
}
なお、このサンプルコードではエラーハンドリングやセキュリティ対策などは考慮していません。実際のアプリケーションで使用する場合は、それらの重要な要素も適切に考慮する必要があります。