2020/09/24

JavaScriptのAjax(XMLHttpRequest)の基本

PROGRAM

今回は、JavaScriptのAjax(XMLHttpRequest)の基本について、通信の仕方とエラー処理の仕方に分け、簡単に解説していきます。

通信の仕方

Ajaxとは、Asynchronous JavaScript+XMLの略で、XMLHttpRequestオブジェクトを使った通信のことです。

XMLHttpRequestでは、Webサーバと非同期の通信でやり取りを行うことができ、動的な処理を実装することができます。

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/", true);
xhr.onload = function (e) {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 通信成功の場合の処理を書く
            console.log(xhr.responseText);
        } else {
            // サーバエラーの場合の処理を書く
            console.error(xhr.statusText);
        }
    }
};
xhr.send(null);

上記のコードのように、XMLHttpRequestをインスタンス化し、onloadプロパティにサーバ側の応答に応じた処理(関数)を書きます。

エラー処理の仕方

XMLHttpRequestオブジェクトでは、通信成功時だけでなく、通信エラーの場合の処理も設定することができます。

通信エラーとは、サーバ側の応答するステータスコードのエラーのことではなく、サーバに到達する以前のエラーです。

xhr.onerror = function (e) {
    // 通信エラーの場合の処理を書く
    console.error(xhr.statusText);
};

エラー処理は、上記のコードのように、XMLHttpRequestをインスタンス化した後、onerrorプロパティに通信エラーの場合の処理(関数)を書きます。

タイムアウト処理の仕方

XMLHttpRequestオブジェクトでは、通信エラーの場合の処理以外にも、タイムアウトの設定もすることができます。

タイムアウトの設定は、ミリ秒単位でのタイムアウトの設定とタイムアウトの場合の処理をそれぞれ書く必要があります。

xhr.timeout = 5000;
xhr.ontimeout = function () {
    // タイムアウトの場合の処理を書く
};

タイムアウトの設定は、上記のコードのように、XMLHttpRequestをインスタンス化した後、timeoutプロパティにタイムアウトのミリ秒数を設定し、ontimeoutプロパティにタイムアウトの場合の処理(関数)を書きます。

• facebook
• Tweet
• Read Later