AJAXとは

AJAX（Asynchronous JavaScript and XML）は、ブラウザとサーバー間で非同期通信を行う技術のことを指します。 ページ全体を再読み込みすることなく、必要なデータだけを取得・送信することで、ユーザー体験を向上させる目的で使用されます。 現在ではJSON形式が主流となっていますが、XMLも一部で使用されています。

AJAXは以下の特徴を持ちます：

• ページを再読み込みせずにデータを取得・送信
• 非同期処理による高速な応答
• バックエンドとの柔軟な通信

XMLHttpRequestの基本
Fetch API
AJAXの実例
まとめ

XMLHttpRequestの基本

XMLHttpRequest（XHR）はAJAXを実現するための初期の方法です。以下は基本的な使い方です：

        
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "https://api.example.com/data", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            };
            xhr.send();
        
    

この例では、指定されたURLからデータを非同期で取得し、レスポンスをJSON形式でログに出力しています。

Fetch API

Fetch APIはXMLHttpRequestの後継として登場しました。Promiseを利用しており、よりモダンで使いやすいインターフェースを提供します。 以下は基本的な使い方です：

        
            fetch("https://api.example.com/data")
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Network response was not ok");
                    }
                    return response.json();
                })
                .then(data => {
                    console.log(data);
                })
                .catch(error => {
                    console.error("There was a problem with the fetch operation:", error);
                });
        
    

Fetch APIではエラー処理が明確に記述でき、チェーンによる非同期処理の記述が読みやすくなっています。

AJAXの実例

GETリクエストを使用したデータの取得

        
            fetch("https://api.example.com/users")
                .then(response => response.json())
                .then(users => {
                    users.forEach(user => {
                        console.log(user.name);
                    });
                });
        
    

この例では、ユーザー一覧を取得し、各ユーザーの名前をログに出力します。

POSTリクエストを使用したデータの送信

        
            fetch("https://api.example.com/users", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ name: "Hayato", age: 25 })
            })
                .then(response => response.json())
                .then(data => {
                    console.log("User created:", data);
                });
        
    

この例では、新しいユーザー情報をサーバーに送信し、その結果をコンソールに出力しています。

エラー処理の例

        
            fetch("https://api.example.com/invalid-endpoint")
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .catch(error => {
                    console.error("Fetch error:", error);
                });
        
    

この例では、不正なエンドポイントへのリクエスト時にエラーメッセージを出力します。

まとめ

AJAXは現代のウェブアプリケーションで非常に重要な技術であり、ページの再読み込みなしにサーバーと通信を行うことで、効率的かつスムーズなユーザー体験を提供します。 XMLHttpRequestからFetch APIへの進化により、より使いやすく、読みやすいコードが書けるようになりました。 実際のプロジェクトでは、Fetch APIを使用するのが推奨されますが、用途に応じて適切な方法を選ぶことが大切です。