動的なWebアプリケーション開発する際には、必須とも言えるAjax通信の解説です。ページ全体をリロードせずに必要なデータだけをやり取りすることができるので、ユーザー側の利便性が飛躍的に向上します。

以下は、jQueryを使ってAjax通信を行うシンプルなサンプルコードです。これでは、サーバーにGETリクエストを送信し、受け取ったデータを処理する例を示しています。

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery AJAX 通信の例</h1>
    <button id="getDataBtn">データを取得</button>
    <div id="result"></div>

    <script>
        $(document).ready(function(){
            $("#getDataBtn").click(function(){
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1", // 例としてのAPIエンドポイント
                    type: "GET", // GETリクエスト
                    dataType: "json", // 受け取るデータの型
                    success: function(response) {
                        // 成功した場合の処理
                        $("#result").html(`
                            <h5>タイトル: ${response.title}</h5>
                            <p>${response.body}</p>
                        `);
                    },
                    error: function(xhr, status, error) {
                        // エラー時の処理
                        $("#result").html(`<p>エラーが発生しました: ${error}</p>`);
                    }
                });
            });
        });
    </script>
<style>
#getDataBtn{
 padding:5px;
 background-color:white;
 border:1px solid black;
}
</style>
</body>
</html>