【JavaScript】XMLHttpRequest（get）の使い方

生徒

JavaScriptのHTTP通信ってよく分からないんだよな・・・。ブラウザで動かすとどんな挙動をするんだろ？

このような悩みの解決記事です。

「XMLHttpRequestがどのような挙動をするか」を理解するには、ブラウザで動かすのが一番です。

本記事で紹介しているコードで通信が成功すると、以下のような挙動が確認できます。

外部ファイルの書き換えが、XMLHttpRequestを通してブラウザに反映

ゆう

この後紹介するコードをコピペしてみてね

では、早速コードを見ていきましょう！

Contents

ファイルを準備する
実装する
- index.html
- sample.txt
反映画面を確認
コードの解説
XMLHttpRequestの使用例
- XMLHttpRequestを使わない場合
- XMLHttpRequestを使う場合
注意点
- 同一ドメインのみ適用可能
- 別ドメインで使用する場合は、別途設定が必要
まとめ
参考

ファイルを準備する

まずは、下記ファイルを準備しましょう（※同階層でOK）。

index.html
sample.txt

実装する

それぞれ下記コードを記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Ajaxてすと</title>
</head>
<body>
    <div id="result"></div>
    <script>
        var result = document.getElementById('result')
        var ajax = new XMLHttpRequest();

        ajax.addEventListener('load', function() {
            result.textContent = this.responseText
            // result.textContent = ajax.responseText
        })

        ajax.open('get', './sample.txt');
        ajax.send()

    </script>
</body>
</html>

sample.txt

サンプルテキスト

反映画面を確認

以下のように反映されます。

HTML側に”サンプルテキスト”のテキストはないのに、表示されています（あら不思議）。

sample.txtにさらにテキストを追加してみます。

sample.txtファイルの変更がブラウザに反映されている

ゆう

VSCodeのLive Serverを使用しているよ。

コードの解説

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Ajaxてすと</title>
</head>
<body>
    <div id="result"></div>
    <script>
        // id resultをelement要素を取得
        var result = document.getElementById('result')

        // XMLHttpRequestオブジェクトをインスタンス化
        var ajax = new XMLHttpRequest();

        // イベントハンドラ−を使用。HTTPリクエスト通信が成功したら・・・
        ajax.addEventListener('load', function() {
            // result要素にレスポンス通信で返ってきたテキストを表示させる
            result.textContent = this.responseText
            // result.textContent = ajax.responseText
        })

        // HTTPリクエスト通信の形式を指定して初期化する
        ajax.open('get', './sample.txt');
        // 通信開始
        ajax.send()

    </script>
</body>
</html>

これで、sample.txtに記述されているテキストをブラウザ上に表示させることが可能です。