【JavaScript】Ajaxを利用する方法を徹底解説！

スポンサーリンク

Ajax（Asynchronous JavaScript and XML）は、Webページをリロードせずにサーバーとデータのやり取りを行う技術です。これにより、動的でスムーズなユーザー体験（UX）を提供できます。例えば、検索候補のリアルタイム表示や、ボタンを押したときにページを更新せずにデータを送受信する機能などが実現できます。

なぜAjaxを使うのか？

従来のWebページでは、サーバーとの通信が発生するとページ全体をリロードする必要がありました。しかし、Ajaxを利用すると、必要なデータだけを取得・送信できるため、以下のようなメリットがあります。

✅ ページのリロードなしでデータを取得できる → よりスムーズな動作
✅ 通信量を削減できる → サーバー負荷の軽減
✅ ユーザー体験（UX）の向上 → サイトの操作が快適になる

本記事では、JavaScriptを使ったAjaxの基本的な使い方から、実際のコード例を交えて詳しく解説していきます。初心者の方でも理解しやすいように、順を追って説明していくので、ぜひ最後まで読んでみてください！

Ajaxの基本的な仕組み

Ajaxの基本的な仕組みを理解することは、効率的に活用するために重要です。ここでは、Ajaxの動作フローを説明し、どのようにデータがやり取りされるのかを解説します。

Ajaxの動作フロー

Ajaxの基本的な流れは以下のようになります。

1️⃣ クライアント（ブラウザ）がリクエストを送信

  • JavaScriptを使ってサーバーへデータの取得や送信のリクエストを出します。

2️⃣ サーバーがリクエストを処理してレスポンスを返す

  • サーバー側でリクエストを受け取り、データベースなどから必要な情報を取得し、レスポンスを作成します。

3️⃣ クライアントがレスポンスを受け取り、ページを更新

  • 受け取ったデータを解析し、JavaScriptを使ってページの一部を動的に変更します。

Ajaxを使ったデータ通信のイメージ図

[ ユーザーがボタンをクリック ]  
        ↓  
[ JavaScriptがサーバーへリクエストを送信 ]  
        ↓  
[ サーバーがデータを処理してレスポンスを返す ]  
        ↓  
[ JavaScriptがレスポンスを受け取り、ページの一部を更新 ]

この仕組みにより、Webページ全体をリロードすることなく、必要な部分のみを更新できるようになります。例えば、検索ボックスのオートコンプリートや、SNSの「いいね」ボタンの動作などがAjaxを利用した例です。

次の章では、具体的なコードを使って、JavaScriptでAjaxを実装する方法を詳しく解説していきます！

JavaScriptでAjaxを実装する方法

ここからは、JavaScriptを使って実際にAjax通信を実装する方法を解説します。現在、Ajaxを実装する方法はいくつかありますが、主に以下の３つが使われます。

1️⃣ Fetch APIを使う方法（推奨）
2️⃣ XMLHttpRequest（XHR）を使う方法（古め）
3️⃣ jQueryを使う方法（レガシーな環境向け）

それぞれの方法について、コード例を交えながら詳しく説明していきます。

Fetch APIを使う方法（推奨）

fetch() は、最新のブラウザ環境で推奨されているシンプルなAPIです。Promiseベースで動作するため、非同期処理を簡潔に記述できます。

GETリクエストの基本形

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())  // JSON形式に変換
    .then(data => console.log(data))    // データを表示
    .catch(error => console.error("Error:", error));  // エラー処理

✅ メリット

  • Promise に対応しているため、非同期処理がシンプル
  • then() チェーンで可読性が高い

async/await を使った書き方（よりシンプル）

async function fetchData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}
fetchData();

✅ メリット

  • async/await を使うことで、さらに可読性が向上
  • try/catch でエラーハンドリングがしやすい

XMLHttpRequestを使う方法（古め）

XMLHttpRequest は、Ajaxが登場した初期から使われている通信手段ですが、コードが長くなりやすく、現在ではfetch() の方が推奨されています。

GETリクエストの基本形

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

✅ ポイント

  • open(method, url, async) でリクエストを設定
  • onreadystatechange でレスポンスを処理
  • readyState === 4 でリクエスト完了を確認
  • status === 200 で成功したことを確認

