AJAXの核心概念

• 非同期通信を実現するWeb技術の集合体
• 既存のHTML/CSS/JavaScript標準を組み合わせた開発手法
• ページ全体の再読み込みなしにサーバとデータ交換可能
• 同期通信（処理完了まで待機必須）と非同期通信（並列処理可能）の違い

実装パターン

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequestの利用例</title>
    <script>
        function sendRequest() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'ajaxHandler?user=example', true);
            
            xhr.send();
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const response = xhr.responseText;
                    document.getElementById('result').innerText = response;
                }
            };
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">データ取得</button>
    <div id="result"></div>
</body>
</html>

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery AJAX実装</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        function fetchData() {
            $.ajax({
                url: 'ajaxHandler',
                method: 'POST',
                data: { user: 'example' },
                success: function(response) {
                    $('#output').text(response);
                },
                error: function() {
                    alert('通信エラーが発生しました');
                },
                dataType: 'text'
            });
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">データ送信</button>
    <p id="output"></p>
</body>
</html>

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery GETメソッド</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        function quickFetch() {
            $.get('ajaxHandler', 
                 { user: 'example' },
                 function(data) {
                     $('#response').html('<p>'+data+'</p>');
                 },
                 'text'
            );
        }
    </script>
</head>
<body>
    <button onclick="quickFetch()">簡易取得</button>
    <div id="response"></div>
</body>
</html>

サーバサイド実装例（Java）

package com.example.ajax;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

@WebServlet("/ajaxHandler")
public class AjaxHandler extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
        throws IOException {
        String userData = request.getParameter("user");
        System.out.println("受信データ: " + userData);
        
        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write("サーバ応答: " + userData);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
        throws IOException {
        doPost(request, response);
    }
}