タイトル: Ajax

本稿はAjaxに関連する記事です。

Ajaxとは

Ajaxとはウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法です。Asynchronous JavaScript + XML の略で、ページ全体を再読み込みせずにサーバーと通信し、結果をDOMに反映できます。

Ajaxの主な用途

フォーム送信を画面遷移なしで処理
入力候補のサジェスト表示
無限スクロールやページ単位の追加読み込み
リアルタイム検索結果の更新
ファイルアップロードの進捗表示
外部APIと連携した動的コンテンツ

本ページの子ページ一覧

$.ajax() — jQueryで非同期通信を行う基本
CSVファイルのダウンロード — Ajax 経由でCSVを取得し保存するパターン

jQuery $.ajax の基本

$.ajax({
url: '/api/users',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(xhr) {
console.error('通信失敗:', xhr.status);
}
});

fetch APIで書く場合（モダンな書き方）

近年のブラウザでは fetch がjQueryなしで使えます。Promise ベースで async/await と相性が良いです。

// 基本
fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

// async/await版
async function loadUsers() {
const res = await fetch('/api/users');
if (!res.ok) throw new Error('通信失敗');
return await res.json();
}

POSTでJSONを送る例

// jQuery
$.ajax({
url: '/api/users',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ name: 'Taro', age: 20 })
});

// fetch
fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Taro', age: 20 })
});

ハマりやすいポイント

CORS — 別ドメインAPIを叩くと Access-Control-Allow-Origin 不足で失敗する。サーバー側でヘッダ設定が必要
CSRFトークン — Laravel等のフレームワークではPOST時にCSRFトークンが必須
ファイルアップロード — FormData + processData:false + contentType:false（jQueryの場合）
非同期で進める処理順 — success以降に書く処理を then ／ await で続ける

IT総合Wiki

過去バージョン