用途
新着
履歴
分類

JS Ajaxをプレーンで実装

JS Ajaxをプレーンで実装
プラグインを使わずにプレーンのJavaScriptで非同期通信Ajaxを実装するサンプルです。

XMLHttpRequestの関数を利用します。

XMLとありますが、JSONを使うケースが多いためJSONの例を掲載します。


const xhr = new XMLHttpRequest();

// 同じドメインのJSONを指定
xhr.open("GET", 'https://www.kipure.com/sample/json_common_arrival');

//リクエスト送信
xhr.send();

// 自動的に呼ばれる関数
xhr.onreadystatechange = function () {
    // readyStateは、呼び出しの状態を表す
        1:open()が完了
        2:send()が完了、ヘッダー情報取得
        3:リクエストロード中有
        4:リクエストが完了読み込み済
    // statusは、httpステータスで200が正常値。
    if (xhr.readyState == 4 && xhr.status == 200) {
        // jsonをオブジェクトに変更
        const data_arr = JSON.parse(xhr.responseText);

        for (var i = 0; i < data_arr.left_post_list.length; i++) {
            console.log(" title: " + data_arr.left_post_list[i].post_title );
            if (i == 10) {
                break;
            }
        }

    }
}

読み込み結果はコンソール画面に以下のようになります。

公開 2023-01-06 00:12:08
更新 2023-01-15 10:04:00
このページの二次元コード
JS Ajaxをプレーンで実装

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top