📝 デメリット

  • コードが冗長で可読性が低い
  • Promise や async/await に対応していない

現在は fetch() の利用が推奨されるため、XMLHttpRequest は古いコードを修正するとき以外は使う機会が減っています。

jQueryを使う方法

古いプロジェクトでは jQuery を利用することもありますが、現在は fetch() の使用が主流です。ただし、jQueryを使うとコードが短縮できるため、jQueryベースのプロジェクトでは依然として利用されることがあります。

GETリクエストの基本形

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    type: "GET",
    success: function (data) {
        console.log(data);
    },
    error: function (error) {
        console.error("Error:", error);
    }
});

📝 jQueryを使うメリット

  • $.ajax() で簡潔に書ける
  • GET 以外のリクエスト（POST、PUT、DELETE）も統一した書き方が可能

📝 jQueryを使うデメリット

  • jQueryの読み込みが必要（追加のライブラリが必要）
  • 近年のプロジェクトではあまり推奨されない

Ajaxを活用した実践例

ここでは、実際にAjaxを使ってデータを取得・送信する具体的な例を紹介します。
「ボタンをクリックしてデータを取得する」「フォームのデータを非同期で送信する」の2つのシナリオを見ていきましょう！

ボタンをクリックしてデータを取得する

ユーザーがボタンをクリックすると、外部APIからデータを取得し、ページに表示する例を作成します。

実装の流れ

1️⃣ ボタンがクリックされたときに fetch() でAPIを呼び出す
2️⃣ 取得したデータを解析（JSON形式）
3️⃣ 解析したデータをページに表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajaxデータ取得</title>
</head>
<body>
    <h2>投稿データ</h2>
    <button id="fetchDataBtn">データを取得</button>
    <div id="result"></div>

    <script>
        document.getElementById("fetchDataBtn").addEventListener("click", async () => {
            try {
                let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
                let data = await response.json();
                document.getElementById("result").innerHTML = `<p><strong>${data.title}</strong>: ${data.body}</p>`;
            } catch (error) {
                console.error("Error:", error);
            }
        });
    </script>
</body>
</html>

✅ ポイント解説

  • fetch() を使って GET リクエストを実行
  • async/await を使用して非同期処理を簡潔に記述
  • document.getElementById("result").innerHTML を使ってページを更新

🚀 実行すると…
「データを取得」ボタンをクリックすると、サーバーからデータを取得し、ページ内に表示されます。

フォームのデータを非同期で送信する

次に、ユーザーがフォームに入力したデータを非同期でサーバーに送信する例を作成します。

実装の流れ

1️⃣ ユーザーがフォームに入力
2️⃣ fetch() を使って POST リクエストを送信
3️⃣ 送信後、成功メッセージを表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajaxフォーム送信</title>
</head>
<body>
    <h2>投稿フォーム</h2>
    <form id="postForm">
        <input type="text" id="title" placeholder="タイトル" required><br>
        <textarea id="body" placeholder="内容" required></textarea><br>
        <button type="submit">送信</button>
    </form>
    <div id="message"></div>

    <script>
        document.getElementById("postForm").addEventListener("submit", async (event) => {
            event.preventDefault(); // ページリロードを防止

            let title = document.getElementById("title").value;
            let body = document.getElementById("body").value;

            try {
                let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ title, body, userId: 1 })
                });
                let data = await response.json();
                document.getElementById("message").innerHTML = `<p>投稿成功！ID: ${data.id}</p>`;
            } catch (error) {
                console.error("Error:", error);
            }
        });
    </script>
</body>
</html>

✅ ポイント解説

  • event.preventDefault(); を使ってフォーム送信時のページリロードを防止
  • fetch() で POST リクエストを実行
  • JSON.stringify({ title, body, userId: 1 }) でデータをJSON形式に変換
  • サーバーからのレスポンスを受け取って成功メッセージを表示

🚀 実行すると…
フォームにタイトルと内容を入力して「送信」ボタンを押すと、サーバーにデータが送信され、成功メッセージが表示されます。

まとめ

本記事では、JavaScriptを使ったAjaxの基本的な仕組みと実装方法 について解説しました。

Ajaxをマスターすると、動的なWebアプリケーションを開発できるようになります。
ぜひ実際にコードを書きながら試してみてください！

スポンサーリンク

コメント