【実践】jQuery Ajaxの使い方 - 非同期通信を完全マスター

Ajaxとは

Ajax（Asynchronous JavaScript and XML） は、ページを再読み込みせずにサーバーと通信する技術です。

Ajaxのメリット

ユーザー体験向上: ページ遷移なしでデータ更新
サーバー負荷軽減: 必要なデータのみ取得
高速なレスポンス: 部分的な更新で待ち時間短縮

jQueryでAjaxを使う理由

シンプルなAPI
クロスブラウザ対応
豊富なオプション
Promise/Deferredサポート

$.ajax()の基本

基本構文

$.ajax({
    url: 'api/data.json',      // リクエスト先URL
    type: 'GET',                // HTTPメソッド
    dataType: 'json',           // レスポンスのデータ型
    success: function(data) {   // 成功時のコールバック
        console.log(data);
    },
    error: function(xhr, status, error) {  // エラー時のコールバック
        console.error(error);
    }
});

主要なオプション

$.ajax({
    // 必須オプション
    url: '/api/users',          // リクエスト先

    // HTTPメソッド
    type: 'GET',                // GET, POST, PUT, DELETE など
    // または
    method: 'GET',              // type と同じ（jQuery 1.9+）

    // 送信データ
    data: {
        id: 1,
        name: 'テスト'
    },

    // データ型
    dataType: 'json',           // json, xml, html, text, script

    // コンテンツタイプ
    contentType: 'application/json',

    // タイムアウト（ミリ秒）
    timeout: 10000,

    // キャッシュ
    cache: false,               // falseでキャッシュ無効

    // 認証
    headers: {
        'Authorization': 'Bearer token123'
    },

    // 非同期/同期
    async: true,                // false で同期（非推奨）

    // コールバック
    beforeSend: function(xhr) {
        // リクエスト前の処理
        $('#loading').show();
    },
    success: function(data, status, xhr) {
        // 成功時の処理
        console.log(data);
    },
    error: function(xhr, status, error) {
        // エラー時の処理
        console.error(error);
    },
    complete: function(xhr, status) {
        // 完了時の処理（成功/失敗問わず）
        $('#loading').hide();
    }
});

Promise形式（推奨）

$.ajax({
    url: '/api/users',
    type: 'GET',
    dataType: 'json'
})
.done(function(data) {
    // 成功時
    console.log('成功:', data);
})
.fail(function(xhr, status, error) {
    // 失敗時
    console.error('エラー:', error);
})
.always(function() {
    // 常に実行
    console.log('完了');
});

ショートカットメソッド

$.get()

GETリクエストを簡単に送信できます。

// 基本形
$.get('/api/users', function(data) {
    console.log(data);
});

// パラメータ付き
$.get('/api/users', { id: 1 }, function(data) {
    console.log(data);
});

// データ型を指定
$.get('/api/users', { id: 1 }, function(data) {
    console.log(data);
}, 'json');

// Promise形式
$.get('/api/users')
    .done(function(data) {
        console.log(data);
    })
    .fail(function(error) {
        console.error(error);
    });

$.post()

POSTリクエストを簡単に送信できます。

// 基本形
$.post('/api/users', { name: '山田', email: 'yamada@example.com' }, function(data) {
    console.log('登録成功:', data);
});

// Promise形式
$.post('/api/users', {
    name: '山田',
    email: 'yamada@example.com'
})
.done(function(data) {
    console.log('登録成功:', data);
})
.fail(function(error) {
    console.error('登録失敗:', error);
});

$.getJSON()

JSONデータを取得する専用メソッドです。

// 基本形
$.getJSON('/api/users.json', function(data) {
    $.each(data, function(index, user) {
        console.log(user.name);
    });
});

// パラメータ付き
$.getJSON('/api/users.json', { status: 'active' }, function(data) {
    console.log(data);
});

$.getScript()

外部スクリプトを読み込みます。

$.getScript('js/plugin.js', function() {
    console.log('スクリプト読み込み完了');
    // プラグインを使用
    initPlugin();
});

メソッド比較表

メソッド	用途	HTTPメソッド
$.ajax()	汎用	任意
$.get()	データ取得	GET
$.post()	データ送信	POST
$.getJSON()	JSON取得	GET
$.getScript()	スクリプト読み込み	GET

データ送信の方法

フォームデータの送信

// フォームの値を取得して送信
$('#myForm').on('submit', function(e) {
    e.preventDefault();  // デフォルトの送信を防ぐ

    $.ajax({
        url: '/api/submit',
        type: 'POST',
        data: $(this).serialize(),  // フォームデータをシリアライズ
        success: function(response) {
            alert('送信成功');
        },
        error: function() {
            alert('送信失敗');
        }
    });
});

serializeとserializeArray

// serialize() - URLエンコードされた文字列
let formData = $('#myForm').serialize();
// 結果: "name=%E5%B1%B1%E7%94%B0&email=yamada%40example.com"

// serializeArray() - 配列形式
let formArray = $('#myForm').serializeArray();
// 結果: [{name: "name", value: "山田"}, {name: "email", value: "yamada@example.com"}]

JSONデータの送信

$.ajax({
    url: '/api/users',
    type: 'POST',
    contentType: 'application/json',  // JSONとして送信
    data: JSON.stringify({
        name: '山田太郎',
        email: 'yamada@example.com',
        age: 30
    }),
    success: function(response) {
        console.log(response);
    }
});

ファイルアップロード（FormData）

$('#uploadForm').on('submit', function(e) {
    e.preventDefault();

    let formData = new FormData(this);

    $.ajax({
        url: '/api/upload',
        type: 'POST',
        data: formData,
        processData: false,  // 必須: データを処理しない
        contentType: false,  // 必須: Content-Typeを設定しない
        success: function(response) {
            alert('アップロード成功');
        },
        error: function() {
            alert('アップロード失敗');
        }
    });
});

