このページでは、HTMLでAjaxを使用する方法について詳しく解説します。

目次

• Ajaxとは？
• XMLHttpRequestを使ったAjax
• Fetch APIを使ったAjax
• async/awaitを用いた非同期通信
• JSONデータの取得と処理
• POSTリクエストの送信
• まとめ

Ajaxとは？

Ajax（Asynchronous JavaScript and XML）は、非同期通信を利用してサーバーとデータのやり取りを行う技術です。ページを再読み込みせずにデータを取得・更新できるため、動的なWebアプリケーションを構築する際に便利です。

XMLHttpRequestを使ったAjax

Ajaxの古典的な実装方法として、XMLHttpRequest オブジェクトを使用する方法があります。

基本的な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();
    

Fetch APIを使ったAjax

Fetch API は、より簡潔にAjaxリクエストを記述できる新しい方法です。

基本的なGETリクエスト

    fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error("Error:", error));
    

async/awaitを用いた非同期通信

async / await を使用すると、非同期コードをより直感的に書くことができます。

async/awaitを使ったGETリクエスト

    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();
    

JSONデータの取得と処理

Ajaxを利用すると、JSONデータを取得し、Webページに表示することができます。

例：JSONを取得してHTMLに表示

    async function fetchAndDisplayData() {
        let response = await fetch("https://jsonplaceholder.typicode.com/users");
        let users = await response.json();
        let userList = document.getElementById("userList");
        users.forEach(user => {
            let li = document.createElement("li");
            li.textContent = user.name;
            userList.appendChild(li);
        });
    }
    

ユーザーリスト取得

POSTリクエストの送信

サーバーにデータを送信する場合、POSTリクエストを利用します。

Fetch APIを使用したPOSTリクエスト

    async function postData() {
        let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                title: "サンプルタイトル",
                body: "これはサンプルの本文です",
                userId: 1
            })
        });
        let result = await response.json();
        console.log(result);
    }
    

データ送信

まとめ

Ajaxを使用すると、ページのリロードなしでサーバーとデータをやり取りできます。XMLHttpRequest よりも Fetch API を使うのが一般的で、async/await を使うことでコードをよりシンプルに書けます。