WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

jQueryのAjax（$.ajax）の使い方｜JSON取得とエラー処理を初心者向けに解説

jQuery Ajaxの使い方を表すアイキャッチ

「ボタンを押したあと、ページ全体を再読み込みせずにデータだけを表示したい」と思うことがありますよね。jQueryの$.ajax()を使うと、サーバーからJSONなどのデータを取得し、必要な部分だけを書き換えられます。

この記事では、Ajaxの仕組みから$.ajax()の書き方、JSONを画面へ表示する手順、通信に失敗した場合の処理までを初心者向けに解説します。完成コードだけでなく、ファイルの作成順に確認していきましょう。

jQueryのAjaxとは

Ajax（エイジャックス）は、ブラウザからサーバーへ通信し、ページ全体を再読み込みせずに必要なデータを受け取る仕組みです。名前は「Asynchronous JavaScript and XML」に由来しますが、現在はXMLよりJSONを扱う場面が多くあります。

ブラウザとサーバー間のAjaxリクエストとレスポンスの流れ

ブラウザがサーバーへ「このデータが欲しい」とリクエストを送り、サーバーがレスポンスを返します。受け取ったJSONをJavaScriptでHTMLへ追加すれば、画面の一部だけを更新できます。

検索候補、もっと見るボタン、フォーム送信後のメッセージ、無限スクロールなどが代表的な利用例です。ただし、通信するだけで画面が自動的に変わるわけではありません。取得したデータをどこへ表示するかもJavaScriptで指定します。

$.ajax()の基本構文

jQueryで細かく通信条件を指定するときは、$.ajax()を使います。urlやmethodなどの設定をオブジェクト形式で渡します。

$.ajax({
  url: 'articles.json',
  method: 'GET',
  dataType: 'json',
})
  .done(function (data) {
    console.log(data);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    console.error(textStatus, errorThrown);
  });
設定・処理役割
urlデータを取得・送信するURL
methodGETやPOSTなどの通信方法
dataType受け取るデータ形式。JSONならjson
dataサーバーへ送る値
timeout通信を待つ時間（ミリ秒）
.done()通信成功後の処理
.fail()通信失敗後の処理
.always()成功・失敗にかかわらず最後に行う処理

dataType: 'json'を指定すると、受け取ったJSON文字列をjQueryがJavaScriptの配列やオブジェクトへ変換します。設定名は大文字・小文字を区別するため、datatypeではなくdataTypeと書いてください。

JSONを取得して画面へ表示する

ここからは、おすすめ記事のJSONデータを読み込み、3枚のカードとして表示する例を作ります。用意するファイルはindex.html、style.css、script.js、articles.jsonの4つです。

すべて同じフォルダへ保存し、ローカルサーバーから表示してください。ファイルを直接ダブルクリックしてfile://で開くと、ブラウザのセキュリティ制限によってAjax通信が失敗する場合があります。

Ajaxでデータを取得する前の表示

最初は「まだデータを取得していません」と表示されています。「記事を読み込む」ボタンを押したときだけ通信する構成です。

HTMLで表示場所を用意する

index.htmlへボタン、通信状態を伝える要素、記事カードの挿入先を記述します。jQuery本体を先に読み込み、そのあとに自分のscript.jsを読み込む順番が重要です。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Ajaxの表示例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="demo">
      <p class="demo__label">jQuery Ajaxの表示例</p>
      <h1>おすすめ記事を読み込む</h1>
      <p>ボタンを押すと、ページを再読み込みせずにJSONデータを取得します。</p>

      <div class="demo__actions">
        <button id="load-button" type="button">記事を読み込む</button>
        <button id="error-button" class="button-secondary" type="button">エラー表示を確認</button>
      </div>

      <p id="status" class="status" aria-live="polite">まだデータを取得していません。</p>
      <div id="article-list" class="article-list"></div>
    </main>

    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

aria-live="polite"は、通信結果のメッセージが変わったことをスクリーンリーダーへ穏やかに通知する指定です。目で見た表示だけでなく、支援技術を使う人にも結果が伝わりやすくなります。

CDNを用いてjQueryを利用する方法とメリットデメリットを解説

CSSでカードを整える

style.cssでは、取得した記事を3列のカードとして表示します。画面幅が640px以下になると1列へ切り替わるため、スマートフォンでも横にはみ出しません。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  color: #172033;
  background: #f1f5fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.demo {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 36px;
  border: 1px solid #dbe3ef;
  border-radius: 20px;
  background: #fff;
}

.demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 18px;
}

button {
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #2368d8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button-secondary {
  color: #36445d;
  background: #e8eef8;
}

.status {
  min-height: 28px;
  color: #536079;
  font-weight: 700;
}

.status.is-error {
  color: #c92a2a;
}

.article-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.article-card {
  padding: 18px;
  border: 1px solid #cfe0fb;
  border-radius: 14px;
  background: #f7faff;
}

@media (max-width: 640px) {
  .article-list {
    grid-template-columns: 1fr;
  }
}

取得するJSONを作る

articles.jsonへ、記事タイトルと説明文を3件用意します。JSONでは、キーと文字列をダブルクォーテーションで囲み、最後の項目にはカンマを付けません。

[
  {
    "title": "Ajaxの基本",
    "description": "リクエストとレスポンスの流れを学びます。"
  },
  {
    "title": "JSONを表示",
    "description": "取得したデータをHTMLへ追加します。"
  },
  {
    "title": "エラー処理",
    "description": "通信に失敗した場合の表示を整えます。"
  }
]

$.ajax()でJSONを読み込む

script.jsへ通信処理を書きます。ボタンを押すとloadArticles()を呼び出し、通信中、成功、失敗のメッセージを順番に切り替えます。