エラーハンドリング

基本的なエラーハンドリング

$.ajax({
    url: '/api/users',
    type: 'GET'
})
.done(function(data) {
    console.log('成功:', data);
})
.fail(function(xhr, status, error) {
    // xhrオブジェクトから詳細を取得
    console.log('ステータスコード:', xhr.status);
    console.log('ステータステキスト:', xhr.statusText);
    console.log('レスポンス:', xhr.responseText);

    // エラーの種類で分岐
    if (xhr.status === 404) {
        alert('データが見つかりません');
    } else if (xhr.status === 500) {
        alert('サーバーエラーが発生しました');
    } else if (status === 'timeout') {
        alert('タイムアウトしました');
    } else {
        alert('通信エラーが発生しました');
    }
});

グローバルエラーハンドリング

すべてのAjaxリクエストに共通のハンドリングを設定できます。

// Ajaxリクエスト開始時
$(document).ajaxStart(function() {
    $('#loading').show();
});

// Ajaxリクエスト完了時
$(document).ajaxStop(function() {
    $('#loading').hide();
});

// エラー発生時
$(document).ajaxError(function(event, xhr, settings, error) {
    console.error('Ajaxエラー:', error);

    if (xhr.status === 401) {
        // 未認証の場合はログインページへ
        window.location.href = '/login';
    }
});

タイムアウト設定

$.ajax({
    url: '/api/slow-endpoint',
    type: 'GET',
    timeout: 5000,  // 5秒でタイムアウト
})
.fail(function(xhr, status, error) {
    if (status === 'timeout') {
        alert('リクエストがタイムアウトしました。もう一度お試しください。');
    }
});

リトライ処理

function ajaxWithRetry(options, maxRetries = 3) {
    let retryCount = 0;

    function doRequest() {
        return $.ajax(options).fail(function(xhr, status, error) {
            if (retryCount < maxRetries && xhr.status >= 500) {
                retryCount++;
                console.log(`リトライ ${retryCount}/${maxRetries}`);
                return doRequest();
            }
        });
    }

    return doRequest();
}

// 使用例
ajaxWithRetry({
    url: '/api/data',
    type: 'GET'
}, 3)
.done(function(data) {
    console.log('成功:', data);
})
.fail(function() {
    console.log('最終的に失敗');
});

実践的なサンプル

検索機能（リアルタイム検索）

<input type="text" id="searchInput" placeholder="検索...">
<div id="searchResults"></div>

let searchTimer;

$('#searchInput').on('input', function() {
    let query = $(this).val();

    // 前のタイマーをキャンセル（デバウンス）
    clearTimeout(searchTimer);

    if (query.length < 2) {
        $('#searchResults').empty();
        return;
    }

    // 300ms待ってから検索（タイピング中は待機）
    searchTimer = setTimeout(function() {
        $.ajax({
            url: '/api/search',
            type: 'GET',
            data: { q: query },
            beforeSend: function() {
                $('#searchResults').html('<p>検索中...</p>');
            }
        })
        .done(function(results) {
            let html = '';
            if (results.length === 0) {
                html = '<p>結果が見つかりません</p>';
            } else {
                results.forEach(function(item) {
                    html += `<div class="result-item">${item.title}</div>`;
                });
            }
            $('#searchResults').html(html);
        })
        .fail(function() {
            $('#searchResults').html('<p>検索エラー</p>');
        });
    }, 300);
});

無限スクロール

let page = 1;
let loading = false;

$(window).on('scroll', function() {
    // ページ下部に近づいたら
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMore();
    }
});

function loadMore() {
    if (loading) return;
    loading = true;

    $.ajax({
        url: '/api/items',
        type: 'GET',
        data: { page: page },
        beforeSend: function() {
            $('#loading-spinner').show();
        }
    })
    .done(function(items) {
        if (items.length === 0) {
            $(window).off('scroll');  // もう読み込むものがない
            return;
        }

        items.forEach(function(item) {
            $('#item-list').append(`
                <div class="item">
                    <h3>${item.title}</h3>
                    <p>${item.description}</p>
                </div>
            `);
        });

        page++;
    })
    .always(function() {
        $('#loading-spinner').hide();
        loading = false;
    });
}

いいねボタン

<button class="like-btn" data-id="123">
    <span class="like-icon">♡</span>
    <span class="like-count">42</span>
</button>

$('.like-btn').on('click', function() {
    let $btn = $(this);
    let itemId = $btn.data('id');

    $.ajax({
        url: '/api/like',
        type: 'POST',
        data: { id: itemId }
    })
    .done(function(response) {
        // UIを更新
        $btn.find('.like-count').text(response.count);
        $btn.find('.like-icon').text(response.liked ? '♥' : '♡');
        $btn.toggleClass('liked', response.liked);
    })
    .fail(function() {
        alert('エラーが発生しました');
    });
});

まとめ

ベストプラクティス

Promise形式を使う: .done(), .fail(), .always() で可読性向上
エラーハンドリング必須: 必ずエラー処理を実装
ローディング表示: ユーザーに通信中であることを伝える
タイムアウト設定: 無限に待たせない
デバウンス/スロットル: 連続リクエストを制御

よく使うパターン

// 推奨テンプレート
$.ajax({
    url: '/api/endpoint',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    timeout: 10000
})
.done(function(response) {
    // 成功処理
})
.fail(function(xhr, status, error) {
    // エラー処理
})
.always(function() {
    // 後処理
});

Ajaxを使いこなして、ユーザー体験の良いWebアプリケーションを作りましょう。

目次