const $loadButton = $('#load-button');
const $errorButton = $('#error-button');
const $status = $('#status');
const $articleList = $('#article-list');

function loadArticles(url) {
  $loadButton.add($errorButton).prop('disabled', true);
  $status.removeClass('is-error').text('読み込み中です…');
  $articleList.empty();

  $.ajax({
    url,
    method: 'GET',
    dataType: 'json',
    timeout: 5000,
  })
    .done(function (articles) {
      const cards = articles.map(function (article) {
        return $('<article>', { class: 'article-card' }).append(
          $('<h2>').text(article.title),
          $('<p>').text(article.description),
        );
      });

      $articleList.append(cards);
      $status.text(`${articles.length}件の記事を読み込みました。`);
    })
    .fail(function (jqXHR, textStatus) {
      $status
        .addClass('is-error')
        .text(`読み込みに失敗しました（HTTP ${jqXHR.status || textStatus}）。`);
    })
    .always(function () {
      $loadButton.add($errorButton).prop('disabled', false);
    });
}

$loadButton.on('click', function () {
  loadArticles('articles.json');
});

$errorButton.on('click', function () {
  loadArticles('missing.json');
});

.done()では、配列の各データから<article>を作っています。取得した文字列を.text()で追加しているのは、データ内のHTMLをそのまま実行させないためです。外部データやユーザー入力を安易に.html()へ渡さないようにしてください。

【on, click】超簡単！jQueryでクリックイベントを作る方法

Ajax通信に成功した表示

AjaxでJSONデータを取得して記事カードを表示した結果

ボタンを押すとarticles.jsonへのGETリクエストが送信され、HTTP 200のレスポンスを受け取ります。ページのURLや見出しはそのままで、カードの部分だけが追加されました。

通信中はボタンを無効にしているため、連打による重複リクエストも防げます。処理が終わると.always()でボタンを再び有効にします。

Ajax通信に失敗した場合も表示する

通信は常に成功するとは限りません。URLの間違い、サーバーエラー、タイムアウトなどに備え、.fail()で利用者へ状況を伝えることが大切です。

Ajax通信に失敗してHTTP 404を表示した結果

この例では存在しないmissing.jsonへアクセスし、HTTP 404を意図的に発生させています。開発中はメッセージだけでなく、ブラウザの開発者ツールにあるNetworkパネルで、リクエストURLとHTTPステータスを確認してください。

GETとPOSTを使い分ける

データを取得する処理では一般にGET、フォーム内容の登録や更新ではPOSTを使います。POSTで値を送る場合はmethod: 'POST'とdataを指定します。

$.ajax({
  url: '/api/contact',
  method: 'POST',
  dataType: 'json',
  data: {
    name: $('#name').val(),
    message: $('#message').val(),
  },
})
  .done(function (response) {
    $('#status').text(response.message);
  })
  .fail(function () {
    $('#status').text('送信できませんでした。時間を置いて再度お試しください。');
  });

送信先のサーバー側にも、受け取った値の検証、認証、CSRF対策などが必要です。Ajaxに変更しただけでフォームが安全になるわけではありません。

$.get()・$.post()との違い

$.get()と$.post()は、Ajax通信を短く書くためのメソッドです。単純なGETやPOSTなら便利ですが、タイムアウトなどの細かな条件をまとめて指定するときは$.ajax()のほうが読みやすくなります。

$.get('articles.json').done(function (articles) {
  console.log(articles);
});

$.post('/api/contact', {
  name: '山田',
  message: 'お問い合わせ内容',
}).done(function (response) {
  console.log(response);
});

Ajaxが動かないときの確認項目

  • jQueryを先に読み込んでいるか：script.jsより前にjQuery本体を読み込みます。
  • URLが正しいか：相対パスは、現在表示しているHTMLを基準に解決されます。
  • HTTPステータスは何か：404はURLやファイル、500は主にサーバー側を確認します。
  • JSONの文法が正しいか：ダブルクォーテーションやカンマの位置を確認します。
  • dataTypeと実際の形式が一致するか：JSONではない内容をjsonとして読むとparsererrorになることがあります。
  • 別ドメインへアクセスしていないか：アクセス先のサーバーでCORSが許可されていないと、ブラウザが通信結果の利用を止めます。
  • file://で開いていないか：ローカルでもHTTPサーバーを起動して確認します。

$.ajax()はPromiseそのものではなく、jQuery独自のjqXHRオブジェクトを返します。そのため、jQueryの記事では.done()、.fail()、.always()の組み合わせを覚えると理解しやすいです。

jQueryを使わない場合はfetch()も選べる

新しくJavaScriptだけで制作するサイトでは、ブラウザ標準のfetch()も選択肢です。すでにjQueryを使っているサイトでは$.ajax()、jQueryへ依存しない構成ではfetch()というように、既存環境に合わせて選んでください。

fetch('articles.json')
  .then(function (response) {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    return response.json();
  })
  .then(function (articles) {
    console.log(articles);
  })
  .catch(function (error) {
    console.error(error);
  });

まとめ

  • Ajaxを使うと、ページ全体を再読み込みせずにデータを取得・送信できます。
  • jQueryでは$.ajax()へURL、通信方法、データ形式などを指定します。
  • 成功時は.done()、失敗時は.fail()、最後の共通処理は.always()へ書きます。
  • 動かない場合は、URL、HTTPステータス、JSONの文法、CORS、読み込み順を確認します。
  • 取得した文字列は、安全性を考えて.text()で表示するのが基本です。

まずは記事内の4ファイルを同じフォルダへ保存し、ローカルサーバーから表示してみてください。通信の成功と失敗を両方確認すると、実際の制作でも原因を切り分けやすくなります。